Search results

Hide the tooltip for unselected series

By using the tooltipRender event, you can cancel the tooltip for unselected series in the chart.

To hide the tooltip value in unselected series, follow the given steps:

Step 1:

By using the tooltipRender event, you can get the series elements in the arguments. By using this argument we can compare whether seriesElementclasslist is deselected container or not. If it is true then we cancel the tooltip by setting the value for args.cancel as true.

razor
hide-tooltip.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(br => br.Color("transparent"))).Series(series =>
             {
                 series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue")
                 .Marker(mr => mr.Visible(true).Width(10).Height(10)).YName("yValue")
                 .DataSource(ViewBag.dataSource).Name("Germany").Add();
                 series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
                 .Width(2).XName("xValue").YName("yValue1")
                 .Marker(mr => mr.Visible(true).Width(10).Height(10))
                 .DataSource(ViewBag.dataSource).Name("England").Add();
             }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
             .MajorGridLines(mg => mg.Width(0))
             .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
             .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
           ).PrimaryYAxis(py => py.LabelFormat("{value}%")
           .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
           .MajorTickLines(mt => mt.Width(0))
           .MinorTickLines(mt => mt.Width(0))
           .LineStyle(ls => ls.Width(0)).Interval(20).Minimum(0).Maximum(100)
           ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).TooltipRender("tooltipRender").SelectionMode(Syncfusion.EJ2.Charts.SelectionMode.Series).Render()
<script>
    var tooltipRender = function (args) {
        var series = (args.series);
        if (series.seriesElement.classList[0] === 'container_ej2_deselected') {
            args.cancel = true;
        }
    }
</script>
public IActionResult Index()
        {
            List<LineChartData> chartData = new List<LineChartData>
            {
                new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
                new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
                new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
                new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
                new LineChartData { xValue = new DateTime(2009, 01, 01), yValue = 54, yValue1 = 66 },
                new LineChartData { xValue = new DateTime(2010, 01, 01), yValue = 57, yValue1 = 78 },
                new LineChartData { xValue = new DateTime(2011, 01, 01), yValue = 70, yValue1 = 84 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }

        public class LineChartData
        {
            public DateTime xValue;
            public double yValue;
            public double yValue1;
        }