Getting Cannot read properties of undefined (reading 'xAxisID') when trying to create a basic line chart

[TWDBrob]

I am trying to create a line chart in Chart JS 4.5.1. It's complaining that I didn't define xAxisID (I don't) in the dataset I am passing in. AFAICT, though, defining it should not be necessary and it should use the default value of "x".

Here's the error:

core.config.js:63 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'xAxisID')
    at core.config.js:63:58
    at Array.filter (<anonymous>)
    at retrieveAxisFromDatasets (core.config.js:63:42)
    at core.config.js:86:47
    at Array.forEach (<anonymous>)
    at mergeScaleConfig (core.config.js:78:29)
    at initOptions (core.config.js:119:20)
    at initConfig (core.config.js:133:3)
    at new Config (core.config.js:160:20)
    at new Chart (core.controller.js:124:34)

My config for the chart looks like

	const getServiceChartData = () =>
		servicesReport['report-data'][0].map((dataSet: { resourceURI: string; data: number[] }) => {
			if (isServiceSelected(dataSet.resourceURI)) {
				return {
					data: dataSet.data,
					label: prettyServiceName(dataSet.resourceURI),
					borderWidth: 1
				};
			}
		});
...
{
			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
			}
		};

Here's the function in the ChartJS code where it pukes:

function retrieveAxisFromDatasets(id, config) {
  if (config.data && config.data.datasets) {
    const boundDs = config.data.datasets.filter((d) => d.xAxisID === id || d.yAxisID === id);
    if (boundDs.length) {
      return getAxisFromDataset(id, 'x', boundDs[0]) || getAxisFromDataset(id, 'y', boundDs[0]);
    }
  }
  return {};
}

It fails when trying to compare d.xAxisID === id. I stepped through the code and it doesn't set a default value for xAxisID on the datasets. Is xAxisID supposed to be defined on the dataset?

[sunnypatell]

@TWDBrob the issue isn't xAxisID, it's your getServiceChartData() function returning undefined elements in the datasets array.

your .map() only returns a dataset object when isServiceSelected() is true. when it's false, there's no explicit return, so the array slot is undefined. chart.js then iterates the datasets and tries to read .xAxisID on undefined:

// your map produces: [{ data, label, ... }, undefined, { data, label, ... }, undefined]
config.data.datasets.filter((d) => d.xAxisID === id)
//                                  ^ crashes on undefined element

fix: use .filter() before .map() so you never have undefined entries:

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

or if you want to keep the single-pass approach, use .flatMap():

const getServiceChartData = () =>
  servicesReport['report-data'][0].flatMap((dataSet) =>
    isServiceSelected(dataSet.resourceURI)
      ? [{ data: dataSet.data, label: prettyServiceName(dataSet.resourceURI), borderWidth: 1 }]
      : []
  );

you don't need to set xAxisID manually. chart.js defaults it to "x" but the default is applied during dataset initialization, which never runs because it crashes in retrieveAxisFromDatasets first (called during config merging, before datasets are fully resolved).

[TWDBrob]

Thank you very much. It's always something stupid like that, donchaknow.