Chart color

[Thomas]

Hi,

Is it possible to have different color on each column in a column chart and also to have different color depending on the value.
For instance if a column can have values from 0 -100 and you would like to have one color on values from 0-25 and one between values 26-75 and so on..

[T. Tsonev]

Hi Thomas,

The chart supports different colors only for different series in bar/column charts. You can create series dynamically and set its color depending the value. 

A very simple example would be:

@{  var chart = Html.Telerik().Chart()
    .Name("chart")
    .CategoryAxis(axis => axis
        .Categories("Value")
    ).ToComponent();


    var Values = new int[] { 10, 20, 50, 100 };
    var factory = new Telerik.Web.Mvc.UI.Fluent.ChartSeriesFactory<object>(chart);
    
    foreach(var value in Values) {
        var color = "green";
        
        if (value > 25) {
            color = "blue";
        }
        
        if (value > 75) {
            color = "red";
        }
        
        factory.Column(new int[] { value }).Color(color);
    }


    chart.Render();
}

The category labels no longer match the columns, but that's the closest we can achieve now.

I hope this helps.

All the best,
Tsvetomir Tsonev
the Telerik team

[Joe Sugden]

We would be interested in different colors for the same series if only one series exists.

Thanks!

[T. Tsonev]

Hello,

This is on our to-do list. Hopefully, we'll have an implementation ready for the Q2 release.

Kind regards,
Tsvetomir Tsonev
the Telerik team

[Sam]

Does this also apply to pie charts?

[Ian]

Hi,
Will the Q2 release include the ability to change the colour of bars in the same series as discussed below?

regards, Ian

[T. Tsonev]

Hi,

This feature didn't make it for the beta, but we're working on it and it will be included in the official release.

More precisely, you'd be able to bind the color of each point by specifying a "colorField" option for the series.

Regards,
Tsvetomir Tsonev
the Telerik team

[Ian]

Hi Tsvetomir,
That's excellent news! Thanks for the update.

Best regards, Ian

[Ian]

Hi,
I see from the release notes that the feature to color indivdual bars was indeed included in the Q2 release (using the colorField property).

What I didn't mention in my earlier post was that I'm using the Kendo/MVC wrappers to generate charts but there doesn't seem to be any way of setting the colorField property from the Html.Kendo().Chart() helper. Is that correct?

Best regards, Ian

[T. Tsonev]

Hello,

The color field binding can be changed on individual series. Please see the Bar Charts - Local Data demo.

The Razor source code version includes this setting:
    .Series(series =>
    {
        series.Bar(model => model.Value, model => model.Color)
            .Name("United States")
            .Labels(labels => labels.Format("{0}%").Visible(true));
    })

All series overloads can be seen here: http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/ChartSeriesFactory

Greetings,
Tsvetomir Tsonev
the Telerik team

[Ian]

Hi Tsvetomir,
That's brilliant! Thanks for the documentation link as well.

Best regards, Ian

[Kriti]

Is it possible to have different color on each bar in a bar chart??

can we use stack for this? if then how?? please provide the code for it.