react-chartjs-2 icon indicating copy to clipboard operation
react-chartjs-2 copied to clipboard

How to merge three different bar charts into one

Open DannyThomas2 opened this issue 5 years ago • 2 comments

Hi,

I've been trying to look online on how to achieve having three different bar charts into one chart. Is this even possible?

I want to get something that look like this: chart

DannyThomas2 avatar Sep 11 '20 21:09 DannyThomas2

Hi, you just need to pass datasets as an array:

Below is the data object for this chart:

grouped_bars
const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [65, 59, 80, 81, 56, 55, 40],
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(255, 205, 86, 0.2)',
      borderColor: 'rgb(255, 205, 86)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255, 205, 86, 0.4)',
      hoverBorderColor: 'rgb(255, 205, 86)',
      data: [45, 69, 85, 75, 26, 65, 45],
    },
    {
      label: 'My Third dataset',
      backgroundColor: 'rgba(153, 102, 255, 0.2)',
      borderColor: 'rgb(153, 102, 255)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(153, 102, 255, 0.4)',
      hoverBorderColor: 'rgb(153, 102, 255)',
      data: [85, 49, 88, 86, 49, 45, 48],
    },
  ],
};

jkotova avatar Sep 24 '20 09:09 jkotova

Hey thanks for the reply! Unfortunately that isn't what I'm trying to accomplish. I need the datasets for each label to be different and not linked to each other. So for example ill have for the label department ['corporate':10, 'hr':14 ....] and for the label gender ill have ['male':123, 'female':31] and lastly for age it'll be ['20-30':31, '31-44':42]. These three labels have their own data associated with them, I'm just trying to have all three in one bar chart, is that possible?

DannyThomas2 avatar Sep 24 '20 14:09 DannyThomas2