Not sure why I had to register CategoryScale etc.

[TWDBrob]

I am creating a chart like this

	const getServiceChartData = () =>
		servicesReport['report-data'][0]
			.filter((dataSet: { resourceURI: string; data: number[] }) =>
				isServiceSelected(dataSet.resourceURI)
			)
			.map((dataSet: { resourceURI: string; data: number[] }) => {
				return {
					data: dataSet.data,
					label: prettyServiceName(dataSet.resourceURI),
					borderWidth: 1
				};
			});
...

		const config: ChartConfiguration = {
			type: 'line',
			data: {
				labels,
				datasets: getServiceChartData()
			},
			options: {
				scales: {
					x: {
						title: {
							display: true,
							text: 'Date'
						}
					},
					y: {
						title: {
							display: true,
							text: 'Number of Service Requests'
						}
					}
				},
				plugins: {
					legend: {
						position: 'right'
					}
				},
				responsive: false
			}
		};

I was then invoking new Chart(canvas, config) and kept getting error until I added the following line:

Chart.register(CategoryScale, LinearScale, LineController, PointElement, LineElement);

I am not clear on what I did to require that. AFAIK, it's not generally required (it's not in the Getting Started section of the docs, anyway). Does anyone see what I might have left out?

Thanks

[manimovassagh]

This is by design in Chart.js v3+. The library moved to a tree-shakable architecture, which means components are no longer auto-registered globally.

In v2, everything was bundled and registered automatically. In v3/v4, you have two options:

Option 1: Register only what you need (your current approach)

import { Chart, CategoryScale, LinearScale, LineController, PointElement, LineElement } from "chart.js";
Chart.register(CategoryScale, LinearScale, LineController, PointElement, LineElement);

Option 2: Register everything at once

import Chart from "chart.js/auto";

The chart.js/auto import registers all controllers, scales, and elements for you — which is essentially the v2 behavior. It is simpler but means you ship a larger bundle since tree-shaking cannot remove unused chart types.

The Getting Started docs do mention this, but it is easy to miss. Look for the section on "Integration" — it explains the difference between the two import styles.

So nothing is wrong with your setup. You just need to explicitly register the components your chart uses when importing from chart.js (the non-auto entry point). If you want the "it just works" experience, switch to chart.js/auto.