AmCharts: custom button to hide/show graph - amcharts

Question

I would like to have my own buttons to hide/show lines on a linear graph.
The legend is fine, but I want my own HTML/CSS.
Is there a way to do this?
Attaching the hide/show event maybe?
Thank you

Answer 1

You can call the showGraph and hideGraph methods from your buttons' events. Since they take the graph instance, you'll want to have access to the chart to pass in the desired graph instance either by accessing the graphs array directly or calling getGraphById if you set ids for your graphs, then check the graph's hidden property to know when to call showGraph or hideGraph
Assuming you have the graph index in your button's markup like <button data-graph-index="0">Toggle first graph</button>, you could do something like this:
button.addEventListener('click', function(e) {
var graph = chart.graphs[e.currentTarget.dataset.graphIndex];
if (graph.hidden) {
chart.showGraph(graph);
}
else {
chart.hideGraph(graph);
}
});
Here's a demo:
var chart;
Array.prototype.forEach.call(
document.querySelectorAll('.toggle-graph'),
function (button) {
button.addEventListener('click', function(e) {
var graph = chart.graphs[e.currentTarget.dataset.graphIndex];
if (graph.hidden) {
chart.showGraph(graph);
}
else {
chart.hideGraph(graph);
}
});
}
);
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"year": 1994,
"cars": 1587,
"motorcycles": 650,
"bicycles": 121
}, {
"year": 1995,
"cars": 1567,
"motorcycles": 683,
"bicycles": 146
}, {
"year": 1996,
"cars": 1617,
"motorcycles": 691,
"bicycles": 138
}, {
"year": 1997,
"cars": 1630,
"motorcycles": 642,
"bicycles": 127
}, {
"year": 1998,
"cars": 1660,
"motorcycles": 699,
"bicycles": 105
}, {
"year": 1999,
"cars": 1683,
"motorcycles": 721,
"bicycles": 109
}, {
"year": 2000,
"cars": 1691,
"motorcycles": 737,
"bicycles": 112
}, {
"year": 2001,
"cars": 1298,
"motorcycles": 680,
"bicycles": 101
}, {
"year": 2002,
"cars": 1275,
"motorcycles": 664,
"bicycles": 97
}, {
"year": 2003,
"cars": 1246,
"motorcycles": 648,
"bicycles": 93
}, {
"year": 2004,
"cars": 1318,
"motorcycles": 697,
"bicycles": 111
}, {
"year": 2005,
"cars": 1213,
"motorcycles": 633,
"bicycles": 87
}, {
"year": 2006,
"cars": 1199,
"motorcycles": 621,
"bicycles": 79
}, {
"year": 2007,
"cars": 1110,
"motorcycles": 210,
"bicycles": 81
}, {
"year": 2008,
"cars": 1165,
"motorcycles": 232,
"bicycles": 75
}, {
"year": 2009,
"cars": 1145,
"motorcycles": 219,
"bicycles": 88
}, {
"year": 2010,
"cars": 1163,
"motorcycles": 201,
"bicycles": 82
}, {
"year": 2011,
"cars": 1180,
"motorcycles": 285,
"bicycles": 87
}, {
"year": 2012,
"cars": 1159,
"motorcycles": 277,
"bicycles": 71
}],
"valueAxes": [{
"gridAlpha": 0.07,
"position": "left",
"title": "Traffic incidents"
}],
"graphs": [{
"title": "Cars",
"valueField": "cars"
}, {
"title": "Motorcycles",
"valueField": "motorcycles"
}, {
"title": "Bicycles",
"valueField": "bicycles"
}],
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "year",
"categoryAxis": {
"startOnAxis": true,
"axisColor": "#DADADA",
"gridAlpha": 0.07,
"title": "Year"
},
"export": {
"enabled": true
}
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<button class="toggle-graph" data-graph-index="0">Toggle first graph</button>
<button class="toggle-graph" data-graph-index="1">Toggle second graph</button>
<button class="toggle-graph" data-graph-index="1">Toggle third graph</button>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

Answer 2

Not sure if its a version issue or a different way I was using the api, but the accepted answer hadn't worked for me. In fact chart.graphs itself wasn't defined.
All I was used was
chart.show()
and
chart.hide()
Background...
const [chart, setChart] = useState(null)
...
let newChart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: 'none',
wheelY: 'none',
layout: root.verticalLayout,
})
setChart(newChart)
I also had some tooltips and modal dialogue (to show when the chart is empty)
const hideChartTooltip = () => {
const tooltip = chart.series.getIndex(0).get('tooltip')
if (tooltip) {
tooltip.set('forceHidden', true)
tooltip.hide()
}
}
useEffect(() => {
if (!chart) {
console.log('show/hide graph no-op')
return
}
console.log(`chart view mode : ${isChartView}`)
if (isChartView) {
chart.show()
}
else {
console.log('hiding the graph... ')
hideChartTooltip()
chart.hide()
}
}, [isChartView])
Ref: Sprite - hide
Inheritance hierarchy...
Chart <- Container <- Sprite