Display Checkboxes next to Legend Items in Charts
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 draw a checkbox that matches the visible state of the Chart series?
Solution
The legend.item.visual can be overridden to render custom text, images, and shapes.
For example, you might need to draw a checkbox that matches the visible state of the series. In this case, the checkbox is represented by using an Unicode Ballot Box symbol.
For a list of all available drawing primitives, refer to the Drawing API article.
The following example demonstrates how to customize the appearance of the legend items in a Kendo UI Chart.
<div id="chart" />
<script>
$("#chart").kendoChart({
legend: {
item: {
visual: function (e) {
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
// This will give us the default box + text
var defaultVisual = e.createVisual();
var defaultSize = defaultVisual.bbox().size;
// Define the target dimensions for the legend item
var rect = new kendo.geometry.Rect([0, 0], [defaultSize.width + 30, defaultSize.height]);
// A layout will hold the checkbox and the default visual
//
// https://docs.telerik.com/kendo-ui/api/javascript/drawing/layout
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
// Cheat a bit by rendering the checkbox using the Unicode ballot symbol
//
// https://docs.telerik.com/kendo-ui/api/javascript/dataviz/drawing/text
var cbSymbol = e.active ? "☑" : "☐";
var cb = new kendo.drawing.Text(cbSymbol, [0, 0], {
fill: {
color: labelColor
},
font: "14px sans-serif"
});
// Reflow them together
layout.append(cb, defaultVisual);
layout.reflow()
return layout;
}
}
},
series: [
{ name: "Series 1 with longer name", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>