[release-11.3.6] Docs: histogram visualization refactor (#102921)

Docs: histogram visualization refactor (#102832)

* Added Config options heading and bumped other heading levels

* Restructured Histogram options and fixed tooltip options level

* Created tooltip 3 shared file and updated tooltip 1 file

* Replaced shared file in 3 visualizations

* Wording fix

* Fixed wording

(cherry picked from commit 383e38d87b)

docs/sources/panels-visualizations/visualizations/histogram/index.md

@@ -46,7 +46,7 @@ You can use a histogram visualization if you need to:
 
 ## Configure a histogram visualization
 
-Once you’ve created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure a histogram visualization:
+After you've created a [dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/), the following video shows you how to configure a histogram visualization:
 
 {{< youtube id="QfJ480j9-KM" >}}
 
@@ -92,47 +92,42 @@ The data is converted as follows:
 
 {{< figure src="/static/img/docs/histogram-panel/histogram-example-height-weight.png" max-width="1025px" alt="A histogram visualization showing the male height and weight distribution" >}}
 
-## Panel options
+## Configuration options
 
-{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="<GRAFANA_VERSION>" >}}
-
-## Histogram options
-
-Use the following options to refine your histogram visualization.
-
-### Bucket count
 
-Specifies the number of bins used to group your data in the histogram, affecting the granularity of the displayed distribution. Leave this empty for automatic bucket count of 30.
+### Panel options
 
-### Bucket size
+{{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
-
-The size of the buckets. Leave this empty for automatic bucket sizing (~10% of the full range).
-
-### Bucket offset
-
-If the first bucket should not start at zero. A non-zero offset has the effect of shifting the aggregation window. For example, 5-sized buckets that are 0-5, 5-10, 10-15 with a default 0 offset would become 2-7, 7-12, 12-17 with an offset of 2; offsets of 0, 5, or 10, in this case, would effectively do nothing. Typically, this option would be used with an explicitly defined bucket size rather than automatic. For this setting to affect, the offset amount should be greater than 0 and less than the bucket size; values outside this range will have the same effect as values within this range.
 
-### Combine series
+### Histogram options
 
-This will merge all series and fields into a combined histogram.
+Use the following options to refine your histogram visualization.
 
-### Stacking
+<!-- prettier-ignore-start -->
 
-Controls how multiple series are displayed in the histogram. Choose from the following:
+| Option | Description |
+| ------ | ----------- |
+| Bucket count | Specifies the number of bins used to group your data in the histogram, affecting the granularity of the displayed distribution. Leave this empty for automatic bucket count of 30. |
+| Bucket size | The size of the buckets. Leave this empty for automatic bucket sizing (~10% of the full range). |
+| [Bucket offset](#bucket-offset) | If the first bucket should not start at zero. A non-zero offset has the effect of shifting the aggregation window. |
+| Combine series | This will merge all series and fields into a combined histogram. |
+| Stacking | Controls how multiple series are displayed in the histogram. Choose from the following:<ul><li>**Off** - Series are not stacked, but instead shown side by side.</li><li>**Normal** - Series are stacked on top of each other, showing cumulative values.</li><li>**100%** - Series are stacked to fill 100% of the chart, showing the relative proportion of each series.</li></ul> |
+| Line width | Controls line width of the bars. |
+| Fill opacity | Controls the fill opacity bars. |
+| [Gradient mode](#gradient-mode) | Set the mode of the gradient fill. Fill gradient is based on the line color. |
 
-- **Off** - Series are not stacked, but instead shown side by side.
+<!-- prettier-ignore-end -->
-- **Normal** - Series are stacked on top of each other, showing cumulative values.
-- **100%** - Series are stacked to fill 100% of the chart, showing the relative proportion of each series.
 
-### Line width
+#### Bucket offset
 
-Controls line width of the bars.
+If the first bucket should not start at zero, a non-zero offset has the effect of shifting the aggregation window.
 
-### Fill opacity
+For example, 5-sized buckets that are 0-5, 5-10, 10-15 with a default 0 offset would become 2-7, 7-12, 12-17 with an offset of 2; offsets of 0, 5, or 10, in this case, would effectively do nothing.
 
-Controls the fill opacity bars.
+Typically, this option would be used with an explicitly defined bucket size rather than automatic. For this setting to affect, the offset amount should be greater than 0 and less than the bucket size; values outside this range have the same effect as values within this range.
 
-### Gradient mode
+#### Gradient mode
 
 Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard [color scheme](ref:color-scheme) field option.
 
@@ -145,30 +140,30 @@ Choose from the following:
 - **Hue** - Gradient color is generated based on the hue of the line color.
 - **Scheme** - The selected [color palette](https://grafana.com/docs/grafana/latest/panels-visualizations/configure-standard-options/#color-scheme) is applied to the histogram bars.
 
-## Tooltip options
+### Tooltip options
 
-{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
 
-## Legend options
+### Legend options
 
 {{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-## Standard options
+### Standard options
 
 {{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-## Data links
+### Data links
 
 {{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-## Value mappings
+### Value mappings
 
 {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-## Thresholds
+### Thresholds
 
 {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
-## Field overrides
+### Field overrides
 
 {{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="<GRAFANA_VERSION>" >}}

docs/sources/panels-visualizations/visualizations/state-timeline/index.md

@@ -147,7 +147,7 @@ The **Page size** option lets you paginate the state timeline visualization to l
 
 ### Tooltip options
 
-{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
+{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+1" >}}
 
 ### Standard options
 

docs/sources/panels-visualizations/visualizations/status-history/index.md

@@ -129,7 +129,7 @@ Controls the opacity of state regions.
 
 ## Tooltip options
 
-{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+{{< docs/shared lookup="visualizations/tooltip-options-3.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
 ## Standard options
 

docs/sources/shared/visualizations/tooltip-options-1.md

@@ -3,7 +3,7 @@ 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: bar chart, histogram, pie chart, state timeline, status history
+  This file is used in the following visualizations: bar chart, pie chart
 ---
 
 Tooltip options control the information overlay that appears when you hover over data points in the visualization.

docs/sources/shared/visualizations/tooltip-options-3.md

@@ -0,0 +1,34 @@
+---
+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: histogram, state timeline, status history
+---
+
+Tooltip options control the information overlay that appears when you hover over data points in the visualization.
+
+| Option                                  | Description                                                                                                  |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| [Tooltip mode](#tooltip-mode)           | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. |
+| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip.                                      |
+| Max width                               | Set the maximum width of the tooltip box.                                                                    |
+| Max height                              | Set the maximum height of the tooltip box. The default is 600 pixels.                                        |
+
+### 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.