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:

  1. live demo

  2. API docs

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us