# Embr-Charts Solutions Wiki

**URL:** <https://forum.inductiveautomation.com/t/embr-charts-solutions-wiki/111260>\
**Category:** 3rd Party Modules\
**Created:** [October 8, 2025, 5:31am UTC](https://forum.inductiveautomation.com/t/embr-charts-solutions-wiki/111260 "2025-10-08T05:31:24Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [October 8, 2025, 6:41am UTC](https://forum.inductiveautomation.com/t/embr-charts-solutions-wiki/111260/3 "2025-10-08T06:41:30Z")

</div>

# Show a Vertical Line on Hover

_Source: [Youtube](https://www.youtube.com/watch?v=-6xqMLOi7Uc)_  
Add a new array item under props.plugins and paste the below into the new item.

```python
{
  "events": [
    "mousemove",
    "mouseout",
    "click",
    "touchstart",
    "touchmove"
  ],
  "id": "verticalHoverLine",
  "beforeDatasetsDraw": "(chart, args, plugins) \u003d\u003e {\n const { ctx, chartArea: { top, bottom, height } } \u003d chart;\n \n ctx.save();\n chart.data.datasets.forEach((dataset, datasetIndex) \u003d\u003e {\n chart.getDatasetMeta(datasetIndex).data.forEach((dataPoint, index) \u003d\u003e {\n if(dataPoint.active \u003d\u003d\u003d true) {\n \n ctx.beginPath();\n ctx.strokeStyle \u003d \u0027orange\u0027;\n ctx.moveTo(dataPoint.x, top);\n ctx.lineTo(dataPoint.x, bottom);\n ctx.stroke();\n }\n });\n });\n }"
}

```

Example (orange vertical line):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/12cbe0ed11385603ed70157a9ed771fdc1f227df.png)

* * *

# Change the colour of the y-axis zero line

_Source: Claude.ai, prompt: "chart.js. how to set the zero line style for the y axis?"_  
To change the colour of the zero line, under `props.options.scales.y.grid.color`, paste the below:

```python
(context) => {
   if (context.tick.value === 0) {
      return 'hsla(0, 80%, 50%, 0.4)';
   }
   return 'hsla(0, 0%, 0%, 0.2)';
}

```

To change the stroke width, under `props.options.scales.y.grid.lineWidth`, paste the below:

```python
(context) => {
   if (context.tick.value === 0) {
      return 2;
   }
   return 1;
}

```

Example (red 2px width zero line):

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

* * *

# Change the date format of the data point tooltips

_Source: Claude.ai_  
Under `props.options.plugins.tooltip` add a `callbacks` object. Add a `title` key into the callbacks object and paste this below.

- I'm forcing to `'sv-SE'` locale to use the date format: _YYYY-MM-dd HH:mm:ss Z_.  
Change this to `[]` to (supposedly) use the client's locale (I didn't find this worked as my browser reports en-AU but using `[]` was still messing up the date into reverse-shuffled triangle date format (MM/DD/YYYY 😛 ) so I had to force it to unshuffle it by supplying the locale myself.
- I'm also forcing it to show the timezone in Australia/Brisbane as that's what the client needs it in for electricity prices.

```python
(context) => {
  const d = new Date(context[0].raw.x);
  const formattedDate = d.toLocaleString('sv-SE', {
   year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    hour12: false,
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'longOffset',
    timeZone: 'Australia/Brisbane'
  });
  return formattedDate;
};

```

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

---

_[View the full topic](https://forum.inductiveautomation.com/t/embr-charts-solutions-wiki/111260)._