[v11.0.x] Docs: add legends shared content (#87152)

Docs: add legends shared content (#86814)

* Updated shared file name and added missing options

* Added legend options 1 shared file to relevant visualizations

* Updated shared file name and corrected options

* Added legend options 2 shared file to relevant visualizations

* Updated legend content for heatmap and pie chart

* Added where shared legend files are used in each file

* Moved intro text out of viz pages into legend options shared files

* Added reasoning to front matter of shared files

* Added reasoning to front matter of shared files

* Fixed version interpolation and added cloud links

* Updated links in shared files

(cherry picked from commit dad3069594)

Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

docs/sources/panels-visualizations/visualizations/pie-chart/index.md

@@ -88,25 +88,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.
 
@@ -118,6 +122,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="<GRAFANA_VERSION>" >}}
 
 {{% docs/reference %}}
-[Calculation types]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/query-transform-data/calculation-types"
+[Calculation types]: "/docs/grafana/ -> /docs/grafana/<GRAFANA_VERSION>/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 %}}