Render Element for Zero Chart Bars
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I render bars with a zero value in the Chart?
Solution
By default, these are not rendered because they have a zero size.
To overwrite this limitation, refer to the following example. It demonstrates how to use the series.visual function to render an element for zero bars.
<div id="chart"></div>
<script>
var ZERO_BAR_SIZE = 2;
$("#chart").kendoChart({
seriesDefaults: {
type: "column",
visual: function(e) {
var visual;
if (e.value === 0) {
e.rect.origin.y -= ZERO_BAR_SIZE;
e.rect.size.height = ZERO_BAR_SIZE;
visual = new kendo.drawing.Rect(e.rect, {
fill: {
color: e.options.color
},
stroke: null
});
} else {
visual = e.createVisual();
}
return visual;
}
},
series: [{
data: [1, 0, 1]
}, {
data: [0, 1, 1]
}]
});
</script>