mirror of
https://github.com/grafana/grafana.git
synced 2026-07-30 00:08:10 -05:00
Docs: Restructure and improve Configure legend page (#79031)
* Added all UI options * Added intro text under legend options * Restructured page Added supported visualizations section Added links to docs reference shortcode and updated cloud links * Removed internal note and added missing image * Updated images and alte text * Added second version of an image and added note to self * Copy edits * Added to do notes * Fixed spelling * Changed bullet list to be capitalized and updated links references * Removed reference to measurement type * Uploaded images to media folder, updated image links, and removed local images --------- Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Isabel
nmarrs
@@ -14,92 +14,141 @@ weight: 70
|
||||
|
||||
# Configure a legend
|
||||
|
||||
A panel includes a legend that you can use to interpret data displayed in a visualization. Each legend option adds context and clarity to the data illustrated in a visualization.
|
||||
A panel includes a legend that you can use to identify and interpret data displayed in a visualization. Each legend option adds context and clarity to the data illustrated in a visualization.
|
||||
|
||||
## Isolate series data in a visualization
|
||||
## Supported visualizations
|
||||
|
||||
Visualizations can often be visually complex, and include many data series. You can simplify the view by removing series data from the visualization, which isolates the data you want to see. Grafana automatically creates a new override in the **Override** tab.
|
||||
Legends are supported for the following visualizations:
|
||||
|
||||
When you apply your changes, the visualization changes appear to all users of the panel.
|
||||
- [Bar chart][bar chart]
|
||||
- [Candlestick][candlestick]
|
||||
- [Histogram][histogram]
|
||||
- [Pie chart][pie chart]
|
||||
- [State timeline][state timeline]
|
||||
- [Status history][status history]
|
||||
- [Time series][time series]
|
||||
- [Trend][trend]
|
||||
<!-- - xy chart -->
|
||||
|
||||
1. Open the panel.
|
||||
[Geomaps][] and [heatmaps][] also have legends, but they only provide the the choice to display or not display a legend and don't support other legend options.
|
||||
|
||||
1. In the legend, click the label of the series you want to isolate.
|
||||
## Legend options
|
||||
|
||||
The system removes from view all other series data.
|
||||
You can find the following options under the **Legend** section in the panel edit pane.
|
||||
|
||||
1. To incrementally add series data to an isolated series, press the **Ctrl** or **Command** key and click the label of the series you want to add.
|
||||
{{% admonition type="note" %}}
|
||||
Not all of the options listed apply to all visualizations with legends.
|
||||
{{% /admonition %}}
|
||||
|
||||
1. To revert back to the default view that includes all data, click any series label twice.
|
||||
### Visibility
|
||||
|
||||
1. To save your changes so that they appear to all viewers of the panel, click **Apply**.
|
||||
Set whether the legend is displayed or not. Use the switch to toggle a legend on or off.
|
||||
|
||||
This topic currently applies to the following visualizations:
|
||||
### Mode
|
||||
|
||||
- [Bar chart][]
|
||||
- [Histogram][]
|
||||
- [Pie chart][]
|
||||
- [State timeline][]
|
||||
- [Status history][]
|
||||
- [Time series][]
|
||||
Set the format in which the legend is displayed. Choose from:
|
||||
|
||||
## Add values to a legend
|
||||
- **List**
|
||||
- **Table**
|
||||
|
||||
As way to add more context to a visualization, you can add series data values to a legend. You can add as many values as you'd like; after you apply your changes, you can horizontally scroll the legend to see all values.
|
||||
When you format a legend as a table, other information about the legend, such as associated [values](#values) or where it's located in the visualization, might be displayed as well.
|
||||
|
||||
1. Edit a panel.
|
||||
### Placement
|
||||
|
||||
1. In the panel display options pane, locate the **Legend** section.
|
||||
Set where on the visualization a legend is displayed. Choose from:
|
||||
|
||||
1. In the **Legend values** field, select the values you want to appear in the legend.
|
||||
- **Bottom**
|
||||
- **Right**
|
||||
|
||||
1. Click **Apply** to save your changes are navigate back to the dashboard.
|
||||
### Width
|
||||
|
||||
|
||||
If you set the legend placement to **Right**, the **Width** option becomes available. Leave the field empty to allow Grafana to automatically set the legend width or enter a value in the field.
|
||||
|
||||
### Values
|
||||
|
||||
You can add more context to a visualization by adding series data values or [calculations][] to a legend. You can add as many values as you'd like. After you apply your changes, you can scroll the legend to see all values.
|
||||
|
||||
|
||||
|
||||
## Change a series color
|
||||
|
||||
By default, Grafana specifies the color of your series data, which you can change.
|
||||
|
||||
1. Edit a panel.
|
||||
By default, Grafana sets the colors of your series data, but you can change them through the panel legend. To change the series data color, follow these steps:
|
||||
|
||||
1. Navigate to the panel you want to update.
|
||||
1. In the legend, click the color bar associated with the series.
|
||||
|
||||
1. Select a pre-set color or a custom color from the color palette.
|
||||
|
||||
1. Click **Apply** to save your changes are navigate back to the dashboard.
|
||||
1. Select a pre-set color in the **Colors** tab or set a custom color in the **Custom** tab, using the picker or RGB values.
|
||||
1. Save the dashboard.
|
||||
|
||||
|
||||
|
||||
## Isolate series data in a visualization
|
||||
|
||||
Visualizations can often be visually complex, and include many data series. You can simplify the view by removing series data from the visualization through the legend, which isolates the data you want to see. When you do this, Grafana automatically creates a new override in the **Override** section.
|
||||
|
||||
To isolate a series, follow these steps:
|
||||
|
||||
1. Navigate to the panel you want to update.
|
||||
1. In the legend, click the label of the series you want to isolate.
|
||||
|
||||
The system removes all other series data from view.
|
||||
|
||||
1. To incrementally add series data back to an isolated series, press the **Ctrl** or **Command** key and click the label of the series you want to add.
|
||||
1. To save your changes so that they appear to all viewers of the panel, save the dashboard.
|
||||
|
||||
To revert back to the default view that includes all data, click any series label twice.
|
||||
|
||||
## Sort series
|
||||
|
||||
You can change legend mode to **Table** and choose [calculations][] to be displayed in the legend. Click the calculation name header in the legend table to sort the values in the table in ascending or descending order.
|
||||
When you format a legend as a table and add values to it, you can sort series in the table by those values. To do so, follow these steps:
|
||||
|
||||
1. Navigate to the panel you want to update.
|
||||
1. Hover over any part of the panel you want to work on to display the menu on the top right corner.
|
||||
1. Click the menu and select **Edit**.
|
||||
1. Scroll to the **Legend** section of the panel edit pane.
|
||||
1. Under **Mode**, select **Table**.
|
||||
1. Under **Values**, select the value or calculation that you want to show.
|
||||
|
||||
The legend table now displays values.
|
||||
|
||||
1. Click the calculation name header in the legend table to sort the values in the table in ascending or descending order.
|
||||
|
||||
|
||||
|
||||
{{% admonition type="note" %}}
|
||||
This feature is only supported in these panels: Bar chart, Histogram, Time series.
|
||||
This feature is only supported for the following visualizations: bar chart, histogram, time series.
|
||||
{{% /admonition %}}
|
||||
|
||||
.
|
||||
|
||||
{{% docs/reference %}}
|
||||
[Bar chart]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-chart"
|
||||
[Bar chart]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-chart"
|
||||
[bar chart]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/bar-chart"
|
||||
[bar chart]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-chart"
|
||||
|
||||
[State timeline]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/state-timeline"
|
||||
[State timeline]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/state-timeline"
|
||||
[state timeline]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/state-timeline"
|
||||
[state timeline]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/state-timeline"
|
||||
|
||||
[Time series]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
[Time series]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
[time series]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
|
||||
[time series]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series"
|
||||
|
||||
[calculations]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/query-transform-data/calculation-types"
|
||||
[calculations]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types"
|
||||
|
||||
[Pie chart]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/pie-chart"
|
||||
[Pie chart]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/pie-chart"
|
||||
[pie chart]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/pie-chart"
|
||||
[pie chart]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/pie-chart"
|
||||
|
||||
[Status history]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/status-history"
|
||||
[Status history]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/status-history"
|
||||
[status history]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/status-history"
|
||||
[status history]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/status-history"
|
||||
|
||||
[Histogram]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/histogram"
|
||||
[Histogram]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/histogram"
|
||||
[histogram]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/histogram"
|
||||
[histogram]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/histogram"
|
||||
|
||||
[candlestick]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/candlestick"
|
||||
[candlestick]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/candlestick"
|
||||
|
||||
[trend]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/trend"
|
||||
[trend]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/trend"
|
||||
|
||||
[geomaps]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/geomap"
|
||||
[geomaps]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/geomap"
|
||||
|
||||
[heatmaps]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/heatmap"
|
||||
[heatmaps]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap"
|
||||
{{% /docs/reference %}}
|
||||
|
||||
Reference in New Issue
Block a user