Search results

Hide axis line when clicking the legend

14 Apr 2021 / 3 minutes to read

By using the chartMouseClick event, you can hide the axis line through legend.

To hide the axis line through legend click, follow the given steps:

Step 1:

Create a chart with multiple axes.

By using the chartMouseClick event, you can get the legend’s target ids. Using this event, you can also get the yAxisName of each axis, based on which you can hide the axis line when clicking the legend.

The following code sample demonstrates the output.

Source
Preview
index.js
index.html
Copied to clipboard
var chart = new ej.charts.Chart({
        primaryXAxis: {
            valueType: 'Category',
        },
        primaryYAxis: {
            title: '(m2/min)'
        },
        annotations: [{
                content: '<div id="text" style="transform: rotate(-90deg);">Speed Rate</div>',
                x: 6,
                y: 180,
                coordinateUnits: 'Pixel',
                Region: 'Chart'
            }],
        series: [{
                dataSource: datasource.columnData,
                xName: 'country', yName: 'gold',
                type: 'Column'
            }],
    }, '#element');
Copied to clipboard
<!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/dist/ej2.min.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>