I want to add another x axis to my ChartJS which works, but the scales do not separate, for example I want one label on the x-axis with 0-9 and another one 0-16 to show separately. It works perfectly fine for the y-axis but not for the x-axis.
Now for the code: here I create an initial state
let state = {
labels: [],
datasets: [
{
label: 'ignore',
fill: false,
lineTension: 0,
backgroundColor: 'rgba(109, 24, 172, 1)',
borderColor: 'rgba(109, 24, 172, 1)',
borderWidth: 0.1,
pointRadius: 0.2,
data: []
}, {
label: 'ignore1',
fill: false,
lineTension: 0,
backgroundColor: 'rgba(0, 250, 255, 1)',
borderColor: 'rgba(0, 250, 255, 1)',
borderWidth: 0.1,
pointRadius: 0.2,
data: []
}
]
};
Here is my first function with 9 datapoints:
function adddataset(){
let lineChart = Chart.instances[0];
const data=lineChart.data;
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: 'rgba(109, 24, 172, 1)',
borderColor: 'rgba(0, 250, 255, 1)',
data: [65, 59, 80, 81, 56, 55, 40],
yAxisID: 'By',
xAxisID: 'Bx',
};
lineChart.data.datasets.push(newDataset);
lineChart.update();
}
here is my second function to add a second dataset:
function adddataset1(){
let lineChart = Chart.instances[0];
const data=lineChart.data;
const newDataset = {
label: 'Dataset ' + (data.datasets.length + 1),
backgroundColor: 'rgba(rgba(109, 24, 172, 1)',
borderColor: 'rgba(109, 24, 172, 1)',
data: [100,30,50,60,20,30,60,100,34,3456,6,5,4,3,5,545],
yAxisID: 'Cy',
xAxisID: 'Cx',
};
lineChart.data.datasets.push(newDataset);
lineChart.update();
}
now here is my class where I initialize the LineGraph and have 2 buttons which call the functions
class About extends React.Component {
render() {
return (
<body>
<main>
Graph
<div className='Graph'>
<div style={{ height: 500 }}>
<Line
id="mychart"
data={state}
options={{
title: {
display: true,
text: 'Average Rainfall per month',
fontSize: 20
},
legend: {
display: true,
position: 'right'
},
maintainAspectRatio: false,
responsive: true
}}
/>
</div>
</div>
<button onClick={adddataset1}>
Button1
</button>
<button onClick={adddataset}>
Button2
</button>
</main>
</body>
);
}
}
export default About;
