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