Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
585
Bar Chart Legend Reversed
posted

I am using xamWebChart v10.3 in a SL4 app. I have a horizontal bar chart with 2 series, let's call them A and B. I add B then A and I get a bar chart with A on top then B on the bottom (exactly what I want). The legend on the right side is ordered with Legend B on the top and Legend A on the bottom. This is confusing to my users and I have not found any way to change it. If I add the series in the reverse order both the bars and the legend are reversed.

How can I fix this?

  • 30692
    Offline posted

    You arrange the order by positioning the series in the series collection, which is why the order that you add them is significant, however the default orderings of these are working at cross purposes for your goal.

    The best way to get the effect you want, currently, is to manually manage the legend items. This way you can set the order however you want. Here is an example of how to approach this:

            <igChart:XamWebChart x:Name="chart">
                <igChart:XamWebChart.Legend>
                    <igChart:Legend Width="100" >
                        <igChart:Legend.Items>
                            <igChart:LegendItem Fill="Red" Text="Bar2" />
                            <igChart:LegendItem Fill="Blue" Text="Bar1" />
                        </igChart:Legend.Items>
                    </igChart:Legend>
                </igChart:XamWebChart.Legend>
                <igChart:XamWebChart.Series>
                    <igChart:Series x:Name="bar1" 
                                    ChartType="Bar" 
                                    Label="Bar1" 
                                    Fill="Blue">
                        <igChart:Series.DataPoints>
                            <igChart:DataPoint Label="A" Value="1" />
                            <igChart:DataPoint Label="B" Value="2" />
                            <igChart:DataPoint Label="C" Value="3" />
                        </igChart:Series.DataPoints>
                    </igChart:Series>
    
                    <igChart:Series x:Name="bar2" 
                                    ChartType="Bar" 
                                    Label="Bar2" 
                                    Fill="Red">
                        <igChart:Series.DataPoints>
                            <igChart:DataPoint Label="A" Value="3" />
                            <igChart:DataPoint Label="B" Value="2" />
                            <igChart:DataPoint Label="C" Value="1" />
                        </igChart:Series.DataPoints>
                    </igChart:Series>
                </igChart:XamWebChart.Series>
            </igChart:XamWebChart>
    

    Hope this helps!

    -Graham