Musson Industrial’s Embr-Charts Module

3rd Party Modules
283

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

284

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 :slight_smile:

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

2 Likes
285

100%

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

1 Like
286

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

287

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

}
288

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

3 Likes
289

Sure, here we go:

2 Likes