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

Chart color

11 Answers 369 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 15 Dec 2011, 10:26 AM
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..

11 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 15 Dec 2011, 06:16 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joe Sugden
Top achievements
Rank 1
answered on 24 Feb 2012, 02:56 PM
We would be interested in different colors for the same series if only one series exists.

Thanks!
0
T. Tsonev
Telerik team
answered on 28 Feb 2012, 08:36 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sam
Top achievements
Rank 1
answered on 07 Mar 2012, 03:17 PM
Does this also apply to pie charts?
0
Ian
Top achievements
Rank 1
answered on 23 Jun 2012, 05:52 PM
Hi,
Will the Q2 release include the ability to change the colour of bars in the same series as discussed below?

regards, Ian
0
T. Tsonev
Telerik team
answered on 26 Jun 2012, 11:53 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ian
Top achievements
Rank 1
answered on 26 Jun 2012, 12:36 PM
Hi Tsvetomir,
That's excellent news! Thanks for the update.

Best regards, Ian
0
Ian
Top achievements
Rank 1
answered on 12 Jul 2012, 04:09 PM
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
0
T. Tsonev
Telerik team
answered on 13 Jul 2012, 07:25 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ian
Top achievements
Rank 1
answered on 13 Jul 2012, 08:32 AM
Hi Tsvetomir,
That's brilliant! Thanks for the documentation link as well.

Best regards, Ian
0
Kriti
Top achievements
Rank 1
answered on 14 Aug 2012, 11:30 AM
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.
Tags
Charts
Asked by
Thomas
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Joe Sugden
Top achievements
Rank 1
Sam
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Kriti
Top achievements
Rank 1
Share this question
or