Show series based on respective legend click

17 Feb 20226 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.

CSHTML

<ejs-chart id="container" title="Olympic Medal Counts - RIO" chartMouseClick="chartClick">
            <e-chart-primaryxaxis valueType="Category" interval=1>
            </e-chart-primaryxaxis>
            <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" xName='x' yName='yValue' name='Gold' fill="orange" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                </e-series>
                <e-series dataSource="ViewBag.dataSource" xName='x' yName='yValue1' name='Silver' fill="grey" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                </e-series>
                <e-series dataSource="ViewBag.dataSource" xName='x' yName='yValue2' name='Bronze' fill="red" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                </e-series>
            </e-series-collection>
        </ejs-chart>
<script>
    var previousTarget = null;
    var chartClick = function (args) {
        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("container").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;
        }
    }
</script>

Series-visible.cs

public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46, yValue1=37, yValue2=38 },
                new ColumnChartData { x= "GBR", yValue= 27, yValue1=23, yValue2=17 },
                new ColumnChartData { x= "CHN", yValue= 26, yValue1=18, yValue2=26 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
            public double yValue2;
        }