react-chartjs-2
react-chartjs-2 copied to clipboard
How to merge three different bar charts into one
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:
Hi, you just need to pass datasets as an array:
Below is the data object for this chart:
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],
},
],
};
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?