Currently I have 2 points in my line chart’s dataset as seen in the screenshot.
Now I want to add 4th dataset like in the screenshot, its the non-linear dataset.
But 4th non-linear dataset is a calculated dataset and it has around ~200-400 points.
But the thing is, first datasets (2 point datasets) are get cut-off because I have only 2 points.
What I would like to achieve is, I want to spread 2 points dataset across the chart and have 2 ticks on x-axis which is first and end date.
here is example; https://stackblitz.com/edit/vitejs-vite-utbcv1?file=src%2FLineChart.tsx
this is currently an example;
and this is what I want to achieve (non-linear is the big dataset)
Your data doesn’t have to be arrays of values, but can also be array of {x, y} pairs. In order to see the original labels (months), you can use a ticks callback.
const ctx = document.getElementById('myChart').getContext('2d');
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const demo = [20, 50, 22, 50, 65, 59, 80, 81, 56, 55, 20, 40]
const indexedData = demo.map((value, index) => ({
x: index,
y: value
}));
const data = {
labels: labels,
datasets: [{
label: '2-point Series',
data: [{
x: 0,
y: 50
}, {
x: demo.length - 1,
y: 75
}],
borderColor: 'rgb(192, 18, 75)',
tension: 0.4,
},
{
label: '200-400 point Series',
data: indexedData,
borderColor: 'rgb(75, 192, 10)',
tension: 0.4,
}
]
};
new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
x: {
type: 'linear',
ticks: {
callback: function(value, index, values) {
return labels[index];
},
}
},
y: {
min: 0,
beginAtZero: true,
max: 100,
}
},
plugins: {
legend: {
position: 'top',
},
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart"></canvas>3