Search results

Show series based on respective legend click

08 Apr 2021 / 1 minute 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.

razor
series-visible.cs
Copied to clipboard
@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>
Copied to clipboard
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;
        }