Time series/Bar chart panel: Add ability to sort series via legend (#40226)

* Make legend sorting work in Time series panel

* Import from schema

Add properties to the cue schema as well

* Order stacking

* Add tests for orderIdsByCalcs

* Add check for legend options

* Fix cue schema

* UI fixes

* Order bars as well in barchart

* Use different index when ordered

* Legend sort series doc

* Fix nits

* Update docs/sources/panels/legend-options.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Fix linting

* Apply suggestions from code review

Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

* Update docs/sources/panels/legend-options.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: Ursula Kallio <73951760+osg-grafana@users.noreply.github.com>

docs/sources/panels/legend-options.md

@@ -10,8 +10,13 @@ Use the legend to adjust how a visualization displays series. This legend functi
 
 This topic currently applies to the following visualizations:
 
+- [Bar chart panel]({{< relref "../visualizations/bar-chart.md">}})
+- [Histogram panel]({{< relref "../visualizations/histogram.md">}})
 - [Pie chart panel]({{< relref "../visualizations/pie-chart-panel.md">}})
+- [State timeline panel]({{< relref "../visualizations/state-timeline.md">}})
+- [Status history panel]({{< relref "../visualizations/status-history.md">}})
 - [Time series panel]({{< relref "../visualizations/time-series/_index.md" >}})
+- XY chart panel
 
 ## Toggle series
 
@@ -34,3 +39,12 @@ This creates a system override that hides the other series. You can view this ov
 Click on the series icon (colored line beside the series label) in the legend to change selected series color.
 
 ![Change legend series color](/static/img/docs/legend/legend-series-color-7-5.png)
+
+## Sort series
+
+Change legend mode to **Table** and choose [calculations]({{< relref "./calculations-list.md" >}}) 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)