JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Show Series on Legend click in JavaScript Chart control

08 May 2023 / 2 minutes to read

By using the chartMouseClick event, you can show the series based on respective legend click. In this event, you can get the legend target id, using which you can get the current series index. Based on the index, you can set value of visible to true or false.

Source
Preview
index.ts
index.html
Copied to clipboard
import { ChartTheme, Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip, ILoadedEventArgs, IMouseEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip);
import { Browser } from '@syncfusion/ej2-base';

var previousTarget = null;
let chart: Chart = new Chart({
  primaryXAxis: {
    valueType: 'Category', interval: 1,
  },
  series: [
    {
      type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',
      dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }], animation: { enable: false },
      fill: 'red', opacity: 0.8
    },
    {
      type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',
      dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }], animation: { enable: false },
      fill: 'green', opacity: 0.8
    },
    {
      type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',
      dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }], animation: { enable: false },
      fill: 'orange', opacity: 0.8
    }
  ],
  chartMouseClick: (args: IMouseEventArgs) => {
    var flag = false;
    if (((args.target).indexOf('chart_legend_text') > -1) || ((args.target).indexOf('chart_legend_shape') > -1) ||
      (args.target).indexOf('chart_legend_shape_marker_') && !(args.target).indexOf('chart_legend_element')) {
      var ids = ((args.target).indexOf('chart_legend_text') > -1) ?
        (args.target).split('chart_legend_text_')[1] : args.target.split('chart_legend_shape_marker_')[1] || args.target.split('chart_legend_shape_')[1];
      var chart1 = document.getElementById("element").ej2_instances[0];
      for (var i = 0; i < chart1.series.length; i++) {
        chart1.series[i].visible = false;
      }
      if (ids == previousTarget) {
        for (var j = 0; j < chart1.series.length; j++)
          chart1.series[j].visible = true;
        chart1.series[ids].visible = false;
        previousTarget = null;
        flag = true;
      }
      if (!flag)
        previousTarget = ids;
    }
  },
  title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },

});
chart.appendTo('#element');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
		   <div id='element1'></div>
    </div>
</body>

</html>
Previous
Next