Overlay Bar Chart Series
Environment
Product Version | 2018.1.221 |
Product | Progress® Kendo UI® Chart for jQuery |
Description
How can I create a Kendo UI Column or Bar Chart with two values in the same category where: 1. One of the bars overlays the other? 2. The top bar is narrower than the base bar?
Solution
- Use the
series.spacing
property with a value of-1
(minus one) to place one series on top of the other. - Apply a custom
visual
for the top series to make their bar narrower.
The following example demonstrates how to apply the suggested approach to a Bar Chart series.
<div id="chart"></div>
<script>
function createChart() {
$("#chart").kendoChart({
seriesDefaults: {
type: "bar",
spacing: -1
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000],
visual: function (e) {
var rect = e.rect;
var origin = rect.origin;
var bottomRight = rect.bottomRight();
var offset = (bottomRight.y - origin.y) / 3;
var path = new kendo.drawing.Path({
fill: {
color: e.options.color
},
stroke: {
color: "#939393",
width: 0.5
}
})
.moveTo(origin.x, bottomRight.y - offset)
.lineTo(bottomRight.x, bottomRight.y - offset)
.lineTo(bottomRight.x, origin.y + offset)
.lineTo(origin.x, origin.y + offset)
.close();
return path;
}
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
}
});
}
$(document).ready(createChart);
</script>
The following example demonstrates how to apply the suggested approach to a Column Chart series.
<div id="chart"></div>
<script>
function createChart() {
$("#chart").kendoChart({
seriesDefaults: {
type: "column",
spacing: -1
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000],
visual: function (e) {
var origin = e.rect.origin;
var bottomRight = e.rect.bottomRight();
var offset = (bottomRight.x - origin.x) / 3;
var path = new kendo.drawing.Path({
fill: {
color: e.options.color
},
stroke: {
color: "#939393",
width: 0.5
}
})
.moveTo(origin.x + offset, bottomRight.y)
.lineTo(bottomRight.x - offset, bottomRight.y)
.lineTo(bottomRight.x - offset, origin.y)
.lineTo(origin.x + offset, origin.y)
.close();
return path;
}
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
}
});
}
$(document).ready(createChart);
</script>