# 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:** 20\
**Page:** 15

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 25, 2025, 4:44am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/283 "2025-09-25T04:44:46Z")

</div>

> [@bmusson](#):
>
> `formatter: (value, context) => return value.y`

(for ApexCharts) I think this should be:  
`formatter: (value, context) => value`

I couldn't get it working with `value.y` or with the `return` (, and `context` is optional)

---

<div class="post-metadata">

**Author:** ![Samuel\_Sueur](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@Samuel\_Sueur](https://forum.inductiveautomation.com/u/Samuel_Sueur)\
**Post date:** [September 25, 2025, 8:18am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/284 "2025-09-25T08:18:51Z")

</div>

Pretty sure if you include the `return` keyword in an arrow function in Javascript, you have to add brackets.

`formatter: (value, context) => { return value.y }`

If you don’t want to use brackets, then don’t use the return keyword 🙂

Obviously, as soon as you want to do more complex stuff, such as a multi-line functions or stuff like that, brackets are mandatory.

---

<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:** [September 25, 2025, 12:56pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/285 "2025-09-25T12:56:33Z")

</div>

> [@nminchin](#):
>
> I couldn't get it working with `value.y` or with the `return` (, and `context` is optional)

100%

That linked post was from before the rewrite of the scriptable options parser:

> [@Musson Industrial’s Embr-Charts Module](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/81):
>
> Here's the current docs for scriptable options: [Scriptable Options | Musson Industrial](https://docs.mussonindustrial.com/ignition/embr-charts/components/chart-js/scriptable-options) It is JavaScript, but currently the return semantics are kinda messed up. You must provide an arrow function, but currently (v1.x.x), the converted functions do not support direct expressions. The return keyword must be used. For example, in the tick.callback earlier you had to use the return keyword, even though the function should be able to run as an expression. I am planning to fix this in 2.0, and it…

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [September 30, 2025, 2:41pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/286 "2025-09-30T14:41:41Z")

</div>

Kind of a weird situation that I am just seeking some guidance on.

We allow the users to choose between light and dark themes.

The only thing I can’t seem to nail down is how to cause the charts to re-render in order to load the CSS assigned using the “var(--label)” settings?

ChartJS ver 3.0.0

---

<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:** [September 30, 2025, 3:57pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/287 "2025-09-30T15:57:38Z")

</div>

> [@MMaynard](#):
>
> The only thing I can’t seem to nail down is how to cause the charts to re-render in order to load the CSS assigned using the “var(--label)” settings?

First, `3.1.0` has improvements related to how the chart references CSS properties from it's parent, so you should check that out.

Secondly, yeah using CSS variables with Chart.js is a pain because it's canvas based.  
Chart.js has no idea that it needs to re-render when its computed style changes.

You can work around it with a custom plugin. This currently needs to be applied per-chart, unfortunately.

The idea is:

1. When installed, add a mutation observer that listens for stylesheet changes.
2. When a stylesheet change is detected, the current theme is written to a property on the chart (the specific property doesn't matter, it only matters that it's in the `props` tree).
3. The `props` tree change will cause the chart to re-evaluate the CSS variables and re-render.
4. When the plugin is uninstalled (on chart destruction), disconnect the listener.

I'm very open to suggestions on how to improve this, it's a PITA. Does anyone know a way to listen to changes of an element's computed style that doesn't involve polling?

```javascript
// plugins[0].install
(chart) => { 

if (this._theme_observer) {
  this._theme_observer.disconnect()
}

const onCssChange = (callback) => {
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (
          node.tagName === "LINK" &&
          node.rel === "stylesheet"
        ) {
          callback(node);
        }
      }
    }
  })

  observer.observe(document.head, { childList: true })
  return observer
}

this._theme_observer = onCssChange((element) => {
  this.store.props.write('theme', element.href)
})

}

```

```javascript
// plugins[0].uninstall
(chart) => { 

if (this._theme_observer) {
  this._theme_observer.disconnect()
}

}

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 8, 2025, 4:44am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/288 "2025-10-08T04:44:32Z")

</div>

Hey @bmusson, I feel like we should make a wiki for chart.js like for Phil's Integration Toolkit, containing examples of how to do things with an evolving contents list at the top. Did you want to start the topic and I can fill it in if you want (I'll just copy paste Phil's and reword)?

---

<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 8, 2025, 5:31am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/289 "2025-10-08T05:31:49Z")

</div>

Sure, here we go:

> [@Embr-Charts Solutions Wiki](https://forum.inductiveautomation.com/t/embr-charts-solutions-wiki/111260):
>
> This topic has been created in wiki mode for collaborative generation of solutions to particular problems related to [Musson Industrial's](https://mussonindustrial.com/) [Embr-Charts](https://docs.mussonindustrial.com/ignition/embr-charts) module. To keep this neat, please follow these guidelines: New problems seeking solutions should be posted as replies, and the discussion of that problem kept within that comment, wiki-style. A one-line summary should be added to this topic starter, with an embedded link (not on its own line). After posting, be sure to convert the comment to o…

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 13, 2025, 7:32am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/290 "2025-10-13T07:32:36Z")

</div>

Hey @bmusson, a colleague is having an issue with the chart.js component where the chart doesn't render on page load sometimes. What diag info would you need to diagnose?

e.g. the white space here is supposed to show a chart.js chart:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/a/fa8a0d247acd2bcb4beb95dc3cadbb0e1282d42c.png)

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [October 13, 2025, 7:54am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/291 "2025-10-13T07:54:51Z")

</div>

I actually just found this issue as well on a chart the other day, does yours render if you navigate out then back to the page?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 13, 2025, 7:57am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/292 "2025-10-13T07:57:13Z")

</div>

I think so, or I think if you resize the page as well. I'd have to check with my colleague

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [October 13, 2025, 7:57am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/293 "2025-10-13T07:57:44Z")

</div>

Sounds a lot like the issue I am having.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [October 13, 2025, 11:20am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/294 "2025-10-13T11:20:05Z")

</div>

Press F12 on chrome and checkout console for the error.

This kind of problems mostly happen when user use JavaScript code in the props of the chart.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 13, 2025, 11:35am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/295 "2025-10-13T11:35:47Z")

</div>

Ah yes, i'll have a look tomorrow, cheers!

---

<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 13, 2025, 12:29pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/296 "2025-10-13T12:29:49Z")

</div>

Yeah, checking the console out for error messages is the first step.

---

<div class="post-metadata">

**Author:** ![DSI600](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@DSI600](https://forum.inductiveautomation.com/u/DSI600)\
**Post date:** [October 13, 2025, 6:38pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/297 "2025-10-13T18:38:46Z")

</div>

I am having an issue with bringing the module in and having it enabled in 8.3

It installs and after the gateway restart the status is “Inactive” When I try and enable I get a message. “Module Failed to Enable“

In the gateway logs I get the follow messages

**ERROR**

ModuleInstallRoutes

13Oct2025 13:36:17

Error enabling module `com.mussonindustrial.embr.charts`

**WARN**

ModuleManager

13Oct2025 13:36:17

Module 'com.mussonindustrial.embr.charts' cannot be enabled

Anyone else have this issue with 8.3.0?

---

<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 13, 2025, 6:43pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/298 "2025-10-13T18:43:08Z")

</div>

Might be a silly question, but are you installing the `8.3` version?

---

<div class="post-metadata">

**Author:** ![DSI600](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@DSI600](https://forum.inductiveautomation.com/u/DSI600)\
**Post date:** [October 13, 2025, 6:52pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/299 "2025-10-13T18:52:41Z")

</div>

Yes - Embr-Charts-Ignition83-3.1.0.modl

This is in a Docker Container - if that matters at all?

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [October 13, 2025, 6:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/300 "2025-10-13T18:53:55Z")

</div>

Do either of the errors in your log have a stack trace attached?

---

<div class="post-metadata">

**Author:** ![DSI600](https://avatars.discourse-cdn.com/v4/letter/d/ad7895/32.png) [@DSI600](https://forum.inductiveautomation.com/u/DSI600)\
**Post date:** [October 13, 2025, 6:55pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/301 "2025-10-13T18:55:34Z")

</div>

No there is no extra logs on those errors.

![image](https://us1.discourse-cdn.com/inductiveautomation/optimized/3X/0/1/01921187feedf0b358a350d2b3f69224b427a779_2_690x20.png)

---

<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 13, 2025, 7:02pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/302 "2025-10-13T19:02:47Z")

</div>

What version of Ignition?

I've just tested with a new `8.3.0` docker container and things appear to be working.

[Previous page](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618.md?page=14)

[Next page](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618.md?page=16)