ZingChart: Using Checkboxes For Legend Items
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:
