Situation: I am get multiple datasets from my server, each dataset is loaded into a state and then broken into labels, data with the keys and values respectively. I have a chart for each dataset. I can confirm that the data is being retrieved. However, react-chartjs-2 will only load one chart, and all the other charts are empty.
I have been trying to figure this out for a week now. I have read documentation, looked at examples, tried various methods/solutions from looking at similar questions and nothing has worked so far.
//==================// Load data //==================//
const reportOneData = {
labels: reportOneKeys,
datasets: [
{
label:'DAYS IN REVIEW STAGE',
data: reportOneValue,
backgroundColor: randoColour(reportOneValue),
borderWidth: 1,
borderColor: '#ccc',
hoverBorderWidth: 3,
hoverBorderColor: '#333',
hoverOpacity: 1
}
]
}
const reportTwoData = {
labels: reportTwoKeys,
datasets: [
{
label:'DAYS IN REVIEW STAGE',
data: reportTwoValue,
backgroundColor: randoColour(reportTwoValue),
borderWidth: 1,
borderColor: '#ccc',
hoverBorderWidth: 3,
hoverBorderColor: '#333',
hoverOpacity: 1
}
]
}
//==================// Render charts //==================//
return (
<>
<div className="reports-container">
<h1>Reports by region</h1>
<h2>{regionName}</h2>
<button className="print-button" onClick={() => window.print()}>Print this page</button>
<div className="container">
<div className="chart">
<Bar
data={reportOneData}
options={{
responsive: true,
maintainAspectRatio: false,
title:{
display:true,
text: 'NUMBER OF DAYS IN STAGE',
fontSize: '30'
},
legend: {
display: true,
position: 'right'
}
}}
/>
</div>
<div className="chart">
<Line
data={reportTwoData}
options={{
responsive: true,
maintainAspectRatio: false,
title:{
display:true,
text: 'DECISIONS MADE MONTHLY',
fontSize: '30'
},
legend: {
display: true,
position: 'right'
}
}}
/>
</div>
</div>
<span></span>
</div>
</>
)
}
Not sure where to go from here. Any help appreciated. Thank you.
