I am currently working on an analytic dashboard, and I have chosen Chartjs to visualize the graphs, everything works fine except I do not seem to know how to set the MIN and MAX date of the chartjs time object dynamically. It is been hardcoded like this:
const config = {
type: "bar",
data: {
datasets: [
{
label: "base",
data: monthly_data,
backgroundColor: ["rgba(255, 99, 132, 0.2)"],
borderColor: ["rgba(255, 99, 132, 1)"],
borderWidth: 1,
minBarLength: 7,
parsing: {
xAxisKey: "x",
yAxisKey: "base",
},
},
{
label: "Case",
data: monthly_data,
backgroundColor: ["rgba(54, 162, 235, 0.2)"],
borderColor: ["rgba(54, 162, 235, 1)"],
borderWidth: 1,
minBarLength: 7,
parsing: {
xAxisKey: "x",
yAxisKey: "case",
},
},
{
label: "Standard",
data: monthly_data,
backgroundColor: ["rgba(255, 206, 86, 0.2)"],
borderColor: ["rgba(255, 206, 86, 1)"],
borderWidth: 1,
minBarLength: 7,
parsing: {
xAxisKey: "x",
yAxisKey: "standard",
},
},
],
},
options: {
scales: {
x: {
type: "time",
min: "2021-03-01",
max: "2022-03-31",
time: {
unit: "month",
},
},
},
},
};
Can I call a function that can set this dynamically like for example in a monthly view the chart should show 12 months back?
you can just pass a function to the min and max that calculates the min and max for you like so:
options: {
scales: {
x: {
type: 'time',
min: () => {
return calculateMin()
}
}
}
}