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: