JSFiddle - React, Tailwind, and code Playground

by palaceslittle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<canvas id="myChart" width="1500" height="290"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'LINEA 1',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        hidden: true
      },
      {
        label: 'LINEA 2',
        data: [22, 29, 33, 55, 52, 33],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        hidden: true
      },
       {
        label: 'LINEA 3',
        data: [22, 29, 31, 55, 12, 33],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        hidden: true
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    legend: {
      labels: {
        generateLabels: function(chart) {
          return [{
            text: 'PACK LINEAS 2',
            fillStyle: 'rgba(255, 99, 132, 0.2)'
          }]
        }
      },
      onClick: function(e, legendItem) {
        var ci = this.chart;
        ci.data.datasets.forEach(function(e, i) {
        console.log(e)
        console.log(i)
          var meta = ci.getDatasetMeta(i);
          if (meta.hidden == false) {
            meta.hidden = true;
          } else {
            meta.hidden = false;
          }
        })
        ci.update();
      }
    }
  }
});