moves legend to visualizations, adds links (#53486)

docs/sources/visualizations/bar-chart.md

@@ -21,7 +21,7 @@ This panel visualization allows you to graph categorical data.
 
 ## Supported data formats
 
-Only one data frame is supported and it needs to have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.
+Only one data frame is supported and it must have at least one string field that will be used as the category for an X or Y axis and one or more numerical fields.
 
 Example:
 
@@ -107,6 +107,8 @@ Gradient color is generated based on the hue of the line color.
 
 Choose which of the [standard calculations]({{< relref "../panels/calculation-types/" >}}) to show in the legend. You can have more than one.
 
+For more information about the legend, refer to [Configure a legend](../configure-legend/).
+
 ## Text size
 
 Enter a **Value** to change the size of the text on your bar chart.

docs/sources/visualizations/configure-legend/index.md

@@ -0,0 +1,76 @@
+---
+aliases:
+  - /docs/grafana/latest/panels/working-with-panels/configure-legend/
+  - /docs/sources/panels/working-with-panels/configure-legend/
+title: Configure a legend
+weight: 1300
+---
+
+# 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.
+
+## 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, which isolates the data you want to see. Grafana automatically creates a new override in the **Override** tab.
+
+When you apply your changes, the visualization changes appear to all users of the panel.
+
+1. Open the panel.
+
+1. In the legend, click the label of the series you want to isolate.
+
+   The system removes from view all other series data.
+
+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.
+
+1. To revert back to the default view that includes all data, click any series label twice.
+
+1. To save your changes so that they appear to all viewers of the panel, click **Apply**.
+
+This topic currently applies to the following visualizations:
+
+- [Bar chart]({{< relref "../../visualizations/bar-chart/" >}})
+- [Histogram]({{< relref "../../visualizations/histogram/" >}})
+- [Pie chart]({{< relref "../../visualizations/pie-chart-panel/" >}})
+- [State timeline]({{< relref "../../visualizations/state-timeline/" >}})
+- [Status history]({{< relref "../../visualizations/status-history/" >}})
+- [Time series]({{< relref "../../visualizations/time-series/" >}})
+
+## Add values to a legend
+
+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.
+
+1. Edit a panel.
+
+1. In the panel display options pane, locate the **Legend** section.
+
+1. In the **Legend values** field, select the values you want to appear in the legend.
+
+1. Click **Apply** to save your changes are navigate back to the dashboard.
+
+![Toggle series visibility](/static/img/docs/legend/legend-series-toggle-7-5.png)
+
+## Change a series color
+
+By default, Grafana specifies the color of your series data, which you can change.
+
+1. Edit a panel.
+
+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.
+
+![Change legend series color](/static/img/docs/legend/legend-series-color-7-5.png)
+
+## Sort series
+
+You can change legend mode to **Table** and choose [calculations]({{< relref "../../panels/calculation-types/" >}}) 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.
+
+The sort order affects the positions of the bars in the Bar chart panel as well as the order of stacked series in the Time series and Bar chart panels.
+
+> **Note:** This feature is only supported in these panels: Bar chart, Histogram, Time series, XY Chart.
+
+![Sort legend series](/static/img/docs/legend/legend-series-sort-8-3.png).

docs/sources/visualizations/pie-chart-panel.md

@@ -80,5 +80,7 @@ The following example shows a pie chart with **Name** and **Percent** labels dis
 
 Select values to display in the legend. You can select more than one.
 
-**Percent -** The percentage of the whole.
-**Value -** The raw numerical value.
+- **Percent:** The percentage of the whole.
+- **Value:** The raw numerical value.
+
+For more information about the legend, refer to [Configure a legend](../configure-legend/).

docs/sources/visualizations/time-series/_index.md

@@ -33,6 +33,8 @@ These options are available whether you are graphing your time series as lines,
 
 Choose which of the [standard calculations]({{< relref "../../panels/calculation-types/" >}}) to show in the legend. You can have more than one.
 
+For more information about the legend, refer to [Configure a legend](../configure-legend/).
+
 ## Graph styles
 
 Use these options to choose how to display your time series data.