New to Kendo UI for jQuery? Download free 30-day trial

Display Checkboxes next to Legend Items in Charts


Product Progress® Kendo UI® Chart for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I draw a checkbox that matches the visible state of the Chart series?


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" />
        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
              var layout = new kendo.drawing.Layout(rect, {
                spacing: 5,
                alignItems: "center"

              // Cheat a bit by rendering the checkbox using the Unicode ballot symbol
              var cbSymbol = ? "☑" : "☐";
              var cb = new kendo.drawing.Text(cbSymbol, [0, 0], {
                fill: {
                  color: labelColor
                font: "14px sans-serif"

              // Reflow them together
              layout.append(cb, defaultVisual);

              return layout;
        series: [
          { name: "Series 1 with longer name", data: [1, 2, 3] },
          { name: "Series 2", data: [3, 4, 5] }

See Also

In this article