diff --git a/docs/sources/panels-visualizations/configure-tooltips/index.md b/docs/sources/panels-visualizations/configure-tooltips/index.md index 0a71de553a3..6c0c0428328 100644 --- a/docs/sources/panels-visualizations/configure-tooltips/index.md +++ b/docs/sources/panels-visualizations/configure-tooltips/index.md @@ -126,6 +126,10 @@ Set the hover proximity (in pixels) to control how close the cursor must be to a ![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif) +### Max height + +Set the maximum height of the tooltip box. The default is 600 pixels. + ### Show histogram (Y axis) For the heatmap visualization only, when you set the **Tooltip mode** to **Single**, the **Show histogram (Y axis)** option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis. diff --git a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md index 08ee9c1b664..d607c510d5b 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md @@ -145,7 +145,13 @@ Transparency of the gradient is calculated based on the values on the y-axis. Op Gradient color is generated based on the hue of the line color. -{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} + +## Legend options + +Legend options control the series names and statistics that appear under or to the right of the graph. {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/panels-visualizations/visualizations/candlestick/index.md index 71fac5c0ea9..c0e2c2f2938 100644 --- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/panels-visualizations/visualizations/candlestick/index.md @@ -119,3 +119,7 @@ If your data can't be mapped to these dimensions for some reason (for example, b ## Additional fields The candlestick visualization is based on the time series visualization. It can visualize additional data dimensions beyond open, high, low, close, and volume The **Include** and **Ignore** options allow it to visualize other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [time series](ref:time-series-visualization) visualization. + +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/heatmap/index.md b/docs/sources/panels-visualizations/visualizations/heatmap/index.md index 06ed887385c..07fd8f6f0ca 100644 --- a/docs/sources/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/panels-visualizations/visualizations/heatmap/index.md @@ -158,9 +158,25 @@ Use these settings to refine your visualization. ### Tooltip -- **Show tooltip -** Show heatmap tooltip. -- **Show Histogram -** Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp. -- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color. This option is configurable when you enable the `newVizTooltips` feature flag. +#### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +#### Show histogram (Y axis) + +When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis. + +#### Show color scale + +When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes the color scale that's also represented in the legend. When the color scale is included in the tooltip, it shows the hovered value on the scale: + +![Heatmap with a tooltip displayed showing the hovered value reflected in the color scale](/media/docs/grafana/panels-visualizations/screenshot-heatmap-tooltip-color-scale-v11.0.png) ### Legend diff --git a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md index 5342fa4c96c..9fec92a798f 100644 --- a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md @@ -86,7 +86,9 @@ The following example shows a pie chart with **Name** and **Percent** labels dis ![Pie chart labels](/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png) -{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} ## Legend options diff --git a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md index a4db060e0a4..047d28adf5f 100644 --- a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md @@ -145,4 +145,8 @@ The visualization can be used with time series data as well. In this case, the t When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme](ref:color-scheme) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`. -{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} + +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/status-history/index.md b/docs/sources/panels-visualizations/visualizations/status-history/index.md index 5f7389dcb0d..4173efb7361 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -125,4 +125,8 @@ To assign colors to boolean or string values, use the [Value mappings](ref:value When the legend option is enabled it can show either the value mappings or the threshold brackets. To show the value mappings in the legend, it's important that the `Color scheme` as referenced in [Color scheme](ref:color-scheme) is set to `Single color` or `Classic palette`. To see the threshold brackets in the legend set the `Color scheme` to `From thresholds`. -{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} + +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/time-series/index.md b/docs/sources/panels-visualizations/visualizations/time-series/index.md index 37d124855ca..3acc9b9390c 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/panels-visualizations/visualizations/time-series/index.md @@ -77,17 +77,11 @@ The following video guides you through the creation steps and common customizati ## Tooltip options -Tooltip options control the information overlay that appears when you hover over data points in the graph. - -{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} - -### Hover proximity - -This option controls how close your cursor must be to a data point before the tooltip appears. Values are in pixels. +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} ## Legend options -Legend options control the series names and statistics that appear under or to the right of the graph. +Legend options control the series names and statistics that appear under or to the right of the visualization. {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index 4c4ccb20f50..f59b01ca816 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -43,3 +43,7 @@ Use this option to select a field that contains increasing numeric values. For example, you could represent engine power and torque versus speed where speed is plotted on the x axis and power and torque are plotted on the y axes. {{< figure src="/media/docs/grafana/screenshot-grafana-10-0-trend-panel-new-colors.png" max-width="750px" caption="Trend engine power and torque curves" >}} + +## Tooltip options + +{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="" >}} diff --git a/docs/sources/shared/visualizations/tooltip-mode.md b/docs/sources/shared/visualizations/tooltip-mode.md deleted file mode 100644 index 75c2c4d2358..00000000000 --- a/docs/sources/shared/visualizations/tooltip-mode.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Tooltip mode ---- - -### Tooltip mode - -When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. - -- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. -- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. -- **Hidden -** Do not display the tooltip when you interact with the visualization. - -Use an override to hide individual series from the tooltip. diff --git a/docs/sources/shared/visualizations/tooltip-options-1.md b/docs/sources/shared/visualizations/tooltip-options-1.md new file mode 100644 index 00000000000..1ff0a90c821 --- /dev/null +++ b/docs/sources/shared/visualizations/tooltip-options-1.md @@ -0,0 +1,31 @@ +--- +title: Tooltip mode +comments: | + There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. + Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. + This file is used in the following visualizations: bar chart, pie chart, state timeline, status history +--- + +Tooltip options control the information overlay that appears when you hover over data points in the visualization. + +### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +### Values sort order + +When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following: + +- **None** - Grafana automatically sorts the values displayed in a tooltip. +- **Ascending** - Values in the tooltip are listed from smallest to largest. +- **Descending** - Values in the tooltip are listed from largest to smallest. + +### Max height + +Set the maximum height of the tooltip box. The default is 600 pixels. diff --git a/docs/sources/shared/visualizations/tooltip-options-2.md b/docs/sources/shared/visualizations/tooltip-options-2.md new file mode 100644 index 00000000000..2a5d35e2bd0 --- /dev/null +++ b/docs/sources/shared/visualizations/tooltip-options-2.md @@ -0,0 +1,37 @@ +--- +title: Tooltip options +comments: | + There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. + Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. + This file is used in the following visualizations: candlestick, time series, trend +--- + +Tooltip options control the information overlay that appears when you hover over data points in the visualization. + +### Tooltip mode + +When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. + +- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden -** Do not display the tooltip when you interact with the visualization. + +Use an override to hide individual series from the tooltip. + +### Values sort order + +When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following: + +- **None** - Grafana automatically sorts the values displayed in a tooltip. +- **Ascending** - Values in the tooltip are listed from smallest to largest. +- **Descending** - Values in the tooltip are listed from largest to smallest. + +### Hover proximity + +Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. + +![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif) + +### Max height + +Set the maximum height of the tooltip box. The default is 600 pixels.