[Chartjs]-How to hide/show bars differentiate by a colors and by click on labels, using chartjs bar charts?

by

1👍

✅

You need to use a second dataset to achieve this:

Then you can fill null values in both datasets where you dont use the values of that dataset, so null values on the places where value is negative in positive dataset and vice versa in other one.

Then you can use the property skipNull to make it so the bars dont take up space:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, null, 3, 5, null, 3],
        backgroundColor: 'green'
      },
      {
        label: '# of Points',
        data: [null, -11, null, null, -3, null],
        backgroundColor: 'red'
      }
    ]
  },
  options: {
    skipNull: true
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

0👍

should be this part

 label: ['Attendence', 'newLabel', 'xxx'],

under

 const ctx = document.getElementById('chartJsDiv').getContext('2d');

Leave a comment