Chart.js 3 compatibility

[simonbrunel]

Status

Chart.js 3 is now fully supported!

Links: Documentation
Release: v2.0.0
Milestone 2.x

Done

• The label on the sectors is only displayed after a mouse-over #233
• Update docs to reflect Chart.js 3 API changes.
• Make the UMD build compatible with the ESM build of Chart.js 3 (Export plugin as an ESM compatible module #222).
• Provide an ESM build that support tree-shaking for Chart.js helpers (Export plugin as an ESM compatible module #222).
• Switch to GitHub actions since Travis become unreliable (a8b51cb).

[Homand-Cindy]

I followed the procedure, I retrieved the file chartjs-plugin-datalabels.min.js which I call in my mock-up after the file chart.min.js. I display a graph of type sector but the labels are not displayed... did I forget something?

[Homand-Cindy]

git clone https://github.com/chartjs/chartjs-plugin-datalabels.git
cd chartjs-plugin-datalabels
git checkout next
npm install
npm run build

and I recovered the file chartjs-plugin-datalabels.min.js in the dist folder

[alexkuc]

I meant your own code with the chart where the datalabels are not showing up

[Homand-Cindy]

PieChart.zip

[alexkuc]

Have you seen Getting Started section? The plugin does not work as a drop-in approach. After you have included the .js file, you still need to configure it. Also, samples (donut chart) section is a good place to check to get the hang of how the plugin works.

[Homand-Cindy]

thank you for your answer, I had read the startup section but I hadn't read the right version, I had read the production version documentation, sorry

[saberjsd]

Hello, It not work for chart.js@3.0.0-beta.9 when I build next branch. When will the latest version be supported for chart.js master branch? Many thanks! Here is the error message：

TypeError: Cannot read property 'merge' of undefined
(anonymous function)
/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:599
  596 |   me._el = el;
  597 | };
  598 | 
> 599 | helpers$1.merge(Label.prototype, {
      | ^  600 |   /**
  601 |    * @private
  602 |    */

[alexkuc]

@saberjsd Hmmm, I get the same error in your repository. I don't really have experience with Vue so I am not able to check if it is a Vue configuration error. In my repositories, this plugin works fine with beta10 of chart.js but I don't use Vue or bundling. My recommendation at this point would be to build a basic example without bundling (use CDN links from npmjs) so that you have a simple hard-coded demo. Then convert that demo into Vue and check if you still have the issues.

[alexkuc]

@saberjsd Look in the samples section as a starting point

[saberjsd]

I build without dist/chart.esm.js and push dist directory in my forks repository, resolved this problem provisional.
Here is commit.

[alexkuc]

I just realized that this is your issue #222

[saberjsd]

Yes, Thank you every much for help me!

[goonydev]

Good afternoon,

I don't mean to be rude and I know you guys are probably very busy. But can I get a rough idea of when this plugin is going to be compatible with ChartJs V3? I have developped an application that uses Datalabels and HAS to be running with the latest version of ChartJs. Just before deploying it, ChartJs became incompatible with Datalabels and I have been on stand by ever since. I was under the impression that you guys were close to catch up with ChartJs V3 and kept hanging on an imminent release. Now I just found out that Datalabels V1 is not compatible with ChartJS V3 which I misunderstood would be.

So you guys do what you can, but can you give me an idea? Is it going to take a few weeks? More like 6 months? A year? So I can make decisions about my app.

Thank you.

[simonbrunel]

@goonydev About v1 of this plugin, it may take a few years before most users switch to Chart.js v3 and I needed a stable version for maintaining the plugin against Chart.js v2. That's why I released v1.0.0-beta.1 yesterday but v2.0.0-beta.1 (for Chart.js v3) will be released very soon (probably today or tomorrow). Though, I can't tell when the final version (v2.0.0) will be released since it depends on when Chart.js v3 will be released and how people will test this plugin beta version.

[goonydev]

Thanks for the quick response.

I got confused I guess about ChartJS V3 since the CMS my plugin will be used on seems to be already running on ChartJS V3 although it is still a beta version. Thank you for clarifying this to me.

[snird]

@simonbrunel and everyone else working on it, you are doing an amazing job.
I upgraded my site to Chart.js 3.2 and use your latest code from next branch and it works well.
https://www.the-investing-desk.com/tools/investor-calculator

There's a weird behaviour when you hover that more labels suddenly appear, but otherwise it works as expected.

[simonbrunel]

@snird Thank you for your comment. The "weird behavior" your are seeing is probably the same issue as #233.

[simonbrunel]

@snird This should be fixed in v2.0.0-rc, can you please confirm?

[snird]

@simonbrunel sorry for the late response, I missed the notification.

I can confirm this is now fixed. Thank you,

[ndkhoa1011]

Good afternoon,

I am facing a problem with plugin "chartjs-plugin-datalabels (v1.0.0)". Could you teach me how to resolve this error?
Thanks so much!

Here is the error message:

TypeError: Cannot read property 'extend' of undefined
(anonymous function)
node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:587
584 | me._el = el;
585 | };
586 |

587 | helpers$3.extend(Label.prototype, {
588 | /**
589 | * @Private
590 | */

[simonbrunel]

@ndkhoa1011 and @Dishebh you must use version 2.x of this plugin, which is currently in beta:

npm install -S chartjs-plugin-datalabels@next

[Dishebh]

@simonbrunel, thanks for the reply. I am getting a TypeeError after doing what you suggested. Please refer to the image attached. I have tried versions 2.8.0. and 3.2.* of. chart.js and the error is common for both.

[dmahajan980]

@Dishebh were you able to find a solution to this problem?

[simonbrunel]

It's probably because in Chart.js v3, plugins should be registered with Chart.register(plugin) (docs).

[alexkuc]

What do you get when you type Chart.plugins in console? What about just Chart? The error message says that you are trying to use method .register on undefined variable which suggests that Chart is undefined.

[remkovb]

Hi,

I'm trying to get the RC-2 version of datalabels working with chart.js 3.2.1, but still no success.. It should do something right?

Here is my jsfiddle, could you please point me in the right direction with this?

https://jsfiddle.net/remkovb/zt48huqs/

[simonbrunel]

As explained in the docs, you need to explicitly register the plugin. In your case, you need:

Chart.register(ChartDataLabels);

https://jsfiddle.net/simonbrunel/nhk8ae03/

[jipiboily]

Hello folks!

We're using Chart.js through ChartjsNodeCanvas and tried to get the v2 RC1 version of datalabels to work.

None of the plugin loading techniques seems to be working.

I am getting an error like #162

But the workaround suggested in there doesn't seem to apply anymore.

I know it's not the ChartjsNodeCanvas repo, but I feel like it might be related to the RC. But I could be wrong :)

So, all that to say, are you aware of potential issues or a way to get it to work?

We can get it to run, once. And then we're getting an error starting at the second call.

How are we loading it? We're registering it with ChartJS.register(ChartDataLabels); In chartCallback.

But the second call (it's an API end point, no framework, just pure node) throws this:

TypeError: Cannot read property 'x' of null
    at orient (/Users/jp/code/grapherate/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:121:19)
    at Object.fallback [as positioner] (/Users/jp/code/grapherate/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:345:13)
    at coordinates (/Users/jp/code/grapherate/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:841:21)
    at Object.draw (/Users/jp/code/grapherate/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:1012:18)
    at Object.afterDatasetsDraw (/Users/jp/code/grapherate/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:1307:12)
    at callback (/Users/jp/code/grapherate/node_modules/chart.js/dist/chart.js:799:15)
    at PluginService._notify (/Users/jp/code/grapherate/node_modules/chart.js/dist/chart.js:6006:11)
    at PluginService.notify (/Users/jp/code/grapherate/node_modules/chart.js/dist/chart.js:5993:23)
    at Chart.notifyPlugins (/Users/jp/code/grapherate/node_modules/chart.js/dist/chart.js:7057:26)
    at Chart._drawDatasets (/Users/jp/code/grapherate/node_modules/chart.js/dist/chart.js:6833:8)

Thoughts anyone?

[simonbrunel]

Can you give us more context:

• what type of chart are you trying to render (i.e. bar, line, doughnut, financial, etc.)?
• do you use other plugins? if so, which ones and are they working as expected?
• does Chart.register(ChartDataLabels); called one time or multiple times per server instance?
• what is chartCallback? is it called for every API endpoint calls? can you share this part of the code?
• what Chart.js version are you using exactly?

Are you able to share / setup a repo that we can run to reproduce and debug this issue?

[jipiboily]

Sorry for the delayed reply here. It was a holiday here yesterday. I'll set up a repo to reproduce that later today and also provide all the details! :)

[jipiboily]

Here is the repro repo: https://github.com/jipiboily/chartjs-node-datalabels-repro

• Trying to render pies here.
• no other plugins
• Chart.js 3.3.0 (I had 3.2.1 in my original repo, but both seems to suffer from the same issue so I didn't force it)

Those lines can be interchanged to test different ways of loading and setting the plugin: https://github.com/jipiboily/chartjs-node-datalabels-repro/blob/ce79a3d94fc23fbe2957e0847ce27fc26c67daba/chartjs_renderer.js#L39:L42

Only line 42 seems to work, but only once. The factory never seems to be called in any case.

I'm not a Node guy (more of a Ruby guy), so I might have screwed up many things (I probably did). It's currently a PoC.

Thanks!

[simonbrunel]

The error you get is probably caused by the way ChartjsNodeCanvas handles the Chart.js library and plugins internally. Unfortunately, I'm not sure this node integration fully supports Chart.js v3. For example, Chart.plugins.register() is still used while it's not anymore supported by Chart.js v3 (thus you can't use the "modern" way to load plugins).

The factory is not called because it's part of the "legacy" API ... but I can't tell you more because I'm not familiar with this project. One way to workaround the issue you are experiencing is to move the construction of the ChartJSNodeCanvas outside of the GraphRenderer so there is only one instance created for all requests. But I doubt that this solution will be stable, neither will scale.

Please investigate this issue directly in the ChartjsNodeCanvas repository since you may get better support there. If at the end there is actually a bug in this plugin (and not because of the node integration), feel free to create a new ticket.

[jipiboily]

Gotcha. Thanks so much for looking into and the details. This is really appreciated!

[RaySanjeev]

i am using chart.js ^3.2.1 and chartjs-plugin-datalabels 2, after importing the chartjs-plugin-datalabels and using it with the plugins key in my chart, I am running my react app but getting an error saying cannot read property skip of undefined. From the source code it is coming from the !el._model.skip. I really need help in fixing this error. Any help on this would be appreciated.

[RaySanjeev]

this is the image of the error

[DougDK]

Seems like you haven't registered ChartDataLabels

Chart.register(ChartDataLabels);

or global

import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// Register the plugin to all charts:
Chart.plugins.register(ChartDataLabels);

chartjs-plugin-datalabels Registration
213#discussioncomment-753768

[DougDK]

As the #233 seems resolved, is there anything else that I could help with that is blocking the release of this next version? I would really appreciate helping, I have a patch for Chartjs3 in my project but the only blocker is the official release of chartjs-plugin-datalabes@2.0.0

[DougDK]

@simonbrunel could you please help me with this?

[simonbrunel]

@DougDK Done!