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

<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:** [March 20, 2025, 5:23am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/201 "2025-03-20T05:23:22Z")

</div>

# 2.2.3

> **[Release @embr-modules/charts@2.2.3 · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fcharts%402.2.3)**
>
> Patch Changes
> 
> a670956: Add chartjs-plugin-dragdata plugin by @artus9033.
> 
> Add schema definition for options.plugins.dragData
> Update license to include attribution.
> 
> 
> Updated dependencies \[a670956\]...

### Patch Changes

- [a670956](https://github.com/mussonindustrial/embr/commit/a670956170508a42cea5fc2cd20f5d541794717e): Add `chartjs-plugin-dragdata` plugin by [@artus9033](https://github.com/artus9033).
  - Add schema definition for `options.plugins.dragData`
  - Update license to include attribution.

- Updated dependencies [[a670956](https://github.com/mussonindustrial/embr/commit/a670956170508a42cea5fc2cd20f5d541794717e)]
  - @embr-modules/charts-web@2.2.3

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 20, 2025, 11:29am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/202 "2025-03-20T11:29:31Z")

</div>

Hello, im very new to ignition, but is there a way I can pass in the function a custom property?

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

---

<div class="post-metadata">

**Author:** ![csjohnson](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@csjohnson](https://forum.inductiveautomation.com/u/csjohnson)\
**Post date:** [March 20, 2025, 1:09pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/203 "2025-03-20T13:09:33Z")

</div>

You can directly access view custom properties within the arrow function.  
For example, if you created a custom prop on the view named `customPropName`, you could get the value using this code.

```python
(ctx) => {
      const view = perspective.context.view;
      const customProp = view.custom.read("customPropName");
}

```

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 20, 2025, 2:58pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/204 "2025-03-20T14:58:28Z")

</div>

thank you!

As Im to figure out how to use the charts and the platform, I may have another use case below, 😅

I have a bar chart in which the x axis is step number, y axis is the duration, from the above i am thinking im able to compare X axis to the target dataset step number to get the target duration, then compare to actual Y value and change the color.

The problem is my target is dynamically changing based on the Variant, In the dataset's data of the bar chart Im passing bar Variant per each point, is there a way i can compare the Variant of the point to the Target dataset/array { Variant, step number, target duration}which is living in the custom property.

---

<div class="post-metadata">

**Author:** ![csjohnson](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@csjohnson](https://forum.inductiveautomation.com/u/csjohnson)\
**Post date:** [March 20, 2025, 5:50pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/205 "2025-03-20T17:50:59Z")

</div>

If I understand correctly, you want to color the bars on the chart based on some calculation (variant)? Is that variant constantly changing and you want the chart to update as it changes?

I'm not sure if `options.elements.bars` would be the correct place to do it. As I understand it, those properties are there to globally define styles for the listed elements.

_Although, it does seem to work..._

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e4840222c6c509797e2e97439391f95f84c41d8e.png)

The arrow function would get called every time the chart is drawn/updated. The `ctx` object will contain the _x_ and _y_ values for a _single_ bar. In other words, for every bar that must be drawn, the arrow function on `backgroundColor` would be called with a new `ctx` object for the respective bar.

Post a sample of your dataset for us to see, if you can.  
Be sure to follow this guide when posting code/data.  
[Wiki - how to post code on this forum - General Discussion - Inductive Automation Forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831)

The "traditional" way would be to add the `backgroundColor` property to your dataset.  
See this link for more info: [Vertical Bar Chart | Chart.js](https://www.chartjs.org/docs/latest/samples/bar/vertical.html)

---

<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:** [March 20, 2025, 9:43pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/206 "2025-03-20T21:43:52Z")

</div>

> [@csjohnson](#):
>
> I'm not sure if `options.elements.bars` would be the correct place to do it. As I understand it, those properties are there to globally define styles for the listed elements.
> 
> _Although, it does seem to work..._

I think this a perfectly fine place to put it, especially if you want to lookup the colors for several different datasets.

Options in `Chart.js` are applied in layers and you should use them to your advantage.

Settings in `options.elements.bars` will be applied to all bars, but these can be overridden by specifying properties inside of an individual dataset.

---

<div class="post-metadata">

**Author:** ![csjohnson](https://avatars.discourse-cdn.com/v4/letter/c/5f8ce5/32.png) [@csjohnson](https://forum.inductiveautomation.com/u/csjohnson)\
**Post date:** [March 21, 2025, 1:39am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/207 "2025-03-21T01:39:52Z")

</div>

Good to know, Ben. Another tool in the toolbox.  
I wonder what the performance difference would be between providing the color with the data in the dataset vs using an arrow function to lookup colors?  
I would think providing it with the data would be more performant. (For large datasets anyways)

---

<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:** [March 21, 2025, 2:09am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/208 "2025-03-21T02:09:13Z")

</div>

> [@csjohnson](#):
>
> I wonder what the performance difference would be between providing the color with the data in the dataset vs using an arrow function to lookup colors?

Assuming that the arrow function is "simple" I'd expect the rendering performance to be exactly the same. Chart.js's property resolution code is already kind-of heavy, so one additional lookup function is just a drop of water in the ocean.

In fact, for really large datasets I'd expect the performance within Perspective to be _better_ with the scriptable options, because of the reduced transfer size over the WebSocket.

IMO you want to be using the client's hardware instead of the gateway's for all rendering related tasks.

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 21, 2025, 7:18am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/209 "2025-03-21T07:18:06Z")

</div>

I was able to do both use case with fixed Target to adjust the color, and dynamic target based on the raw data of dataset, but the target coming from other table.

the function is under a BackgroundColor property of the datasets, is there other alternative to do the function that will gain more performance or use less resources?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/0/900794fe5123c312c324216e69e42f397a79af04.png)

```python
(ctx) => {
  const view = perspective.context.view;
  const sku_target = view.custom.read("sku_target");  
  const value = ctx.raw;
  const vsku = value.sku;
  const vStepNo = value.step_no;

  let target = null;
  let last = 3;

  for (let i = 0; i < sku_target.length; i++) {
    if (sku_target[i].StepNo == vStepNo && sku_target[i].SKU == vsku) {
      target = sku_target[i].Target;
      break;
    }
  }
    const color = (value.duration <= target) ? '#00B190' : '#FF544F';
    return color;
}

```

---

<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:** [March 21, 2025, 11:39am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/210 "2025-03-21T11:39:10Z")

</div>

How many SKU targets are in the ` custom.sku_target` property?

The loop is a little scary. Instead, you could do preprocessing in the `onMount` callback to load the custom property into a map in order to avoid looping for every data point.

But if you’ve got a well known number of SKU targets and metrics to plot then it might not be worth worrying about.

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 22, 2025, 4:48am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/211 "2025-03-22T04:48:00Z")

</div>

Its about \<50 data only in the sku\_target.

Ill explore the onmount! thank you

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 22, 2025, 4:56am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/212 "2025-03-22T04:56:04Z")

</div>

in order to use client hardware for this kind of thing, instead of using function call in the props, should I use scripting?

---

<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:** [March 25, 2025, 2:31am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/214 "2025-03-25T02:31:04Z")

</div>

The callback arrow functions provided in the property tree will run in the client.

Any python scripting configured on the properties/on the component always run in the gateway.

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 25, 2025, 10:19am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/215 "2025-03-25T10:19:42Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 25, 2025, 10:48am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/216 "2025-03-25T10:48:53Z")

</div>

What is the best way to redo the backgroundColor function property call?

if the Graph.JS is in a Embedded View, then the button is in another Embedded View? Passing only params

---

<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:** [March 25, 2025, 11:11am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/217 "2025-03-25T11:11:45Z")

</div>

What do you mean by “redo”? What are you expecting the button to do?

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 26, 2025, 11:33pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/218 "2025-03-26T23:33:23Z")

</div>

Hello!

I am trying to refresh the graph thru a button click and expecting that the backgroundColor will do the function after refrrshing. Im still trying to figure out why it is not refreshing.

---

<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:** [March 27, 2025, 12:18am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/219 "2025-03-27T00:18:12Z")

</div>

Can you share some code? What does the button exactly do? What does your background color function look like?

The background color function is called every time the chart re-renders, so there has to be some else going on.

---

<div class="post-metadata">

**Author:** ![enrique.guanlao](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@enrique.guanlao](https://forum.inductiveautomation.com/u/enrique.guanlao)\
**Post date:** [March 27, 2025, 1:50pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/220 "2025-03-27T13:50:51Z")

</div>

Im not sure at my first try what happened but now it is working. I just did refresh binding to the dataset.data property and put 1 sec delay after i updated the database to ensure im getting the updated database.

In the database i have a column that changes the color of the bar.

---

<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:** [March 28, 2025, 9:30am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/221 "2025-03-28T09:30:51Z")

</div>

This might be a dumb question... but how can I add a $ to the start of the axis ticks as in here:

> **[Labeling Axes | Chart.js](https://www.chartjs.org/docs/latest/axes/labelling.html)**
>
> Open source HTML5 Charts for your website

(I have no idea what I'm doing; I can't see a `callback` prop... and if I add it and add that function into it, it doesn't seem to do anything... 😬 )

And, how can I add an axis title?

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

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