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

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>

See Also

In this article