xAxis type time gives error

[erkanisuf]

I am using Chartjs version 3.7 and react chart-js version 4.0 . I am trying to migrate my charts from chartjs 2.9.4 and and react chart-js 2.8.0. I have a chart that uses xAxes as type time.

Options object looks like this:
{
type: 'line',
responsive: true,
animation: {
duration: 0
},
title: {
display: !!labelText,
text: labelText
},
maintainAspectRatio: maintainRatio,
layout: {
padding: {
right: 10
}
},
scales: {
x: {
type: 'time',
display: true,
position: "bottom",
time: {
displayFormats: {
"year": "YYYY"
},
tooltipFormat: "YYYY",
unit: "year"
}
},
y: {
id: "line-stacked",
scaleLabel: {
display: true,
labelString: labelName
},
stacked: true,
ticks: {
beginAtZero: true,
callback: function (label, index, labels) {
return abbreviate(label, "");
}
}
},
},
legend: {
display: true
},
tooltips: {
enabled: true,
mode: "x",
callbacks: unit ? this.createChartLabelCallBack(unit) : this.createChartLabelCallBack(),
titleFontSize: 14,
bodyFontSize: 18,
intersect: false,
displayColors: true
},
hover: {
mode: "nearest",
intersect: true
},
plugins: {
datalabels: {
display: false,
color:
"black"
}
}
};
}

If i comment out the x aXes it works but i want to use the type:"time" feature.
The given error is this:
Error: "time" is not a registered scale. at Registry._get (chart.esm.js?9b4a:4892) at Registry.getScale (chart.esm.js?9b4a:4847) at eval (chart.esm.js?9b4a:5518) at each (helpers.segment.js?dd3d:105) at Chart.buildOrUpdateScales (chart.esm.js?9b4a:5505) at Chart._updateScales (chart.esm.js?9b4a:5652) at Chart.update (chart.esm.js?9b4a:5613) at new Chart (chart.esm.js?9b4a:5402) at renderChart (index.modern.js?a42a:82) at eval (index.modern.js?a42a:136) at commitHookEffectListMount (react-dom.development.js?61bb:19731) at commitPassiveHookEffects (react-dom.development.js?61bb:19769) at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188) at HTMLUnknownElement.sentryWrapped (helpers.js?bf37:73) at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237) at invokeGuardedCallback (react-dom.development.js?61bb:292) at flushPassiveEffectsImpl (react-dom.development.js?61bb:22853) at unstable_runWithPriority (scheduler.development.js?3069:653) at runWithPriority$1 (react-dom.development.js?61bb:11039) at flushPassiveEffects (react-dom.development.js?61bb:22820) at eval (react-dom.development.js?61bb:22699) at workLoop (scheduler.development.js?3069:597) at flushWork (scheduler.development.js?3069:552) at MessagePort.performWorkUntilDeadline (scheduler.development.js?3069:164)

[erkanisuf]

Found solution:

import {
	Chart as ChartJS,
	registerables
} from 'chart.js';

and then:

ChartJS.register(
	...registerables
);

Make sure to use the spread "..." operator.

[LeeLenaleee]

https://www.chartjs.org/docs/3.7.0/getting-started/integration.html#bundlers-webpack-rollup-etc
https://www.chartjs.org/docs/3.7.0/getting-started/v3-migration.html