Embr-Charts Solutions Wiki

3rd Party Modules
3

Show a Vertical Line on Hover

Source: Youtube
Add a new array item under props.plugins and paste the below into the new item.

{
  "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
image272×641 26.8 KB

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:

(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:

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

Example (red 2px width zero line):

image
image798×223 21 KB

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 :stuck_out_tongue: ) 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.
(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

1 Like