Skip to main content Skip to footer

Reverse Legend Items in C1Chart

ComponentOne Chart for Silverlight lets us transform our data and add professional-grade charts to Silverlight apps. Among its many key features we have Stacked Charts and Chart Legends. Stacking charts offer a simplified approach for representing complex data and C1ChartLegend may be used to connect to the chart through one property. This design provides maximum flexibility when styling and positioning the legend. Here's a screenshot of a simple stacked chart with ChartLegend: Looks fine, like any other chart. Now, lets have a closer look and check out the order of legend items with respect to the chart. Its in reverse order. Now, lets check out the online demo for Silverlight C1Chart . The order of legend items matches the chart correctly. Now, lets change the ChartType to "ColumnStacked" as shown in the image below: Observe - the legend doesn't get updated. Now, this is not a bug; however, it doesn't look quite appropriate. I created a test sample with the following XAML:


<c1:C1Chart ChartType="ColumnStacked" Name="c1Chart1">  
 <c1:C1Chart.Data>  
  <c1:ChartData ItemNames="P1 P2 P3 P4 P5">  
   <c1:DataSeries Label="s1" Values="20, 22, 19, 24, 25" />  
   <c1:DataSeries Label="s2" Values="8, 12, 10, 12, 15" />  
  </c1:ChartData>  
 </c1:C1Chart.Data>  
<c1:C1ChartLegend />  
</c1:C1Chart>  

And the behavior could be observed here as well; as shown in first screenshot above. To display the Legends in the correct order, all we need are a couple of steps to perform:

  • Subscribe to PlotElementLoaded event of DataSeries.
  • Reverse the order of items in LegendItems collection; and set it as the ItemsSource of C1Chart's Legend.

 var ds = c1Chart1.Data.Children[0] as C1.Silverlight.Chart.DataSeries;  
 ds.PlotElementLoaded += (s, e) =>  
 {  
  var legend = c1Chart1.Children[0] as C1.Silverlight.Chart.C1ChartLegend;  
  if (legend != null)  
   legend.ItemsSource = c1Chart1.LegendItems.Reverse();  
 };  

And this is how C1Chart with LegendItems in correct order looks like: Download C# Sample Download Vb.Net Sample

MESCIUS inc.

comments powered by Disqus