Edit this page

Share Legend Between Charts

Environment

Product Progress Kendo UI Chart
Progress Kendo UI 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.

<!DOCTYPE html>
<html>
  <head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  </head>
  <body>
    <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>


  </body>
</html>

Notes

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy