Custom Colouring Column Series based on Line Series

2 posts, 0 answers
  1. Ranganath
    Ranganath avatar
    1 posts
    Member since:
    Apr 2016

    Posted 28 Nov 2017 Link to this post


    I have a Chart with Line and Column Series, programmatically populated from the Sequel server.

    My requirement is to custom color the Column series (those bar which  appear on the graph per month wise) based on the values of the  Line series.

    Any column bar whose value is less then the Line series bar to be shown in one color and the values which are more in another color.

    Attached is the  graph for reference, Thanks in advance for your support in this regards.


  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    482 posts

    Posted 30 Nov 2017 Link to this post

    Hello, Ranganath,

    To colour the Kendo UI Chart column series which are lower than the line series value in a different way, you can use the "series.color" configuration property:  

    You can loop over both datasets and compare the values, then change the color when the line data point is less than the column data point:

    For example:

    var lineSeries = lineData;
    var columnSeries = columnData;
    for(var i = 0; i < lineSeries.length; i++){
      if(lineSeries[i].value < columnSeries[i].value){
        columnSeries[i].color = "yellowgreen";

    Here is a runnable Dojo with jQuery Kendo UI for your reference:

    For ASP.NET MVC, you can use the Color() setting:

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top