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

Custom Colouring Column Series based on Line Series

1 Answer 56 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Ranganath
Top achievements
Rank 1
Ranganath asked on 28 Nov 2017, 10:12 AM

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.

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 30 Nov 2017, 12:21 PM
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
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.
Tags
Chart
Asked by
Ranganath
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or