From d6e7605148d1aec48bb1f563f2a78a646324ecc1 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Tue, 25 Mar 2025 15:55:53 -0400 Subject: [PATCH] [release-10.4.17] Docs: bar gauge visualization refactor (#102820) * Docs: bar gauge visualization refactor (#102747) * Added Config options heading and bumped heading levels * Added empty Text size options section and updated Value options * Updated bar gauge section * Added missing options and removed screenshot * Fixed Bar gauge options * Added descriptions for Text size section * Added links to text size section * Fixed text size section (cherry picked from commit 13058d27157aeb95e04fa98471797ec7442bbe81) * Fixed heading * Discard changes to package.json --- .../visualizations/bar-gauge/index.md | 141 ++++++------------ 1 file changed, 43 insertions(+), 98 deletions(-) diff --git a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md b/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md index 59111ee41a7..0f34edee4ae 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-gauge/index.md @@ -91,137 +91,82 @@ The bar gauge visualization also supports multiple records (rows) in the dataset By default, the visualization is configured to [calculate](#value-options) a single value per column or series and to display only the last set of data. However, it derives the minimum and maximum from the full dataset even if those values aren’t visible. In this example, that means only the last row of data is displayed in the gauges and the minimum and maximum values are defined as 2 and 20, pulled from the whole dataset. -If you want to show one gauge per cell you can change the [Show](#show) setting from [Calculate](#calculate) to [All values](#all-values) and each bar is labeled by concatenating the text column with each value's column name. +If you want to show one gauge per cell you can change the **Show** setting from **Calculate** to **All values** and each bar is labeled by concatenating the text column with each value's column name. ![Bar gauge with multiple rows of data displaying all the values](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.1-bargauge-example5.png) -## Panel options +For more information on these settings, refer to [Value options](#value-options). + +## Configuration options + +{{< docs/shared lookup="visualizations/config-options-intro.md" source="grafana" version="" >}} + +### Panel options {{< docs/shared lookup="visualizations/panel-options.md" source="grafana" version="" >}} -## Value options +### Value options Use the following options to refine how your visualization displays the value: -### Show + -Choose how Grafana displays your data. +| Option | Description | +| ------ | ----------- | +| Show | Set how Grafana displays your data. Choose from: | +| Calculation | If you chose **Calculate** as your **Show** option, select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types). | +| Limit | If you chose **All values** as your **Show** option, enter the maximum number of rows to display. The default is 5,000. | +| Fields | Select the fields display in the panel. | -#### Calculate + -Show a calculated value based on all rows. +### Bar gauge options -- **Calculation -** Select a reducer function that Grafana will use to reduce many fields to a single value. For a list of available calculations, refer to [Calculation types](ref:calculation-types). -- **Fields -** Select the fields display in the panel. +Adjust how the gauge is displayed. -#### All values + -Show a separate stat for every row. If you select this option, then you can also limit the number of rows to display. +| Option | Description | +| ------ | ----------- | +| Orientation | Choose a stacking direction: | +| Display mode | Choose a display mode: | +| Value display | Choose a value display mode: | +| Name placement | Set the name placement mode when the bar gauge orientation is **Auto** or **Horizontal**. Choose from:

When the bar gauge is in the vertical orientation, names are always placed at the bottom of each bar.

| +| Show unfilled area | Select if you want to render the unfilled region of the bars as dark gray. Not applicable to **Retro LCD** display mode. | +| Bar size | Choose a bar size mode: | +| Min width | Limit the minimum width of the bar column when the gauge is oriented vertically or is in **Auto** mode. Automatically shows the x-axis scroll bar when there's a large amount of data.

This option only applies when the **Bar size** mode is set to **Manual**.

| +| Min height | Limit the minimum height of the bar row when the bar gauge is oriented horizontally or is in **Auto** mode. Automatically shows the y-axis scroll bar when there's a large amount of data.

This option only applies when the **Bar size** mode is set to **Manual**.

| +| Max height | Limit the maximum height of the bar row when the bar gauge is oriented horizontally or is in **Auto** mode. Automatically shows the y-axis scroll bar when there's a large amount of data.

This option only applies when the **Bar size** mode is set to **Manual**.

| -- **Limit -** The maximum number of rows to display. Default is 5,000. -- **Fields -** Select the fields display in the panel. + -## Bar gauge options +### Legend options -Adjust how the bar gauge is displayed. +{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} -### Orientation +### Text size options -Choose a stacking direction. +Set the sizes of the following text elements in pixels: -- **Auto -** Grafana determines the best orientation. -- **Horizontal -** Bars stretch horizontally, left to right. -- **Vertical -** Bars stretch vertically, bottom to top. +- **Title** - Bar name +- **Value** - Bar value -### Display mode - -Choose a display mode. - -- **Gradient -** Threshold levels define a gradient. -- **Retro LCD -** The gauge is split into small cells that are lit or unlit. -- **Basic -** Single color based on the matching threshold. - -### Value display - -Choose a value display mode. - -- **Value color -** Value color is determined by value. -- **Text color -** Value color is default text color. -- **Hidden -** Values are hidden. - -### Name placement - -Choose a name placement mode. - -{{% admonition type="note" %}} -This option only applies when the orientation of the bar gauge is horizontal. When the bar gauge is in the vertical orientation, names are always placed at the bottom of each bar gauge. -{{% /admonition %}} - -- **Auto -** Grafana determines the best placement. -- **Top -** Names are placed on top of each bar gauge. -- **Left -** Names are placed to the left of each bar gauge. - -### Show unfilled area - -Select this if you want to render the unfilled region of the bars as dark gray. Not applicable to Retro LCD display mode. - -### Bar size - -Choose a bar size mode. - -- **Auto -** Grafana determines the best bar gauge size. -- **Manual -** Manually configure the bar gauge size. - -### Min width - -Limit the minimum width of the bar column when the gauge is oriented vertically. - -Automatically show x-axis scrollbar when there's a large amount of data. - -{{% admonition type="note" %}} -This option only applies when bar size is set to manual. -{{% /admonition %}} - -### Min height - -Limit the minimum height of the bar row when the gauge is oriented horizontally. - -Automatically show y-axis scrollbar when there's a large amount of data. - -{{% admonition type="note" %}} -This option only applies when bar size is set to manual. -{{% /admonition %}} - -### Max height - -Limit the maximum height of the bar row when the gauge is oriented horizontally. - -Automatically show y-axis scrollbar when there's a large amount of data. - -{{% admonition type="note" %}} -This option only applies when bar size is set to manual. -{{% /admonition %}} - -## Standard options +### Standard options {{< docs/shared lookup="visualizations/standard-options.md" source="grafana" version="" >}} -## Data links +### Data links {{< docs/shared lookup="visualizations/datalink-options.md" source="grafana" version="" >}} -## Value mappings +### Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} -## Thresholds +### Thresholds {{< docs/shared lookup="visualizations/thresholds-options-2.md" source="grafana" version="" >}} -Last, colors of the bar gauge thresholds can be configured as described above. - -![Bar gauge with colored thresholds configured](/media/docs/grafana/panels-visualizations/screenshot-grafana-12.1-bargauge-example6.png) - -## Field overrides +### Field overrides {{< docs/shared lookup="visualizations/overrides-options.md" source="grafana" version="" >}}