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

Share Legend Between Charts

Environment

Product Progress® Kendo UI® Chart for jQuery
Product Version 2017.2.621

Description

Can I click on the legend of one Kendo UI Chart and have the series of the other Charts hide or show?

Solution

Handle the legendItemClick event of the first Chart and manually toggle the series visibility in the other Charts.

The following example demonstrates the full implementation of the approach.

    <div id="example">
      <div class="demo-section k-content wide">
        <div id="chart" style="width:400px; height: 250px"></div>
        <div id="chart2"  style="width:400px; height: 220px"></div>
      </div>
      <script>
        function createChart() {
          $("#chart").kendoChart({
            legend: {
              position: "top"
            },
            legendItemClick: function(e){
              var series = $("#chart2").data("kendoChart").findSeriesByIndex(e.seriesIndex);

              series.toggleVisibility(!series._options.visible);
            },
            title: {
              text: "Site Visitors \n /UK/"
            },
            seriesDefaults: {
              type: "bar"
            },
            series: [{
              name: "Total Visits",
              data: [72000, 84000, 64000, 82000, 108000, 118000]
            }, {
              name: "Unique visitors",
              data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            categoryAxis: {
              categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
              majorGridLines: {
                visible: false
              }
            },
            tooltip: {
              visible: true,
              template: "#= series.name #: #= value #"
            }
          });
          $("#chart2").kendoChart({
            title: {
              text: "Site Visitors \n /France/"
            },
            legend: {
              visible: false
            },
            seriesDefaults: {
              type: "bar"
            },
            series: [{
              name: "Total Visits",
              data: [56000, 63000, 72000, 96000, 115000, 128000]
            }, {
              name: "Unique visitors",
              data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],

            categoryAxis: {
              categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
              majorGridLines: {
                visible: false
              }
            }
          });
        }

        $(document).ready(createChart);
      </script>
    </div>

Notes

If the order of the series is different across the Charts, you can also access the series by their names.

In this article