[Chartjs]-Multiple y-axis in horizontalBar chart js

by

1👍

✅

Change your second ‘data’ object’s ‘label’ and ‘yAxisID’ values from ‘B’ to ‘A’. Also, you can delete your second ‘yAxes’ object at the bottom.

So it would look like this:

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'horizontalBar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 90, 80, 70, 60],
      backgroundColor: 'blue'
    }, {
      label: 'A',
      yAxisID: 'A',
      data: [-100, -90, -80, -70, -60],
      backgroundColor: 'red'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        position: 'left'
      }]
    }
  }
});

jsfiddle: https://jsfiddle.net/vjt2r1mL/362/

Leave a comment