title: onClick event to Hide dataset Chart.js V2
body: <p>How can I make a html legend from <code>Chart.js</code> to hide/show the <code>dataset</code> of the chart, like the legend generated by the <code>Chart.js</code> itself</p>
  
  <p><a href="https://i.stack.imgur.com/WhO6g.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WhO6g.png" alt="enter image description here"></a></p>
  
  <p>Legend on bottom -> Chart.js legend</p>
  
  <p>Legend on right-> HTML</p>
  
  <p>How can I click in "SETOR AGILIZA" and get the <code>dataset</code> relative to it hide/show</p>
  
  <p>I found this code in the chat.js/core.legend.js <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.legend.js#L16-L26" rel="noreferrer">core.legend</a></p>
  
  <pre><code>onClick: function(e, legendItem) {
              var index = legendItem.datasetIndex;
              var ci = this.chart;
              var meta = ci.getDatasetMeta(index);
  
              // See controller.isDatasetVisible comment
              meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
  
              // We hid a dataset ... rerender the chart
              ci.update();
          },
  </code></pre>
  
  <p>But I have no clue how to get it to work on a <strong><code>onClick</code></strong> event in the html legend</p>
  
  <p>the labels names are get from a database, so they can change.</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>Found this <a href="https://github.com/chartjs/Chart.js/issues/2565" rel="noreferrer">Github</a>, trying to make it work</p>