Chartjs-Creating mixed Bar Chart with ReactJS using recharts or react-chartjs-2

by

2👍

✅

The main requirement can be met by defining two xAxes, one for the individual values ('x1'), the other one for the total bar ('x2').

For further details, please consult the chapter "Creating Multiple Axes" from Chart.js documentation

Please take a look at below code sample and see how it works. While this is a pure JavaScript solution, the concept should also work for react-chartjs-2.

const data = [{
  type: "Sample 1",
  data: [600, 400, 200, 800]
}, {
  type: "Sampel 2",
  data: [700, 300, 600, 600]
}, {
  type: "Total",
  data: [1300, 700, 800, 1400]
}];

new Chart('myChart', {
  type: "bar",
  data: {
    labels: ["A", "B", "C", "D"],
    datasets: [{
        label: data[0].type,
        xAxisID: 'x1',
        data: data[0].data,
        backgroundColor: 'rgb(54, 162, 235)',
        barPercentage: 1
      },
      {
        label: data[1].type,
        xAxisID: 'x1',
        data: data[1].data,
        backgroundColor: 'rgb(255, 159, 64)',
        barPercentage: 1
      },
      {
        label: data[2].type,
        xAxisID: 'x2',
        data: data[2].data,
        backgroundColor: 'rgb(172, 215, 250)',
        barPercentage: 1
      }
    ]
  },
  options: {
    legend: {
      labels: {
        filter: item => item.text != 'Total'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          stepSize: 200
        }
      }],
      xAxes: [{
          id: 'x1'
        },
        {
          id: 'x2',
          display: false,
          offset: true
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment