Search results

Show series based on respective legend click

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.

razor
series-visible.cs
@Html.EJS().Chart("container").Series(series =>
                        {

                            series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
                            .XName("x")
                            .YName("yValue").Fill("orange").DataSource(ViewBag.dataSource).Name("Gold").Width(2).Add();
                            series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
                            .XName("x").YName("yValue1").Fill("grey").DataSource(ViewBag.dataSource)
                            .Name("Silver").Width(2).Add();
                            series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
                            .XName("x")
                            .YName("yValue2").Fill("red").DataSource(ViewBag.dataSource).Name("Brozen").Width(2).Add();
                        }).PrimaryXAxis(px => px.Interval(1)
                        .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
                        ).Tooltip(tt => tt.Enable(true)).LegendSettings(lg => lg.Visible(true)).Title("Olympic Medal Counts - RIO").ChartMouseClick("chartClick").Render()
<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>
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;
        }