Render Custom Plot Bands in the Chart
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
I need to create my own custom plot bands as a custom overlay of the Chart. How can I achieve this behavior?
Solution
To accomplish this scenario, create custom elements in the render event of the Chart to ensure they survive redraws. Note that you can extend the techniques shown here to create much more complex annotations as well.
For a list of all available drawing primitives, refer to the introductory article on the Drawing API.
The following examples demonstrate the implementation of the scenario in the Column and Bar Charts.
Column Charts
The following example demonstrates how to render a custom plot band in a Column Kendo UI Chart.
<div id="chart" />
<script>
$("#chart").kendoChart({
valueAxis: {
name: "valueAxis",
min: 0,
max: 700
},
categoryAxis: {
name: "categoryAxis"
},
series: [{
type: "column",
data: [500, 650]
}],
render: function(e) {
// Locate value slot
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/chart/chart_axis/methods/slot
var valueAxis = e.sender.getAxis("valueAxis");
var valueSlot = valueAxis.slot(650);
// Locate right-most category slot
//
var categoryAxis = e.sender.getAxis("categoryAxis");
var lastCategoryIndex = Math.max(1, categoryAxis.range().max);
var minCategorySlot = categoryAxis.slot(0);
var maxCategorySlot = categoryAxis.slot(lastCategoryIndex);
// Render a line element
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
var line = new kendo.drawing.Path({
stroke: {
color: "red",
width: 3
}
});
line.moveTo(valueSlot.origin).lineTo([maxCategorySlot.origin.x, valueSlot.origin.y]);
// Render a text element
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
var labelPos = [maxCategorySlot.origin.x - 50, valueSlot.origin.y - 20];
var label = new kendo.drawing.Text("MAX", labelPos, {
fill: {
color: "red"
},
font: "14px sans"
});
var group = new kendo.drawing.Group();
group.append(line, label);
// Draw on chart surface
//
// https://docs.telerik.com/kendo-ui/framework/drawing/overview
e.sender.surface.draw(group);
}
});
</script>
Bar Charts
The following example demonstrates how to render a custom plot band in a Bar Kendo UI Chart.
<div id="chart" />
<script>
$("#chart").kendoChart({
valueAxis: {
name: "valueAxis",
min: 0,
max: 700
},
categoryAxis: {
name: "categoryAxis"
},
series: [{
type: "bar",
data: [500, 650]
}],
render: function(e) {
// Locate value slot
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/chart/chart_axis/methods/slot
var valueAxis = e.sender.getAxis("valueAxis");
var valueSlot = valueAxis.slot(650);
// Locate right-most category slot
//
var categoryAxis = e.sender.getAxis("categoryAxis");
var lastCategoryIndex = Math.max(1, categoryAxis.range().max);
var minCategorySlot = categoryAxis.slot(0);
var maxCategorySlot = categoryAxis.slot(lastCategoryIndex);
// Render a line element
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
var line = new kendo.drawing.Path({
stroke: {
color: "red",
width: 3
}
});
line.moveTo(valueSlot.origin).lineTo([valueSlot.origin.x, minCategorySlot.origin.y]);
// Render a text element
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
var labelPos = [valueSlot.origin.x + 10, maxCategorySlot.origin.y - 30];
var label = new kendo.drawing.Text("MAX", labelPos, {
fill: {
color: "red"
},
font: "14px sans"
});
var group = new kendo.drawing.Group();
group.append(line, label);
// Draw on chart surface
//
// https://docs.telerik.com/kendo-ui/framework/drawing/overview
e.sender.surface.draw(group);
}
});
</script>