# Musson Industrial’s Embr-Charts Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618 "2024-06-10T12:53:46Z")\
**Posts on this page:** 1\
**Showing post:** 55

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 20, 2024, 8:25pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/55 "2024-10-20T20:25:49Z")

</div>

Alright, good news and bad news.

**Bad News 🙁**  
There is a bug in the `chartjs-chart-graph` plugin. The chart only renders once, and any subsequent renders throw errors. I've submitted an issue to the library author, you can track it here. I believe it's a simple fix.

> <https://github.com/sgratzl/chartjs-chart-graph/issues/126>
>
> The chart will render once, but when I do anything that causes the chart to rend…er (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\`\](https://github.com/reactchartjs/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\](https://github.com/user-attachments/assets/13b2236f-b235-45f1-ab2f-4ed59fb75719)
> 
> 
> \*\*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 no understand why \`options\` would be undefined on subsequent renders, but I think this explains the behavior difference.
> 
> \`\`\`js
> // Default \`Chart.js\` line element
> const options = this.options || {};
> 
> // EdgeLine
> const { options } = this;
> \`\`\`

**Good News 😁**

1. The issue can be side-stepped by enabling the newly added `redraw` property. When `redraw` is enabled, the chart will be completely destroyed/recreated on each render. Bad for performance but useful for debugging.
2. This issue pointed out some extra re-rendering that was happening, it's been solved with some memoization. There should be a performance boost here.
3. The components for the `tree` chart weren't registered, so those were never working. `TreeChart` and `TreeController` are now registered correctly.

I will publish a new version once a fix is available.

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)._