I want to create a single chart using ChartJS that displays two different timeseries datasets - the past 6 months of a stock's price and the forecast for the next month.
Although I have stored both the historical data and the forecast in separate tables in Postgres, I am unsure of how to configure the chart to show both the historical price and the forecast simultaneously.
Here is the current setup:
myChart = new Chart(canvasRef.current, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: 'My Chart',
data: data.map((d) => d.close),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
tension: 0.4
},
{
label: '30-day forecast',
data: data_pred.map((d) => d.mean),
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
tension: 0.4
}
]
},
options: {
scales: {
x: [{
type: 'timeseries'
}]
}
}
})
Currently, only the forecast is being plotted from the data_pred table, causing interference with the historical price line. I am seeking advice on how to display both datasets on the X-axis using the dates stored as datetime objects in my database.
Thank you!