Musson Industrial’s Embr-Charts Module

[nminchin]

@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)

[Samuel_Sueur]

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.

[bmusson]

@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

Here's the current docs for scriptable options: Scriptable Options | Musson Industrial 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…

[MMaynard]

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

[bmusson]

@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?

// 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)
})

}

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

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

}

[nminchin]

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)?

[bmusson]

Sure, here we go:

Embr-Charts Solutions Wiki

This topic has been created in wiki mode for collaborative generation of solutions to particular problems related to Musson Industrial's 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…

[nminchin]

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:

[David_Stone]

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?

[nminchin]

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

[David_Stone]

Sounds a lot like the issue I am having.

[nader.chinichian]

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.

[nminchin]

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

[bmusson]

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

[DSI600]

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?

[bmusson]

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

[DSI600]

Yes - Embr-Charts-Ignition83-3.1.0.modl

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

[ryan.white]

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

[DSI600]

No there is no extra logs on those errors.

[bmusson]

What version of Ignition?

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