Specifying series colors for charts

1 Answer 59 Views
Chart
Tom
Top achievements
Rank 1
Iron
Tom asked on 08 Sep 2023, 10:15 AM

I have a chart with the following definition:

@(Html.Kendo().Chart<ChartViewModel>()

.Name("MyChart") .DataSource(d => d .WebApi() .Read(r => r.Action("GetData", "api/Chart").Data("MyChartData")) .Group(g => g.Add(n => n.Group)) ) .Legend(l => l.Position(ChartLegendPosition.Bottom).Labels(n => n.Template("#=series._groupValue#"))) .Series(s => s.Column(n => n.Value, n => n.Colour).Stack(true)) .CategoryAxis(c => c.Categories(n => n.Category)) .ValueAxis(a => a.Numeric()) .Tooltip(t => t.Visible(true).Template("#=value# - #= category #")) )

Note in particular the series definition; I can control the color of individual data points in the chart. This is great.

...but the groups displayed in the legend doesn't take on these colors

I know that I can add the following line to control the group colors:

.SeriesColors(new string[] { "#color1", "#color2", "etc..." })

...but this doesn't guarantee that any particular group will get a specific color. I know in advance what the groups will be, and what colors I want each one to have. ...this seems like a very obvious and simple requirement, but the chart definition doesn't appear to support this for some reason? How do I achieve this?

1 Answer, 1 is accepted

Sort by
0
Tom
Top achievements
Rank 1
Iron
answered on 08 Sep 2023, 11:55 AM
Nevermind, found a way to achieve this by binding the following function to the databound event:

function MyChartDataBound() {
    var chart = $("#MyChart").data("kendoChart");
    for (var i = 0; i < chart.options.series.length; i++) {
        chart.options.series[i].color = chart.options.series[i].data[0].Colour;
    }
}
...I just take the color value from the first item in each series and set the series color using that.
Tags
Chart
Asked by
Tom
Top achievements
Rank 1
Iron
Answers by
Tom
Top achievements
Rank 1
Iron
Share this question
or