How to make multiple horizontal bar chartjs

Question

I want to make horizontal bar chart using chartjs in react like this: chart i want to make

but i end up doing like this chart i make can someon help me please, im new in react and chartjs

Here's the continuation of this post: How to make labels on both side from horizontal bar chart js

here's what i code:

this the data:

export const dataPasienKeluarMasuk = {
  type: 'bar',
  labels: [
    [0, 1, 2, 3,4],    // expect output 0 - 4
    [5, 6, 7, 8, 9],   // expect output 5 - 9
    [10, 14],          // ext..
    [15, 19],
    [20, 24],
    [25, 29],
    [30, 34],
  ],
  datasets: [
    {
      label: 'Pasien Masuk',
      xAxisID: 'A',
      data: [100, 90, 80, 70, 60],
      backgroundColor: 'red',
    },
    {
      label: 'Pasien Keluar',
      xAxisID: 'A',
      data: [-100, -90, -80, -70, -60],
      backgroundColor: 'blue',
    },
  ],
}

here's the chart:

import { HorizontalBar } from 'react-chartjs-2'
import { dataPasienKeluarMasuk } from ...blabla

<HorizontalBar
   data={dataPasienKeluarMasuk}
   height={227}
   options={{
   responsive: true,
   title: {
      display: true,
      text: 'Data Pasien Keluar Masuk',
      fontSize: 20,
   },
   legend: {
      display: true,
      position: 'bottom',
   },
   scales: {
      xAxes: [
        {
          id: 'A',
          position: 'left',
        },
      ],
     },
   }}
 />

uminder · Accepted Answer · 2020-09-17T05:26:31.010

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>

Hii thankyou for your answer it works great, sorry for long reply. but i'm still confused how to make Blue value not minus like the Red one just like this (https://i.stack.imgur.com/kiAal.png) thankyou your answer very helpful — CepotOi, Sep 17 '20 at 02:35
@Rizki Hutama: I updated my answer according to your comment. — uminder, Sep 17 '20 at 05:27
Hii thankyou for answering my questions, one last questions how to make side labels on both sides like this (https://pasteboard.co/JrsBWXY.png) sorry to bother your time, i'm really grateful to your answer — CepotOi, Sep 17 '20 at 06:53
@Rizki Hutama: Please post a new question for this additional issue. This will make it easier to match corresponding answers. — uminder, Sep 17 '20 at 06:59

score 0 · Answer 2 · answered Sep 17 '20 at 04:40

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>

How to make multiple horizontal bar chartjs

2 Answers2

Linked