EdgeLine options is undefined when re-rendering.

[benmusson]

The chart will render once, but when I do anything that causes the chart to render (for instance, update the data props), I get an error message in the browser console and the chart fails to draw.

Error Message: Uncaught TypeError: Cannot read properties of undefined (reading 'borderCapStyle')

Full Error Message:

Uncaught TypeError: Cannot read properties of undefined (reading 'borderCapStyle')
    at Gn.draw (embr-charts-client.j…9444891635:39:51697)
    at embr-charts-client.j…9444891635:39:57945
    at Array.forEach (<anonymous>)
    at pr.draw (embr-charts-client.j…9444891635:39:57927)
    at Ki._drawDataset (embr-charts-client.j…9444891635:16:88866)
    at Ki._drawDatasets (embr-charts-client.j…9444891635:16:88456)
    at Ki.draw (embr-charts-client.j…9444891635:16:87985)
    at embr-charts-client.j…729444891635:16:658
    at Map.forEach (<anonymous>)
    at ev._update (embr-charts-client.j…729444891635:16:438)

Source Location:

chartjs-chart-graph/src/elements/EdgeLine.ts

Line 82 in 194f833

ctx.lineCap = options.borderCapStyle;

To Reproduce

I don't have a codepen yet, can try to put one together if it is helpful.

Expected behavior

I am using the react-chartjs-2 wrapper. If I enable the redraw option (which destroys/rebuilds the chart on every render) no errors occur.

I should not need to use the redraw option.

Screenshots

Context

• Version: 4.3.1
• Browser: Chrome 129.0.6668.101

Additional context

There are differences in how the default line element and EdgeLine get their options references in the draw function. I do not understand why options would be undefined on subsequent renders, but I think this explains the behavior difference.

// Default `Chart.js` line element
const options = this.options || {};

// EdgeLine
const { options } = this;

[sgratzl]

please provide a simple reproducible example without react to rule out that the react wrapper causes it.

[benmusson]

Here's a simple example:
https://codepen.io/benmusson/pen/bGXrRGL

I am intentionally creating a new data object on each button press, because this is representative of my real use case.

EDIT: Bumped to Chartjs v4 and chartjs-chart-graph v4