diff --git a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md index a1b697d8f2c..82cb58c7a2f 100644 --- a/docs/sources/panels-visualizations/visualizations/bar-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/bar-chart/index.md @@ -129,15 +129,11 @@ 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="" >}} +{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="" >}} -{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +## Legend options -### Legend calculations - -Choose which of the [standard calculations][] to show in the legend. You can have more than one. - -For more information about the legend, refer to [Configure a legend](../configure-legend/). +{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} ## Text size @@ -198,12 +194,12 @@ You can set standard min/max options to define hard limits of the Y-axis. For mo {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[Add a field override]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" -[Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" +[Add a field override]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" +[Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides#add-a-field-override" -[standard calculations]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" +[standard calculations]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [standard calculations]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" -[Standard options definitions]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" -[Standard options definitions]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" +[Standard options definitions]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" +[Standard options definitions]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#max" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/candlestick/index.md b/docs/sources/panels-visualizations/visualizations/candlestick/index.md index 00eb2919789..3d66521dfad 100644 --- a/docs/sources/panels-visualizations/visualizations/candlestick/index.md +++ b/docs/sources/panels-visualizations/visualizations/candlestick/index.md @@ -114,11 +114,13 @@ If your data can't be mapped to these dimensions for some reason (for example, b 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][time series visualization] visualization. +{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} + ## Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[time series visualization]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" -[time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/visualizations/time-series" +[time series visualization]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" +[time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/heatmap/index.md b/docs/sources/panels-visualizations/visualizations/heatmap/index.md index 41a5fafb51c..cad116b07d3 100644 --- a/docs/sources/panels-visualizations/visualizations/heatmap/index.md +++ b/docs/sources/panels-visualizations/visualizations/heatmap/index.md @@ -119,7 +119,7 @@ This setting configures the axis value. When selected, the axis appears in reverse order. -{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} +{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} ## Colors @@ -158,13 +158,13 @@ Use these settings to refine your visualization. ### Legend -Choose whether you want to display the heatmap legend on the visualization. +Choose whether you want to display the heatmap legend on the visualization by toggling the **Show legend** switch. ### Exemplars Set the color used to show exemplar data. {{% docs/reference %}} -[Introduction to histograms and heatmaps]: "/docs/grafana/ -> /docs/grafana//fundamentals/intro-histograms" -[Introduction to histograms and heatmaps]: "/docs/grafana-cloud/ -> /docs/grafana//fundamentals/intro-histograms" +[Introduction to histograms and heatmaps]: "/docs/grafana/ -> /docs/grafana//fundamentals/intro-histograms" +[Introduction to histograms and heatmaps]: "/docs/grafana-cloud/ -> /docs/grafana//fundamentals/intro-histograms" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/histogram/index.md b/docs/sources/panels-visualizations/visualizations/histogram/index.md index bfe8f70bddb..4e9975939a2 100644 --- a/docs/sources/panels-visualizations/visualizations/histogram/index.md +++ b/docs/sources/panels-visualizations/visualizations/histogram/index.md @@ -123,20 +123,18 @@ Transparency of the gradient is calculated based on the values on the Y-axis. Th Gradient color is generated based on the hue of the line color. -{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="" >}} +## Legend options -### Legend calculations - -Choose a [standard calculations][] to show in the legend. You can select more than one. +{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} ## Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" -[color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[color scheme]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#color-scheme" -[standard calculations]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" +[standard calculations]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [standard calculations]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md index a02dd7d23e5..d12ae75908c 100644 --- a/docs/sources/panels-visualizations/visualizations/pie-chart/index.md +++ b/docs/sources/panels-visualizations/visualizations/pie-chart/index.md @@ -86,25 +86,29 @@ The following example shows a pie chart with **Name** and **Percent** labels dis Use these settings to define how the legend appears in your visualization. For more information about the legend, refer to [Configure a legend]({{< relref "../../configure-legend" >}}). -### Legend visibility +### Visibility -Use the **Visibility** switch to show or hide the legend. +Toggle the switch to turn the legend on or off. -### Legend mode +### Mode -Set the display mode of the legend: +Use these settings to define how the legend appears in your visualization. - **List -** Displays the legend as a list. This is a default display mode of the legend. - **Table -** Displays the legend as a table. -### Legend placement +### Placement Choose where to display the legend. - **Bottom -** Below the graph. - **Right -** To the right of the graph. -### Legend values +#### Width + +Control how wide the legend is when placed on the right side of the visualization. This option is only displayed if you set the legend placement to **Right**. + +### Values Select values to display in the legend. You can select more than one. @@ -116,6 +120,6 @@ Select values to display in the legend. You can select more than one. {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" +[Calculation types]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [Calculation types]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md index e371b076da3..13615eda6d2 100644 --- a/docs/sources/panels-visualizations/visualizations/state-timeline/index.md +++ b/docs/sources/panels-visualizations/visualizations/state-timeline/index.md @@ -114,9 +114,9 @@ Controls line width of state regions. Controls the opacity of state regions. -{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="" >}} -{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="" >}} ## Value mappings @@ -132,18 +132,13 @@ The visualization can be used with time series data as well. In this case, the t ## Legend options -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][] 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-options-2.md" source="grafana" version="" >}} ## Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" -[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" - -[Value mappings]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-value-mappings" -[Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-value-mappings" +[Value mappings]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-value-mappings" +[Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-value-mappings" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/status-history/index.md b/docs/sources/panels-visualizations/visualizations/status-history/index.md index fec89567017..1fe037a2b7b 100644 --- a/docs/sources/panels-visualizations/visualizations/status-history/index.md +++ b/docs/sources/panels-visualizations/visualizations/status-history/index.md @@ -112,18 +112,13 @@ To assign colors to boolean or string values, use the [Value mappings][]. ## Legend options -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][] 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-options-2.md" source="grafana" version="" >}} ## Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[Value mappings]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-value-mappings" -[Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-value-mappings" - -[Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" -[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[Value mappings]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-value-mappings" +[Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-value-mappings" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/time-series/index.md b/docs/sources/panels-visualizations/visualizations/time-series/index.md index 013b219d3f4..de0bce4bb8f 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/docs/sources/panels-visualizations/visualizations/time-series/index.md @@ -58,9 +58,7 @@ Tooltip options control the information overlay that appears when you hover over ## 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="" >}} +{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} ## Graph styles @@ -143,9 +141,9 @@ Set the style of the line. To change the color, use the standard [color scheme][ ![Line styles examples](/static/img/docs/time-series-panel/line-styles-examples-v9.png) -{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/connect-null-values.md" source="grafana" version="" >}} -{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="" >}} +{{< docs/shared lookup="visualizations/disconnect-values.md" source="grafana" version="" >}} ### Stack series @@ -262,7 +260,7 @@ Use this option to transform the series values without affecting the values show The transform option is only available as an override. {{% /admonition %}} -{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} +{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="" leveloffset="+2" >}} ## Color options @@ -310,18 +308,18 @@ The following image shows a bar chart with the **Green-Yellow-Red (by value)** c {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" -[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[Color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#color-scheme" -[Add a field override]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" -[Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" +[Add a field override]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides#add-a-field-override" +[Add a field override]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides#add-a-field-override" -[Configure standard options]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" -[Configure standard options]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" +[Configure standard options]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#max" +[Configure standard options]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#max" -[color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" -[color scheme]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[color scheme]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options#color-scheme" -[Configure field overrides]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides" -[Configure field overrides]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/configure-overrides" +[Configure field overrides]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-overrides" +[Configure field overrides]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides" {{% /docs/reference %}} diff --git a/docs/sources/panels-visualizations/visualizations/trend/index.md b/docs/sources/panels-visualizations/visualizations/trend/index.md index 9e2b4ebb52d..ca595f5e754 100644 --- a/docs/sources/panels-visualizations/visualizations/trend/index.md +++ b/docs/sources/panels-visualizations/visualizations/trend/index.md @@ -38,11 +38,15 @@ For example, you could represent engine power and torque versus speed where spee {{< figure src="/media/docs/grafana/screenshot-grafana-10-0-trend-panel-new-colors.png" max-width="750px" caption="Trend engine power and torque curves" >}} +## Legend options + +{{< docs/shared lookup="visualizations/legend-options-1.md" source="grafana" version="" >}} + ## Value mappings {{< docs/shared lookup="visualizations/value-mappings-options.md" source="grafana" version="" >}} {{% docs/reference %}} -[Time series visualization]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" -[Time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/visualizations/time-series" +[Time series visualization]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" +[Time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series" {{% /docs/reference %}} diff --git a/docs/sources/shared/visualizations/legend-mode.md b/docs/sources/shared/visualizations/legend-mode.md deleted file mode 100644 index df8d1a50ec2..00000000000 --- a/docs/sources/shared/visualizations/legend-mode.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Legend mode and legend placement ---- - -### Legend mode - -Use these settings to define how the legend appears in your visualization. For more information about the legend, refer to [Configure a legend](../configure-legend/). - -- **List -** Displays the legend as a list. This is a default display mode of the legend. -- **Table -** Displays the legend as a table. -- **Hidden -** Hides the legend. - -### Legend placement - -Choose where to display the legend. - -- **Bottom -** Below the graph. -- **Right -** To the right of the graph. - -### Legend values - -Choose which of the [standard calculations]({{< relref "../../panels-visualizations/query-transform-data/calculation-types/" >}}) to show in the legend. You can have more than one. diff --git a/docs/sources/shared/visualizations/legend-options-1.md b/docs/sources/shared/visualizations/legend-options-1.md new file mode 100644 index 00000000000..8c101980d70 --- /dev/null +++ b/docs/sources/shared/visualizations/legend-options-1.md @@ -0,0 +1,35 @@ +--- +title: Legend options +comments: | + There are two legend shared files 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, candlestick, histogram, time series, trend, xy chart +--- + +Legend options control the series names and statistics that appear under or to the right of the graph. For more information about the legend, refer to [Configure a legend](../configure-legend/). + +### Visibility + +Toggle the switch to turn the legend on or off. + +### Mode + +Use these settings to define how the legend appears in your visualization. + +- **List -** Displays the legend as a list. This is a default display mode of the legend. +- **Table -** Displays the legend as a table. + +### Placement + +Choose where to display the legend. + +- **Bottom -** Below the graph. +- **Right -** To the right of the graph. + +#### Width + +Control how wide the legend is when placed on the right side of the visualization. This option is only displayed if you set the legend placement to **Right**. + +### Values + +Choose which of the [standard calculations](../../query-transform-data/calculation-types/) to show in the legend. You can have more than one. diff --git a/docs/sources/shared/visualizations/legend-options-2.md b/docs/sources/shared/visualizations/legend-options-2.md new file mode 100644 index 00000000000..9abfe0adfc7 --- /dev/null +++ b/docs/sources/shared/visualizations/legend-options-2.md @@ -0,0 +1,33 @@ +--- +title: Legend mode and legend placement +comments: | + There are two legend shared files 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: state timeline, status history +--- + +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](../../configure-standard-options#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**. + +For more information about the legend, refer to [Configure a legend](../configure-legend/). + +### Visibility + +Toggle the switch to turn the legend on or off. + +### Mode + +Use these settings to define how the legend appears in your visualization. + +- **List -** Displays the legend as a list. This is a default display mode of the legend. +- **Table -** Displays the legend as a table. + +### Placement + +Choose where to display the legend. + +- **Bottom -** Below the graph. +- **Right -** To the right of the graph. + +#### Width + +Control how wide the legend is when placed on the right side of the visualization. This option is only displayed if you set the legend placement to **Right**.