Click to show series - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Click to show series

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Pre Crossed Series</title> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <style>

body{/*from  www.j  av a2 s.  c  om*/
   background-color: #666;
}
#multiLineChart{
   background-color: wheat;
   border-radius: 6px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div class="container"> 
         <br> 
         <div class="row"> 
            <div class="col-md-1"></div> 
            <div class="col-md-10"> 
               <!--       Chart.js Canvas Tag --> 
               <canvas id="multiLineChart"></canvas> 
            </div> 
            <div class="col-md-1"></div> 
         </div> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> 
      <script>
      // REF
//http://stackoverflow.com/questions/40195455/click-every-label-onload-chartjs
var canvas = document.getElementById("multiLineChart");
var ctx = canvas.getContext('2d');
var data = {
  labels: ["January", "February", "March", "April", "May"],
  datasets: [{
    label: "Series A",
    data: [10, 30, 20, 40, 10],
    borderColor: "rgba(0,0,255,0.8)",
    backgroundColor: "rgba(0,0,255,0.5)"
  }, {
    label: "Series B",
    data: [25, 40, 10, 40, 30],
    borderColor: "rgba(255,0,0,0.8)",
    backgroundColor: "rgba(255,0,0,0.5)"
  }]
};
var options = {
  tooltips: {
    enabled: true,
    mode: 'label'
  },
  legend: {
    display: true,
    labels: {
      fontColor: 'rgb(255, 99, 132)'
    }
  },
};
// Chart declaration:
var multiLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
// The Idea:
// multiLineChart.legend.legendItems[0].hidden = true;
// multiLineChart.data.datasets[0].hidden = true;
// multiLineChart.legend.legendItems[1].hidden = true;
// multiLineChart.data.datasets[1].hidden = true;
multiLineChart.legend.legendItems.forEach(function(label, key) {
  multiLineChart.legend.legendItems[key].hidden = true;
  multiLineChart.data.datasets[key].hidden = true;
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials