Chartjs-Uncaught TypeError: Cannot read properties of null (reading 'labels')

by

2👍

This is because you pass null to the Line component.

You either need to init the data with empty state or conditionally render the Line.

Initial state:

const [chartData, setChartData] = useState({
    labels: [],
    datasets: [{
        data: []
    }]
});

Conditionally render:

{chartData !== null && <Line data={chartData}/>}

1👍

Not familiar with that chart library, but my guess is that it’s erroring out before your async data is returned from the API call. I would try creating valid uninitialized data to feed to the Line component on the initial render, or simply prevent the chart from loading until the data is returned. You can check if that’s your issue with something like:

{chartData && <Line
      data = {chartData}
      />
}

Leave a comment