Chartjs-How to make multiple horizontal bar chartjs

by

0👍

✅

You should define both axes as stacked:

scales: {
  xAxes: [{
    stacked: true
  }],
  yAxes: [{
    stacked: true
  }]
}

In order to see only positive values displayed on the x-axis ticks, you need to define a ticks.callback function on the x-axis.

ticks: {
  callback: value => Math.abs(value)
}

To have only positive values displayed in the tooltips, you further need to define a tooltips.callback.label functions as shown below.

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      let ds = data.datasets[tooltipItem.datasetIndex];
        return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
      }
    }
  },

Please take a look at the runnable code snippet below and see how it works (this is a pure Chart.js solution but it should easily be adaptable to react-chart.js).

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
        label: 'Pasien Masuk',
        data: [100, 90, 80, 70, 60],
        backgroundColor: 'red',
      },
      {
        label: 'Pasien Keluar',
        data: [-100, -90, -80, -70, -60],
        backgroundColor: 'blue',
      },
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Data Pasien Keluar Masuk',
      fontSize: 20,
    },
    legend: {
      position: 'bottom',
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          let ds = data.datasets[tooltipItem.datasetIndex];
          return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
        }
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          callback: value => Math.abs(value)
        }
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>

0👍

this snippet is based from uminder‘s answer

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['a', 'b', 'c', 'd', 'e'],
    datasets: [{
        label: 'Pasien Masuk',
        data: [100, 90, 80, 70, 60],
        backgroundColor: 'red',
      },
      {
        label: 'Pasien Keluar',
        data: [-100, -90, -80, -70, -60],
        backgroundColor: 'blue',
      },
    ]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Data Pasien Keluar Masuk',
      fontSize: 20,
    },
    legend: {
      display: true,
      position: 'bottom',
    },
    scales: {
      xAxes: [{
        stacked: true,
        
        ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return value < 0? -(value) : value
                    }
                }
      }],
      yAxes: [{
        stacked: true
      }]
    },
    tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';               
                    var value = tooltipItem.xLabel;
                    value = value < 0? -(value) : value
                    return label + ': ' + value;
                }
            }
        }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Leave a comment