Chartjs-Show/Hide data from Barchart with Chart.js

by

1👍

✅

I hope this will help you.

 var options = {
   type: 'horizontalBar',
   data: {
    
     datasets: [{
       label: 'Person 1',
       data: [20],
       backgroundColor: ['#FFC857']
     }, {
       label: 'Person 2',
       data: [42],
       backgroundColor: ['#E9724C']
     },{
       label: 'Person 3',
       data: [51],
       backgroundColor: ['#C5283D']
     },{
       label: 'Person 4',
       data: [4],
       backgroundColor: ['#481D24']
     }]
   },
   options: {
     scales: {
       xAxes: [{
         time: {
           unit: 'day'
         },
       }],

     },
     legend: {
       display: true
     },
     responsive: true
   }
 }
var ctx = document.getElementById("calendarStats").getContext('2d');
var myChart = new Chart(ctx, options);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="calendarStats"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</body>
</html>

Leave a comment