search

sgratzl / chartjs-chart-graph

Chart.js Graph-like Charts (tree, force directed)
https://www.sgratzl.com/chartjs-chart-graph/
MIT License
180 stars 23 forks source link

EdgeLine `options` is undefined when re-rendering. #126

Open benmusson opened 21 hours ago

benmusson commented 21 hours ago

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: https://github.com/sgratzl/chartjs-chart-graph/blob/194f833e66eb1e8f1bb999ca160b6cef65eb3a26/src/elements/EdgeLine.ts#L82

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 20241020_134348

Context

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 commented 21 hours ago

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

benmusson commented 20 hours ago

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