This is a migrated thread and some comments may be shown as answers.

Stacked Bar Chart Legend

1 Answer 586 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 03 Dec 2020, 02:33 AM
I am trying to build a stacked bar chart with a cumulative total split to two values per bar, with the data source coming from multiple items that the cumulative counts are derived. My problem is the legend shows the multiple items and the stack breaks out into multiple color sections rather than the two desired, yet I am not able to locate where this is happening in the code. I used the Stacked Bar Chart demo example to create the chart. Can anyone provide their thoughts or suggestions?

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 03 Dec 2020, 07:16 AM

Hello Chris,

The chart legend shows all the series that the chart has. Stacking several series on top of one another still keeps them as separate series and so they should show up in the legend.

If you don't want many series, you can aggregate the chart data yourself and avoid using stacked series but reduce the series count to the count of the stacks you want and put all the data into one series per stack.

Another approach is to hide some series from the legend by setting their VisibleInLegend parameter to false. Here's a basic example of that:

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
            <ChartSeriesStack Enabled="true"></ChartSeriesStack>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data" 
VisibleInLegend="false"> </ChartSeries> <ChartSeries Type="ChartSeriesType.Column" Name="Product 3" Data="@series3Data"> </ChartSeries> </ChartSeriesItems> <ChartCategoryAxes> <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis> </ChartCategoryAxes> <ChartTitle Text="Quarterly revenue per product"></ChartTitle> <ChartLegend Position="ChartLegendPosition.Right"> </ChartLegend> </TelerikChart> @code { public List<object> series1Data = new List<object>() { 10, 2, 5, 6 }; public List<object> series2Data = new List<object>() { 5, 8, 2, 7 }; public List<object> series3Data = new List<object>() { 15, 3, 8, 8 }; public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; }

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Charts
Asked by
Chris
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or