Musson Industrial’s Embr-Charts Module

[bmusson]

Release Notice

Embr v8.1 - 2025.10.31
Embr v8.3 - 2025.10.31

Major Changes

• fc47d7e: Modules no longer include kotlin-stdlib.
  • All modules now rely on the Kotlin standard library provided with Ignition.

Minor Changes

• 6e2cb4c: Expose chart component's ComponentDelegate.
  • Provide's access through this.delegate in all props callback functions.
  • Importantly, this allows access to the underlying charting component through this.delegate.proxy.ref.

Patch Changes

• Updated dependencies [f36eaee]
• Updated dependencies [6e2cb4c]
  • @embr-jvm/core-common@0.7.1
  • @embr-modules/charts-web@4.0.0
  • @embr-jvm/core-designer@0.7.1

[MMaynard]

@bmusson

• Provide's access through this.delegate in all props callback functions.
• Importantly, this allows access to the underlying charting component through this.delegate.proxy.ref.

Would this expose chart.render() to being called?

If so, example please

[Aiasa21]

Hello everybody, one quick question.. Do I have to reboot the gateway during the module installation?

[bmusson]

8.1 = No
8.3 = Yes

[Aiasa21]

I’m playing with the Module and I have to say that its speed is really amazing.

I need your help to understand how to manage the datalabels, at the moment they are like the picture..

I try to add and manage the formatter but actually I don’t understand how it should be use in this case.

Thanks for the help.

EDIT: reading some previous answer I add the property:

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

and now it works good

[haidernandla]

@bmusson

Embr-Charts

Musson Industrial is excited to announce the release of embr-charts, an Ignition module that adds a collection of enhanced Perspective charting components.

---

Chart.js Component

This initial release contains a Chart.js component.

https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png

Chart.js renders chart elements on an HTML5 canvas unlike other D3.js-based charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations from the helping visual apps from the happymod ios that would otherwise require thousands of SVG nodes in the DOM tree.

The following video demonstrates the performance of panning and zooming through 100,000 data points:

The Chart.js component supports the following chart types:

1. bar
2. boxplot
3. bubble
4. dendrogram
5. doughnut
6. euler
7. forceDirectedGraph
8. funnel
9. graph
10. line
11. matrix
12. pcp
13. pie
14. polarArea
15. radar
16. scatter
17. sankey
18. tree
19. treemap
20. venn
21. violin
22. wordCloud

Details on how to configure the component can be found on the Chart.js documentation site.
All configurations supported by Chart.js are supported on the Perspective component.

Notable Features

• CSS Custom Properties
  • The Perspective component supports CSS Custom Properties for all property values.
• Scriptable Options
  • Chart.js scriptable options are supported.
  • Any component property value containing an arrow function () => statement will be converted into a JavaScript function that is called at render-time.
• Plugin Support
  • Several of the most feature-rich community plugins are included.

how can we change the radar chart background area?

[bmusson]

ApexCharts or Chart.js component?

[nminchin]

I’m guessing chart.js given the quote, but for either, I would ask AI as these are well supported 3rd party libraries. Otherwise, just look at their documentation

[brandon1]

@nminchin

I would ask AI

I would second this. I had no idea how to change certain things in the radar chart, and I asked ChatGPT telling it I was using Ignition Perspective then pasted my parameters. It tracked down the problem without too many prompts. I also attached a screenshot of the output in the prompt

[liam1]

@bmusson
I’m experiencing an issue on the Chartjs (3.0.1 (b2025062601) , Ignition 8.1)

I’m having trouble configuring a horizontal bar chart.

Watching online videos it seems pretty staightforward, change the indexAxis from x to y , but when I do so the bars disappear.

Am I doing something wrong?

Current Chart config:

"type": "embr.chart.chart-js",
"version": 0,
"props": {
  "type": "bar",
  "data": {
    "labels": [
      "Planned Production Downtime",
      "Planned Maintenance",
      "Stock Take",
      "Cleanouts & Line Flush",
      "Breakdowns Mechanical",
      "Bin Space Outloading",
      "Bind Space Pre Pelleting",
      "No Raw Materials",
      "Chokes",
      "Labour",
      "PLC/Control System",
      "Utility Failure (Eletrical and Water)"
    ],
    "datasets": [
      {
        "data": [
          1800,
          0,
          0,
          1180,
          471,
          0,
          0,
          135,
          200,
          0,
          0,
          300
        ],
        "label": "Dataset 1"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {
        "type": "category"
      },
      "y": {
        "type": "linear"
      }
    },
    "indexAxis": "y"
  }
},
"meta": {
  "name": "Chartjs"
},
"position": {
  "grow": 1,
  "basis": "300px"
},
"custom": {}

}

[MMaynard]

Have you tried swapping x and y types?

Make x linear, and y Category?

[liam1]

Yes , this worked thank you.