# 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:** 1

<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:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/1 "2024-06-10T12:53:46Z")

</div>

# 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](https://www.chartjs.org/) component.

[https://github.com/mussonindustrial/embr/raw/main/modules/embr-charts/docs/examples/chart-js.png](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 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](https://www.chartjs.org/docs/latest/).  
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.

## Download

Full documentation and the latest release is available [here](https://github.com/mussonindustrial/embr/tree/main/modules/embr-charts).

> **[embr-charts · Releases · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases?q=embr-charts&expanded=true)**
>
> 🔥 Open-source modules for Ignition by Inductive Automation. The home of Charts, Thermo, Periscope, and more. - mussonindustrial/embr

* * *

## Sponsorship

If you benefit from this module for commercial use, we ask you to consider sponsoring our efforts through [GitHub sponsors](https://github.com/sponsors/mussonindustrial). Your support will allow us to continue development of open-source modules and tools that benefit the entire community (plus there are some bonuses for sponsors 🙂).

---

<div class="post-metadata">

**Author:** ![Pat\_Cunningham](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pat_cunningham/32/57710_2.png) [@Pat\_Cunningham](https://forum.inductiveautomation.com/u/Pat_Cunningham)\
**Post date:** [July 24, 2024, 6:33pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/2 "2024-07-24T18:33:58Z")

</div>

the link in the picture is broken

![Screenshot 2024-07-24 143313](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/72b786218e07808437386c5a59f4fdac9ed92d13.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:** [July 24, 2024, 8:12pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/3 "2024-07-24T20:12:14Z")

</div>

Fixed, thanks.

---

<div class="post-metadata">

**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\
**Post date:** [July 30, 2024, 4:32pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/4 "2024-07-30T16:32:58Z")

</div>

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

We are on version 8.1.37. Will an earlier release of embr-charts work with 8.1.37?

---

<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:** [July 30, 2024, 4:49pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/5 "2024-07-30T16:49:19Z")

</div>

No.  
But I can look at relaxing the version requirement; I don’t think there’s any reason the version requirement has to be where it’s at.

---

<div class="post-metadata">

**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\
**Post date:** [July 30, 2024, 4:55pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/6 "2024-07-30T16:55:29Z")

</div>

It is difficult to upgrade our environment (1-2 times a year), so that will be great and much appreciated! We have been struggling with the XY Chart consuming too much memory, so am hoping embr-charts performs better.

---

<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:** [August 5, 2024, 3:30am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/7 "2024-08-05T03:30:50Z")

</div>

Embr-Charts-1.3.0 has been released, and the gateway version requirement has been relaxed to 8.1.33+ (Java 17).

[Download Link (1.3.0)](https://github.com/mussonindustrial/embr/releases/download/%40embr-modules%2Fcharts%401.3.0/modules.zip)  
[Download Link (Latest)](https://github.com/mussonindustrial/embr/releases/latest/download/modules.zip)

I've also fixed up the build/release cycle on GitHub, so that:

1. Patch notes reflect _only_ the changes to a specific module or its dependent libraries.
2. Auto-magic version bumping and releasing powered by [changesets](https://github.com/changesets/changesets).

I'd like to also get this published to the Third-Party Module Showcase, but the link I was given to download the module showcase project no longer works. Can someone DM me a link?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [August 5, 2024, 1:58pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/8 "2024-08-05T13:58:23Z")

</div>

> [@bmusson](#):
>
> Can someone DM me a link?

> **[Ignition Third-Party Module Showcase](https://inductiveautomation.com/moduleshowcase/developer/)**
>
> Easily extend Ignition's core functionality with Third-Party Modules. The Module Showcase is a great place to find a solution that best meets your needs.

Looks like you apply on this page?

---

<div class="post-metadata">

**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\
**Post date:** [August 8, 2024, 2:17pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/9 "2024-08-08T14:17:23Z")

</div>

How can the "Good Units Running Total" secondary y-axis be moved to the right side of the graph? I read about the Axis Position 'right' in the Chart.js documentation, but have not found where to apply it within the Designer.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/7/370ab7dd2495e8a91c8518348b90760ba8e66fe4.png)

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [August 8, 2024, 3:20pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/10 "2024-08-08T15:20:39Z")

</div>

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

Hello, I am trying to figure out how to show the arc backgroundColor that does not account for my data:0 value.

Would like the gray backgroundColor to show for the remainder value of 100-x. I have even tried a work around by creating a second data point but property editor only allows me to add one backgroundColor per dataset.

Any help is greatly appreciated!

---

<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:** [August 8, 2024, 3:38pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/11 "2024-08-08T15:38:09Z")

</div>

> [@justice5555](#):
>
> How can the "Good Units Running Total" secondary y-axis be moved to the right side of the graph? I read about the Axis Position 'right' in the Chart.js documentation, but have not found where to apply it within the Designer.

You can apply this under `options.scales[your_scale].position = right`.

This property is currently missing from the designer schema, I think because it supports a bunch of different types of options that I didn't know how to model in the json schema. Probably would be best to at least just suggest the simple positional options.

> <https://github.com/mussonindustrial/embr/issues/166>
>
> The designer schema does not contain suggestions for \`options.scales\[id\].positio…n\`.
> 
> https://github.com/mussonindustrial/embr/blob/739afb0db7275b8acf94316d6eb9fc7acf38cb12/modules/charts/common/src/main/resources/chart-js.props.json#L2115C1-L2186C11

---

<div class="post-metadata">

**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\
**Post date:** [August 8, 2024, 3:48pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/12 "2024-08-08T15:48:07Z")

</div>

That did it, thanks much!

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/85672914cee276c897318e44bc68db5dc001264e.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:** [August 8, 2024, 3:55pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/13 "2024-08-08T15:55:39Z")

</div>

> [@dcan87](#):
>
> Would like the gray backgroundColor to show for the remainder value of 100-x. I have even tried a work around by creating a second data point but property editor only allows me to add one backgroundColor per dataset.

You'll have to add a second data point, because of how the doughnut chart works; it graphs the relative percent's of each item in the data.

The other trick is that you can make `backgroundColor` an array and provide multiple colors. You won't get a cool color picker though so you'll have to provide the values yourself.

 ![20240808_114119](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5bea218a5d7c11c01e7d909848b3a90d5471d726.png)

If you want to get extra fancy you could supply a Javascript function to `backgroundColor` (since it is a scriptable property):

```python
(context) => 
switch(context.dataIndex) {
case 0:
  return 'blue'
case 1:
  return 'red'
default:
  return 'green'
} 

```

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [August 8, 2024, 5:08pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/14 "2024-08-08T17:08:51Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/6792201da01b446d74cf2bc2f2a0bf03133ce0e0.png)

Awesome that worked thank you!

---

<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:** [August 8, 2024, 5:13pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/15 "2024-08-08T17:13:13Z")

</div>

Also, you can play with the `rotation` property to change where the arcs start drawing from.

Edit: from your picture, maybe you already found that out?

---

<div class="post-metadata">

**Author:** ![dcan87](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dcan87/32/54071_2.png) [@dcan87](https://forum.inductiveautomation.com/u/dcan87)\
**Post date:** [August 8, 2024, 6:15pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/16 "2024-08-08T18:15:44Z")

</div>

I did thank you!

---

<div class="post-metadata">

**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\
**Post date:** [August 9, 2024, 1:25pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/17 "2024-08-09T13:25:59Z")

</div>

I added a binding to dataset 0 data, but "0 and 1" are returned for each data point instead of "x and y" as the chart expects.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3d39cb6a681efeeb83323c5adf1436922c2086fc.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:** [August 9, 2024, 1:38pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/18 "2024-08-09T13:38:43Z")

</div>

You’re missing the keys to the dictionaries created inside the for loop, so python is creating sets instead 😉.

---

<div class="post-metadata">

**Author:** ![justice5555](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@justice5555](https://forum.inductiveautomation.com/u/justice5555)\
**Post date:** [August 9, 2024, 2:07pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/19 "2024-08-09T14:07:56Z")

</div>

Thanks!

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/72d1bc40d9db506c44fa932c2639f9c21815fc45.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:** [August 9, 2024, 7:54pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/20 "2024-08-09T19:54:37Z")

</div>

> **[Data structures | Chart.js](https://www.chartjs.org/docs/latest/general/data-structures.html)**
>
> Open source HTML5 Charts for your website

You don’t _have_ to strictly use the `x` and `y` properties, Chart.js does support parsing other object structures.

However, enabling parsing will:

1. Add overhead to the rendering process.
2. Stop data decimation plugin from working (which will drastically impact rendering time for large datasets).

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