Series visible in EJ2 JavaScript Chart control
8 May 20234 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
.
var columnData = [{ country: "USA", gold: 50 }, { country: "China", gold: 40 }, { country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 }, { country: "France", gold: 50 }, { country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 }, { country: "Sweden", gold: 30 }];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
},
primaryYAxis: {
title: 'Medals'
},
annotations: [{
content: '<div id ="test" style="border-top:3px dashed grey;border-top-width: 2px; width: 10000px"></div>',
x: 'France',
y: 50,
coordinateUnits: 'Point',
Region: 'Chart'
}],
series: [{
dataSource: columnData,
xName: 'country', yName: 'gold',
type: 'Line'
}],
}, '#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
<div id="element1"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>