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

<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, 10:28am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/222 "2025-03-28T10:28:43Z")

</div>

> [@bmusson](#):
>
> `timestack`

Hmm, using this seems to have broken the data points tooltip functionality (hovering on data points no longer brings up a "tooltip")

Edit: it kind of works, but only for the first dataset, and the interaction mode doesn't work for a lot of the options, like "x".

Edit2:  
This might be a big one... but, how would I go about mimicking the "x trace" from this chart?

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

> **[NEM data dashboard](https://www.aemo.com.au/energy-systems/electricity/national-electricity-market-nem/data-nem/data-dashboard-nem)**
>
> The NEM's key data points including price and demand, dispatch, and short and medium-term outlooks.

Click on "Price and Demand"

---

<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 28, 2025, 12:59pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/223 "2025-03-28T12:59:02Z")

</div>

Not dumb questions 😁

> [@nminchin](#):
>
> but how can I add a $ to the start of the axis ticks as in here:

The `callback` property is what you want, but you have to use [arrow function syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) instead of the normal function syntax used in the linked example.

So, to make that example work, you’d set `ticks.callback` with the following:

```javascript
(value) => {
  return '$' + value
}

```

> [@nminchin](#):
>
> And, how can I add an axis title?

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

It should be under `options.scales[scaleId].title`, I think at minimum you need to set `display` and `text` to get it to appear.

> [@nminchin](#):
>
> Hmm, using this seems to have broken the data points tooltip functionality (hovering on data points no longer brings up a "tooltip")

I’ll check this out later, maybe @ryan.white knows something about this?

---

<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, 1:14pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/224 "2025-03-28T13:14:18Z")

</div>

> [@bmusson](#):
>
> ```python
> (value) => {
> return ‘$’ + value
> }
> 
> ```

~~Hmm, that killed the component, but setting it to this works:~~  
Nope, it was just the forum-converted dodgy apostrophe characters that I blindly pasted in... replacing with un-adultered versions worked 🙂

```python
(value, index, ticks) => {
  return '$' + value;
}

```

> [@bmusson](#):
>
> It should be under `options.scales[scaleId].title`, I think at minimum you need to set `display` and `text` to get it to appear

Oh right, I completely misread that doc section when I looked at it before... got it working now, cheers!

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/b/dbfafcfeb384a59a4080d79d0b20946f7b48cddb.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:** [March 28, 2025, 1:48pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/225 "2025-03-28T13:48:27Z")

</div>

> [@nminchin](#):
>
> Nope, it was just the forum-converted dodgy apostrophe characters that I blindly pasted in... replacing with un-adultered versions worked 🙂

Eww, my bad. I'll blame it on my phone 😆.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [March 28, 2025, 3:48pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/226 "2025-03-28T15:48:29Z")

</div>

> [@nminchin](#):
>
> how would I go about mimicking the "x trace" from this chart?

Are you looking at the line setup or the split tooltip setup? Or both?

Anything split on the tooltips requires you to write a tooltip handler on the `external` property of the tooltips plugin. In there, you'll need to handle creating an HTML tooltip, which in my case was creating a div for each Y axis.

---

<div class="post-metadata">

**Author:** ![gregory.sachs](https://avatars.discourse-cdn.com/v4/letter/g/e47774/32.png) [@gregory.sachs](https://forum.inductiveautomation.com/u/gregory.sachs)\
**Post date:** [March 31, 2025, 4:52pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/227 "2025-03-31T16:52:39Z")

</div>

Can you post a screenshot of the chart config? Or the JSON?  
I'm trying to do something similar to do a stack total, like this:

> <https://stackoverflow.com/questions/77361618/adding-a-total-to-the-top-of-a-stacked-bar-chart-in-chart-js>

but having trouble visualizing exactly how i do the function.  
Thanks!

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [April 1, 2025, 7:58pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/228 "2025-04-01T19:58:20Z")

</div>

Much love for these charts, all my new projects are including them.

Any chance you could add the doughnutlabels plugin to the package?

[ciprianciurea/chartjs-plugin-doughnutlabel: Chart.js plugin for doughnut chart to display text in the center](https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel)

Thanks!

---

<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:** [April 1, 2025, 10:40pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/229 "2025-04-01T22:40:14Z")

</div>

> [@hw79](#):
>
> Much love for these charts, all my new projects are including them.

🫶

> [@hw79](#):
>
> Any chance you could add the doughnutlabels plugin to the package?

Unfortunately that plugin isn't compatible with the version of Chart.js included in Embr-Charts.  
Embr-Charts includes Chart.js version 4.4.8, and the plugin is only compatible with version 2.

```python
// chartjs-plugin-doughnutlabel/package.json
...
"peerDependencies": {
  "chart.js": ">= 2.7.0 < 3"
}
...

```

This might be a simple enough task that you can get away with an inline plugin. Here's a little bit to get you started:

```javascript
// plugins[0].beforeDatasetDraw
(chart, args, options) => {
  const { ctx, data } = chart
  ctx.save()

  const xCenter = chart.getDatasetMeta(0).data[0].x
  const yCenter = chart.getDatasetMeta(0).data[0].y

  ctx.translate(xCenter, yCenter)
  ctx.font = options.font
  ctx.textAlign = 'center'
  ctx.fillText(options.text, 0, 0)

  ctx.restore()
}

// options.plugin.doughnutText 
{
  text: 'Testing!'
  font: 'bold 32px sans-serif'
}

```

 ![YqDoxdLdkY](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9b1480973de3f758c9df8a3f94ff49c7f72732c5.png)

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [April 7, 2025, 2:41pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/230 "2025-04-07T14:41:18Z")

</div>

Thanks again!

I wanted to share what I ended up going with to get it working for me.

```js
// plugins[0].afterDatasetDraw
// use after for the label to be above the chart z level

(chart) => {
  const { ctx, chartArea, data, options } = chart
  if (!chartArea) return // Check if chart is initialized

  ctx.save()

  // Get center of the chart
  const xCenter = (chartArea.left + chartArea.right) / 2
  const yCenter = (chartArea.top + chartArea.bottom) / 2

  // Get first data value
  const firstValue = data.datasets[0]?.data[0] ?? 0 // Default to 0 if missing
  const text = `${firstValue}`

  // Font & color (override in options if needed)
  const font = options.plugins.doughnutText?.font || "bold 20px Arial"
  const color = options.plugins.doughnutText?.color || "#000"

  ctx.font = font
  ctx.fillStyle = color
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"

  ctx.fillText(text, xCenter, yCenter)

  ctx.restore()
}

```

also, have you noticed that the chart doesn't play nicely with css color themes? using var() colors will cause the chart colors to initialize as all black then it gets fixed when the chart redraws.

edit: how do you get the fancy color formatting in your code pasting?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 7, 2025, 3:19pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/231 "2025-04-07T15:19:56Z")

</div>

> [@hw79](#):
>
> How do you get the fancy color formatting in your code pasting?

 ![Markdown syntax highlighting](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2e3bdf12cbaac7f8b7f52467bd580141a23fe735.png)

_Add the language name after the three backticks._

> **[Extended Syntax | Markdown Guide](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks)**
>
> Advanced features that build on the basic Markdown syntax.

---

<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:** [April 7, 2025, 4:04pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/232 "2025-04-07T16:04:04Z")

</div>

> [@hw79](#):
>
> also, have you noticed that the chart doesn't play nicely with css color themes? using var() colors will cause the chart colors to initialize as all black then it gets fixed when the chart redraws.

I have noticed some weirdness with CSS properties…

Chart.js renders to a canvas, meaning that it doesn’t support CSS the same way as other elements. To get around this, component properties that contain the `var()` syntax are dereferenced and then their values are passed into the chart. EDIT: To clarify, this is a unique feature of Embr-Charts, not a Chart.js feature.

If you can post a reproducible example it’d help with solving any weird behaviors present.

---

<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:** [April 8, 2025, 1:53am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/233 "2025-04-08T01:53:06Z")

</div>

> **[Release @embr-modules/charts@2.2.5 · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fcharts%402.2.5)**
>
> Patch Changes
> 
> 
> 40ad4a7: Fix Perspective component schema validation errors on startup. #265
> 
> This patch uses DelegatedClassLoader to simultaneously resolve schema definitions from both Perspective...

Version `2.2.5` is out and provides a fix for the gateway schema validation errors that were occurring during installation and startup.

---

<div class="post-metadata">

**Author:** ![Lin\_Cheng](https://avatars.discourse-cdn.com/v4/letter/l/9fc348/32.png) [@Lin\_Cheng](https://forum.inductiveautomation.com/u/Lin_Cheng)\
**Post date:** [April 10, 2025, 10:20am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/234 "2025-04-10T10:20:55Z")

</div>

Hi, I’m working on implementing linked line charts similar to the example shown on the Chart.js Crosshair Plugin sample page ([chartjs-plugin-trace / sample](https://chartjs-plugin-crosshair.netlify.app/samples/)), where the zoom and tooltip are synchronized across two charts (as shown in the screenshot attached).

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

Could you please advise on the correct configuration needed to achieve synchronized zooming and tooltip between two charts using the Chart.js Crosshair Plugin? Specifically:

[testView.zip](https://forum.inductiveautomation.com/uploads/short-url/r7pNN4uticmj4YGf2KGcj1Vkk0p.zip) (18.7 KB)

1. How should the crosshair plugin be configured for both charts?
2. Is there a recommended way to link zoom/pan behavior between the charts?
3. How can I synchronize the tooltip across the charts when hovering?

Thanks in advance for your help!

---

<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:** [April 10, 2025, 3:10pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/235 "2025-04-10T15:10:44Z")

</div>

To quote past me:

> [@bmusson](#):
>
> The crosshair plugin is kinda garbage, I don’t think it will stay around long term. It’s not causing any issues though so I’d remove it if a suitable replacement was available.

I tried to get the same behavior as the sample page without any luck.

It looks like the mouse events are propagating between the charts because the `pointHover` events are happening, but the trace/crosshair isn't being rendered. It seems like other users have the same issue.

> **ExampleView.json**
>
> ```python
> {
> "custom": {},
> "params": {},
> "props": {},
> "root": {
> "children": [
> {
> "meta": {
> "name": "Chartjs"
> },
> "position": {
> "height": 181,
> "width": 659,
> "x": 37,
> "y": 86
> },
> "props": {
> "data": {
> "datasets": [
> {
> "data": [
> {
> "x": 0,
> "y": 20.790464349448122
> },
> {
> "x": 1,
> "y": 27.541905413990484
> },
> {
> "x": 2,
> "y": 9.044548907913263
> },
> {
> "x": 3,
> "y": 63.58544584440057
> },
> {
> "x": 4,
> "y": 40.57122042169531
> },
> {
> "x": 5,
> "y": 46.17945691520222
> },
> {
> "x": 6,
> "y": 5.272367698783542
> },
> {
> "x": 7,
> "y": 78.62029735550435
> },
> {
> "x": 8,
> "y": 1.384758302338518
> },
> {
> "x": 9,
> "y": 8.094105544748587
> },
> {
> "x": 10,
> "y": 93.29711393437752
> },
> {
> "x": 11,
> "y": 78.54999817500953
> },
> {
> "x": 12,
> "y": 30.022085778849018
> },
> {
> "x": 13,
> "y": 68.38927062938775
> },
> {
> "x": 14,
> "y": 93.84973459203651
> },
> {
> "x": 15,
> "y": 85.15266831524416
> },
> {
> "x": 16,
> "y": 3.3272574045278946
> },
> {
> "x": 17,
> "y": 3.4738230710669837
> },
> {
> "x": 18,
> "y": 76.78237778113568
> },
> {
> "x": 19,
> "y": 76.13468451530511
> },
> {
> "x": 20,
> "y": 88.63284915490885
> },
> {
> "x": 21,
> "y": 92.74877419440537
> },
> {
> "x": 22,
> "y": 94.12886888152015
> },
> {
> "x": 23,
> "y": 97.06398992204936
> },
> {
> "x": 24,
> "y": 46.71625167184086
> },
> {
> "x": 25,
> "y": 13.224799335767212
> },
> {
> "x": 26,
> "y": 35.052260048430696
> },
> {
> "x": 27,
> "y": 29.46821488097423
> },
> {
> "x": 28,
> "y": 90.27395392440542
> },
> {
> "x": 29,
> "y": 7.832816289114186
> },
> {
> "x": 30,
> "y": 15.799390058813623
> },
> {
> "x": 31,
> "y": 80.66585380750348
> },
> {
> "x": 32,
> "y": 4.629220116475031
> },
> {
> "x": 33,
> "y": 24.00958904699422
> },
> {
> "x": 34,
> "y": 8.133906226255029
> },
> {
> "x": 35,
> "y": 81.93116748921958
> },
> {
> "x": 36,
> "y": 82.82333811028309
> },
> {
> "x": 37,
> "y": 95.37635776015469
> },
> {
> "x": 38,
> "y": 74.00252644137744
> },
> {
> "x": 39,
> "y": 27.90694570663671
> },
> {
> "x": 40,
> "y": 30.569029278167793
> },
> {
> "x": 41,
> "y": 11.104072480586257
> },
> {
> "x": 42,
> "y": 68.15581447149303
> },
> {
> "x": 43,
> "y": 27.051454957054943
> },
> {
> "x": 44,
> "y": 48.477001171626725
> },
> {
> "x": 45,
> "y": 73.62917163080661
> },
> {
> "x": 46,
> "y": 7.528701180738118
> },
> {
> "x": 47,
> "y": 21.794180888547032
> },
> {
> "x": 48,
> "y": 17.0019331614802
> },
> {
> "x": 49,
> "y": 80.4420964468141
> }
> ],
> "label": "Dataset 1"
> },
> {
> "data": [
> {
> "x": 25,
> "y": 99.00283352088223
> },
> {
> "x": 26,
> "y": 36.743648170189644
> },
> {
> "x": 27,
> "y": 33.58269158236888
> },
> {
> "x": 28,
> "y": 70.52608530981715
> },
> {
> "x": 29,
> "y": 78.48664561425423
> },
> {
> "x": 30,
> "y": 99.80258881269653
> },
> {
> "x": 31,
> "y": 23.56577175483505
> },
> {
> "x": 32,
> "y": 27.6260054014127
> },
> {
> "x": 33,
> "y": 11.84780583914382
> },
> {
> "x": 34,
> "y": 78.95435294680595
> },
> {
> "x": 35,
> "y": 89.0983947949238
> },
> {
> "x": 36,
> "y": 87.63589420154018
> },
> {
> "x": 37,
> "y": 82.4714423791225
> },
> {
> "x": 38,
> "y": 46.29407127415893
> },
> {
> "x": 39,
> "y": 12.463880984334686
> },
> {
> "x": 40,
> "y": 91.82293604614682
> },
> {
> "x": 41,
> "y": 9.645637547490315
> },
> {
> "x": 42,
> "y": 23.87358763050218
> },
> {
> "x": 43,
> "y": 64.35308758482624
> },
> {
> "x": 44,
> "y": 61.30614039090162
> },
> {
> "x": 45,
> "y": 60.123113026673906
> },
> {
> "x": 46,
> "y": 11.262924017594045
> },
> {
> "x": 47,
> "y": 36.72684549715057
> },
> {
> "x": 48,
> "y": 19.144808134626057
> },
> {
> "x": 49,
> "y": 11.499648689135334
> },
> {
> "x": 50,
> "y": 48.862954644422615
> },
> {
> "x": 51,
> "y": 44.0188922198424
> },
> {
> "x": 52,
> "y": 1.4731641405698048
> },
> {
> "x": 53,
> "y": 76.62654204425371
> },
> {
> "x": 54,
> "y": 97.09498548555429
> },
> {
> "x": 55,
> "y": 68.88623969428103
> },
> {
> "x": 56,
> "y": 9.347347267187478
> },
> {
> "x": 57,
> "y": 27.59945299037486
> },
> {
> "x": 58,
> "y": 38.62680310622668
> },
> {
> "x": 59,
> "y": 64.48467246665813
> },
> {
> "x": 60,
> "y": 99.50148874944306
> },
> {
> "x": 61,
> "y": 59.35003045509352
> },
> {
> "x": 62,
> "y": 7.407803152895475
> },
> {
> "x": 63,
> "y": 62.077958133975066
> },
> {
> "x": 64,
> "y": 19.550924069869623
> },
> {
> "x": 65,
> "y": 59.290461562229346
> },
> {
> "x": 66,
> "y": 15.46272365498117
> },
> {
> "x": 67,
> "y": 27.411246578970218
> },
> {
> "x": 68,
> "y": 59.515203740704415
> },
> {
> "x": 69,
> "y": 76.39871363134311
> },
> {
> "x": 70,
> "y": 20.255435491968
> },
> {
> "x": 71,
> "y": 57.26165130029921
> },
> {
> "x": 72,
> "y": 73.41996375745644
> },
> {
> "x": 73,
> "y": 68.57751118650746
> },
> {
> "x": 74,
> "y": 25.40840081665815
> }
> ],
> "label": "Dataset 2"
> }
> ]
> },
> "options": {
> "elements": {
> "point": {
> "hoverRadius": 12
> }
> },
> "plugins": {
> "crosshair": {},
> "tooltip": {
> "animation": false,
> "intersect": false,
> "mode": "interpolate",
> "position": "nearest"
> },
> "zoom": {
> "pan": {
> "modifierKey": null
> }
> }
> },
> "scales": {
> "x": {
> "type": "linear"
> },
> "y": {
> "type": "linear"
> }
> }
> }
> },
> "type": "embr.chart.chart-js"
> },
> {
> "meta": {
> "name": "Chartjs_0"
> },
> "position": {
> "height": 181,
> "width": 659,
> "x": 62,
> "y": 376
> },
> "props": {
> "data": {
> "datasets": [
> {
> "data": [
> {
> "x": 0,
> "y": 20.790464349448122
> },
> {
> "x": 1,
> "y": 27.541905413990484
> },
> {
> "x": 2,
> "y": 9.044548907913263
> },
> {
> "x": 3,
> "y": 63.58544584440057
> },
> {
> "x": 4,
> "y": 40.57122042169531
> },
> {
> "x": 5,
> "y": 46.17945691520222
> },
> {
> "x": 6,
> "y": 5.272367698783542
> },
> {
> "x": 7,
> "y": 78.62029735550435
> },
> {
> "x": 8,
> "y": 1.384758302338518
> },
> {
> "x": 9,
> "y": 8.094105544748587
> },
> {
> "x": 10,
> "y": 93.29711393437752
> },
> {
> "x": 11,
> "y": 78.54999817500953
> },
> {
> "x": 12,
> "y": 30.022085778849018
> },
> {
> "x": 13,
> "y": 68.38927062938775
> },
> {
> "x": 14,
> "y": 93.84973459203651
> },
> {
> "x": 15,
> "y": 85.15266831524416
> },
> {
> "x": 16,
> "y": 3.3272574045278946
> },
> {
> "x": 17,
> "y": 3.4738230710669837
> },
> {
> "x": 18,
> "y": 76.78237778113568
> },
> {
> "x": 19,
> "y": 76.13468451530511
> },
> {
> "x": 20,
> "y": 88.63284915490885
> },
> {
> "x": 21,
> "y": 92.74877419440537
> },
> {
> "x": 22,
> "y": 94.12886888152015
> },
> {
> "x": 23,
> "y": 97.06398992204936
> },
> {
> "x": 24,
> "y": 46.71625167184086
> },
> {
> "x": 25,
> "y": 13.224799335767212
> },
> {
> "x": 26,
> "y": 35.052260048430696
> },
> {
> "x": 27,
> "y": 29.46821488097423
> },
> {
> "x": 28,
> "y": 90.27395392440542
> },
> {
> "x": 29,
> "y": 7.832816289114186
> },
> {
> "x": 30,
> "y": 15.799390058813623
> },
> {
> "x": 31,
> "y": 80.66585380750348
> },
> {
> "x": 32,
> "y": 4.629220116475031
> },
> {
> "x": 33,
> "y": 24.00958904699422
> },
> {
> "x": 34,
> "y": 8.133906226255029
> },
> {
> "x": 35,
> "y": 81.93116748921958
> },
> {
> "x": 36,
> "y": 82.82333811028309
> },
> {
> "x": 37,
> "y": 95.37635776015469
> },
> {
> "x": 38,
> "y": 74.00252644137744
> },
> {
> "x": 39,
> "y": 27.90694570663671
> },
> {
> "x": 40,
> "y": 30.569029278167793
> },
> {
> "x": 41,
> "y": 11.104072480586257
> },
> {
> "x": 42,
> "y": 68.15581447149303
> },
> {
> "x": 43,
> "y": 27.051454957054943
> },
> {
> "x": 44,
> "y": 48.477001171626725
> },
> {
> "x": 45,
> "y": 73.62917163080661
> },
> {
> "x": 46,
> "y": 7.528701180738118
> },
> {
> "x": 47,
> "y": 21.794180888547032
> },
> {
> "x": 48,
> "y": 17.0019331614802
> },
> {
> "x": 49,
> "y": 80.4420964468141
> }
> ],
> "label": "Dataset 1"
> },
> {
> "data": [
> {
> "x": 25,
> "y": 99.00283352088223
> },
> {
> "x": 26,
> "y": 36.743648170189644
> },
> {
> "x": 27,
> "y": 33.58269158236888
> },
> {
> "x": 28,
> "y": 70.52608530981715
> },
> {
> "x": 29,
> "y": 78.48664561425423
> },
> {
> "x": 30,
> "y": 99.80258881269653
> },
> {
> "x": 31,
> "y": 23.56577175483505
> },
> {
> "x": 32,
> "y": 27.6260054014127
> },
> {
> "x": 33,
> "y": 11.84780583914382
> },
> {
> "x": 34,
> "y": 78.95435294680595
> },
> {
> "x": 35,
> "y": 89.0983947949238
> },
> {
> "x": 36,
> "y": 87.63589420154018
> },
> {
> "x": 37,
> "y": 82.4714423791225
> },
> {
> "x": 38,
> "y": 46.29407127415893
> },
> {
> "x": 39,
> "y": 12.463880984334686
> },
> {
> "x": 40,
> "y": 91.82293604614682
> },
> {
> "x": 41,
> "y": 9.645637547490315
> },
> {
> "x": 42,
> "y": 23.87358763050218
> },
> {
> "x": 43,
> "y": 64.35308758482624
> },
> {
> "x": 44,
> "y": 61.30614039090162
> },
> {
> "x": 45,
> "y": 60.123113026673906
> },
> {
> "x": 46,
> "y": 11.262924017594045
> },
> {
> "x": 47,
> "y": 36.72684549715057
> },
> {
> "x": 48,
> "y": 19.144808134626057
> },
> {
> "x": 49,
> "y": 11.499648689135334
> },
> {
> "x": 50,
> "y": 48.862954644422615
> },
> {
> "x": 51,
> "y": 44.0188922198424
> },
> {
> "x": 52,
> "y": 1.4731641405698048
> },
> {
> "x": 53,
> "y": 76.62654204425371
> },
> {
> "x": 54,
> "y": 97.09498548555429
> },
> {
> "x": 55,
> "y": 68.88623969428103
> },
> {
> "x": 56,
> "y": 9.347347267187478
> },
> {
> "x": 57,
> "y": 27.59945299037486
> },
> {
> "x": 58,
> "y": 38.62680310622668
> },
> {
> "x": 59,
> "y": 64.48467246665813
> },
> {
> "x": 60,
> "y": 99.50148874944306
> },
> {
> "x": 61,
> "y": 59.35003045509352
> },
> {
> "x": 62,
> "y": 7.407803152895475
> },
> {
> "x": 63,
> "y": 62.077958133975066
> },
> {
> "x": 64,
> "y": 19.550924069869623
> },
> {
> "x": 65,
> "y": 59.290461562229346
> },
> {
> "x": 66,
> "y": 15.46272365498117
> },
> {
> "x": 67,
> "y": 27.411246578970218
> },
> {
> "x": 68,
> "y": 59.515203740704415
> },
> {
> "x": 69,
> "y": 76.39871363134311
> },
> {
> "x": 70,
> "y": 20.255435491968
> },
> {
> "x": 71,
> "y": 57.26165130029921
> },
> {
> "x": 72,
> "y": 73.41996375745644
> },
> {
> "x": 73,
> "y": 68.57751118650746
> },
> {
> "x": 74,
> "y": 25.40840081665815
> }
> ],
> "label": "Dataset 2"
> }
> ]
> },
> "options": {
> "elements": {
> "point": {
> "hoverRadius": 12
> }
> },
> "plugins": {
> "crosshair": {},
> "tooltip": {
> "animation": false,
> "intersect": false,
> "mode": "interpolate"
> },
> "zoom": {
> "pan": {
> "modifierKey": null
> }
> }
> },
> "scales": {
> "x": {
> "type": "linear"
> },
> "y": {
> "type": "linear"
> }
> }
> }
> },
> "type": "embr.chart.chart-js"
> }
> ],
> "meta": {
> "name": "root"
> },
> "type": "ia.container.coord"
> }
> }
> 
> ```

> <https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair/issues/132>
>
> Hi ,
> 
> I am using chartjs 4.4.1 and crosshair 2.0.0
> 
> Vertical line not showin…g in the second chart while hover on the first chart.
> 
> https://stackblitz.com/edit/web-platform-gschac?file=index.html

1. Doesn't seem like it works, unfortunately 🤷‍♂️.

2. I think this is currently possible but difficult. I have an idea of how, but it's involved enough that I can't immediately provide an example. The idea:

3. I actually don't know how to do this. Although it's broken, the `chartjs-plugin-crosshair` can probably be a reference.

---

<div class="post-metadata">

**Author:** ![Lin\_Cheng](https://avatars.discourse-cdn.com/v4/letter/l/9fc348/32.png) [@Lin\_Cheng](https://forum.inductiveautomation.com/u/Lin_Cheng)\
**Post date:** [April 10, 2025, 6:03pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/236 "2025-04-10T18:03:53Z")

</div>

Thanks for the clarification! I understand it’s tricky right now.

Quick question: is the crosshair.js used on the demo site ([ChartJs 3 with crosshair - StackBlitz](https://stackblitz.com/edit/web-platform-k6mv1k?file=index.html)) actually working and usable? If so, is there a way I can use or extract that exact JS code locally to replace or override my current setup, so I can try to replicate the same behavior?

If not, could you point me toward how I might substitute or modify the plugin files locally to match the demo site's behavior?

Thanks again for your help!

---

<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:** [April 11, 2025, 1:55am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/237 "2025-04-11T01:55:53Z")

</div>

> [@Lin\_Cheng](#):
>
> Quick question: is the crosshair.js used on the demo site ([ChartJs 3 with crosshair - StackBlitz](https://stackblitz.com/edit/web-platform-k6mv1k?file=index.html)) actually working and usable? If so, is there a way I can use or extract that exact JS code locally to replace or override my current setup, so I can try to replicate the same behavior?

It seems like it’d work, you could probably convert it to an inline plugin with some effort.

Currently\* there’s no way to modify the JavaScript that’s loaded by the component. The only JavaScript you can control is in the components lifecycle events and properties. There’s nothing stopping you from loading a script from an outside source from a lifecycle callback, but it’s up to you to host that file somewhere.

> [@Lin\_Cheng](#):
>
> If not, could you point me toward how I might substitute or modify the plugin files locally to match the demo site's behavior?

I bet the demo site is using an older version of Chart.js. If this is must-have feature for you, and you can find the version they are using in the demo site, I’d recommend trying to build Embr-Charts yourself. The module is open source and the build is easily reproducible; it should just be a simple change to `package.json` file.

Eventually I’d like to provide a better trace plugin with the module, but it’s not a priority for me at the moment.

> [@Lin\_Cheng](#):
>
> Thanks again for your help!

🙂

\*I’m working on a feature that would allow you to easily serve JavaScript files to Perspective from the gateway; it’d be analogous to the `pylib` folder. It’s still a ways off, but I am thinking about these types of problems.

---

<div class="post-metadata">

**Author:** ![keith.lyding](https://avatars.discourse-cdn.com/v4/letter/k/b77776/32.png) [@keith.lyding](https://forum.inductiveautomation.com/u/keith.lyding)\
**Post date:** [April 17, 2025, 3:49pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/238 "2025-04-17T15:49:04Z")

</div>

@bmusson, This module is literally amazing! Performs awesomely and can do so much more than the basic powerchart from Ignition (no offense to Ignition), and in my opinion, apexcharts as well. Thank you for all the hard work!

---

<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:** [May 2, 2025, 2:30am UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/239 "2025-05-02T02:30:39Z")

</div>

> **[Release @embr-modules/charts@2.2.6 · mussonindustrial/embr](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fcharts%402.2.6)**
>
> Patch Changes
> 
> cded1e1: Update chart.js dependency to 4.4.9.
> Updated dependencies \[cded1e1\]
> Updated dependencies \[a8b2973\]
> 
> @embr-modules/charts-web@2.2.6
> @embr-jvm/perspective-designer@0.8.0
> @embr...

### Patch Changes

- [cded1e1](https://github.com/mussonindustrial/embr/commit/cded1e1c725ebf5dea15eaa73d3e95faf4ecc1cc): Update `chart.js` dependency to `4.4.9`.

---

<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:** [May 5, 2025, 10:04pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/240 "2025-05-05T22:04:44Z")

</div>

After talking with @Kyle.Chase, we're going with option 4.

> [@bmusson](#):
>
> 1. Include a fork of Kyvis-Labs component in Embr-Charts.

> <https://github.com/mussonindustrial/embr/issues/289>
>
> The ApexCharts component from the \[Kyvis-Labs/ignition-apexcharts-module\](https:…//github.com/Kyvis-Labs/ignition-apexcharts-module) should be integrated into the Embr-Charts module.
> 
> \## Goals:
> One-for-one replacement:
> \- The Embr-Charts implementation should match the behavior, features, and property schema of the original Kyvis-Labs component exactly.
> 
> \## Seamless transition for users:
> Users must be able to:
> 
> 1. Uninstall the Kyvis-Labs module.
> 1. Install Embr-Charts.
> 1. See no functional difference in their Perspective views.
> 
> Additionally, if both the Kyvis-Labs module and Embr-Charts are installed simultaneously, Embr-Charts should register and use the ApexCharts (Legacy) component in place of the Kyvis-Labs version, effectively overriding it to ensure compatibility and consistency.
> 
> \## Legacy support:
> The original component should continue to be available under the name "ApexCharts (Legacy)" within Embr-Charts.
> 
> \## New component:
> A separate, enhanced "ApexCharts" component should be added that takes advantage of JavaScript features provided by Embr.

For those too lazy to click the link:

## Goals:

One-for-one replacement:

- The Embr-Charts implementation should match the behavior, features, and property schema of the original Kyvis-Labs component exactly.

## Seamless transition for users:

Users must be able to:

1. Uninstall the Kyvis-Labs module.
2. Install Embr-Charts.
3. See no functional difference in their Perspective views.

Additionally, if both the Kyvis-Labs module and Embr-Charts are installed simultaneously, Embr-Charts should register and use the ApexCharts (Legacy) component in place of the Kyvis-Labs version, effectively overriding it to ensure compatibility and consistency.

## Legacy support:

The original component should continue to be available under the name "ApexCharts (Legacy)" within Embr-Charts.

## New component:

A separate, enhanced "ApexCharts" component should be added that takes advantage of JavaScript features provided by Embr.

Feedback is always welcome.

---

<div class="post-metadata">

**Author:** ![Tim](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim/32/3361_2.png) [@Tim](https://forum.inductiveautomation.com/u/Tim)\
**Post date:** [May 9, 2025, 8:43pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/241 "2025-05-09T20:43:39Z")

</div>

I'm using the Embr-Charts module v2.2.6 working with a double-ring doughnut chart and am having trouble applying custom colors for the ring slices.

If I set datasets[n].backgroundColor to an array of color strings then this _does_ color the ring slices however I receive an error which causes the chart to error until refreshed.

> data.datasets[n].backgroundColor: array found, string, null expected

If instead I use props.options.plugins.colors with either colors or scheme as key then I receive no errors however colors are not applied to the chart.

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

Does anyone know how to assign coloring for multiple datasets in the doughnut chart?

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

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