Musson Industrial’s Embr-Charts Module

[nminchin]

@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?

NEM data dashboard

Click on "Price and Demand"

[bmusson]

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

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

@nminchin

And, how can I add an axis title?

Labeling Axes | Chart.js

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?

[nminchin]

@bmusson

(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

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

[bmusson]

@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 .

[ryan.white]

@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.

[gregory.sachs]

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:

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!

[hw79]

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

Thanks!

[bmusson]

@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.

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

// 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'
}