Chart color

12 posts, 0 answers
  1. Thomas
    Thomas avatar
    1 posts
    Member since:
    Dec 2010

    Posted 15 Dec 2011 Link to this post

    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..

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 15 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Joe Sugden
    Joe Sugden avatar
    52 posts
    Member since:
    Feb 2010

    Posted 24 Feb 2012 Link to this post

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

    Thanks!
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 28 Feb 2012 Link to this post

    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!
  6. Sam
    Sam avatar
    10 posts
    Member since:
    Mar 2012

    Posted 07 Mar 2012 Link to this post

    Does this also apply to pie charts?
  7. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 23 Jun 2012 Link to this post

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

    regards, Ian
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 26 Jun 2012 Link to this post

    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!
  9. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 26 Jun 2012 Link to this post

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

    Best regards, Ian
  10. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 12 Jul 2012 Link to this post

    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
  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 13 Jul 2012 Link to this post

    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!
  12. Ian
    Ian avatar
    129 posts
    Member since:
    Jun 2009

    Posted 13 Jul 2012 Link to this post

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

    Best regards, Ian
  13. Kriti
    Kriti avatar
    2 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready