Hide the tooltip for unselected series
17 Mar 20227 minutes to read
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, it can be compared whether seriesElementclasslist is deselected container or not. If it is true then the tooltip can be cancelled by setting the value for args.cancel
as true
.
<ejs-chart id="container" selectionMode="Series" tooltipRender="tooltipRender" title="Inflation - Consumer Price">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-primaryxaxis valueType="DateTime"
labelFormat="y"
intervalType="Years"
edgeLabelPlacement="Shift">
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis labelFormat="{value}%"
rangePadding="None"
minimum=0
maximum=100
interval=20>
<e-linestyle width="0"></e-linestyle>
<e-majorticklines width="0"></e-majorticklines>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Germany" xName="xValue" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-marker visible="true" height="10" width="10"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="England" xName="xValue" width="2" opacity="1" yName="yValue1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
<e-series-marker visible="true" height="10" width="10"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
<script>
function tooltipRender(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;
}