Kendo Chart, overlay of two series

Question

Hello, I got an Kendo ui bar chart with two series.
By default the series will display side by side.

With the "stacked: true" the 2 series will be stacked.
(first value + second value)

...
seriesDefaults: {
    type: "column",
    stack: true       <-- make it stacked
}, ...

So far so good. What I want is the one series is above the other, an overlay in a way.
(first value - second value)

I created a fiddle.
Hope you understand what I mean :-)

Is this possible by configuration or I have to manipulate the data before get it in the chart!?

I spent a couple hours looking around at this today, and haven't found anything in Telerik's documentation or support forums that would suggest they support overlaid series data in bar charts beyond the standard stack. You might try asking over on their support forums: telerik.com/forums/kendo-ui-dataviz — Joe Brunscheon
If, on the other hand, you are talking about taking series1 values minus series2 values, then, yes, that can be done, but you have to write the code for it. Here's a fiddle with that: jsfiddle.net/mkCJz — Joe Brunscheon
Thanks a lot for your response! I couldn´t also find anything about this in the documentation. But the way you doing in the fiddle is the right one. I changed it a bit: jsfiddle.net/fool/mkCJz/1 — chris
@Joe Brunscheon make an answer od xour comment if you spent a couple of hours for this!? :-) — chris

Joe Brunscheon Joe Brunscheon · Accepted Answer · 2014-02-04T14:28:47

As far as I have seen, Telerik doesn't support overlaid series data in bar charts beyond the standard stack. You might try asking over on their support forums.

If, on the other hand, you are talking about taking series1 values minus series2 values, then, yes, that can be done, but you have to write the code for it. Something like this:

var dataset = new Array(10, 15, 20, 10, 15, 20);
var dataset2 = new Array(2, 2, 4, 6, 5, 20);
var dataset3 = new Array(); //dataset1 - dataset2
for(var i = 0; i < dataset.length; i++){
    dataset3.push(dataset[i] - dataset2[i]);
}

Here's a fiddle with that, and showing the rest of putting it into the chart.

Kendo Chart, overlay of two series

1 Answers