Custom Colouring Column Series based on Line Series

[Ranganath]

Hi,

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.

 

[Alex Hajigeorgieva]

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:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.color  

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:

http://dojo.telerik.com/@bubblemaster/aqaxo

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

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartSeriesBuilderBase#methods-Color(System.String)

Kind Regards,
Alex Hajigeorgieva
Progress Telerik