You can simply use native HTML to have checkboxes.
<div id='myChart'></div>
<input data-index='0' type='checkbox' id='pa' checked>
<label for='pa'>Dataset 1</label>
<input data-index='1' type='checkbox' id='pb' checked>
<label for='pa'>Dataset 2</label>
<input data-index='2' type='checkbox' id='pc' checked>
<label for='pa'>Dataset 3</label>
<input data-index='3' type='checkbox' id='pd' checked>
<label for='pa'>Dataset 4</label> From there you will use our API to attach events to toggle the plots through an event listener.
// get all inputs
var inputSelectors = document.querySelectorAll('input');
inputSelectors.forEach(function(input) {
input.addEventListener('click',updateChartData);
});
function updateChartData(e){
var seriesIndex = this.dataset['index'];
zingchart.exec('myChart', 'toggleplot',{
plotindex: seriesIndex
});
};
Relative Links: