Plugin import and registration.

[dbauszus-glx]

I have npm installed chart.js (^3.5.1) and chartjs-plugin-datalabels (^2.0.0).

I got stuck at trying to a dynamic module import. https://stackoverflow.com/questions/69543515/dynamic-import-of-chart-js-with-plugins

Having failed to do a dynamic import I tested the regular import from local install but this doesn't work neither.

The integration notes for this module use following example.

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

I don't think this can work.

I can use the auto registration import for chart.js to use the core library.

import Chart from 'chart.js/auto';

Importing and registering the plugin doesn't seem to be possible though.

import Chart from 'chart.js/auto';

import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels)

This will fail because of the chartjs helpers.

Any advice on the import of this and indeed any chartjs module?

[dbauszus-glx]

This can be closed. Import and registration do work. Just not for pie charts. Odd. I will open a bug report with chart.js the main repo.

[dbauszus-glx]

The documentation for this plugin is still wrong though and should use import from chart.js/auto

[dbauszus-glx]

Actually I am not so sure whether this is a bug in chart-js main repo or in this plugin.

The plugin registration is trying to read something from the x-axis which doesn't exist in a pie chart.

I updated my codepen. This works with a bar chart. Change the chart type to pie and the plugin registration breaks with a debug warning in regards to the x-scale. If however added from script tag the plugin works on a pie chart. 🤷

Any advise?

[simonbrunel]

Somehow, there is multiple versions of chart.js imported in your Codepen:

await import("https://cdn.skypack.dev/chart.js") 
// imports [email protected]

await import("https://cdn.skypack.dev/chartjs-plugin-datalabels") 
// imports [email protected]
    // which imports [email protected]

That means the plugin uses classes from a different version of chart.js than the one used to create the chart. And this is why it fails to determine the type of element and uses the fallback positioner, which doesn't work with ArcElement.

It's not a bug in this lib but an issue with the way imports are resolved. I don't know why skypack picks chart.js 3.5.0 instead of 3.5.1 when importing the plugin but maybe there is a way to configure it. As a workaround (and probably a good practice), you can import specific version of both packages:

const { Chart, registerables } = await import("https://cdn.skypack.dev/[email protected]");
const plugin = await import("https://cdn.skypack.dev/[email protected]");

Chart.register(...registerables, plugin.default);

https://codepen.io/simonbrunel/pen/PoKqZBQ

Though, I'm not sure that [email protected] will always import [email protected] using this skypack link.

[dbauszus-glx]

Excellent find. Let me see whether skypack can rebuild the plugin.

I assume the build is triggered on release.

Chart.js 3.5.1 was released on 18th August. https://www.skypack.dev/view/chart.js

Plugin-Datalabels 2.0.0 was released on 1st July https://www.skypack.dev/view/chartjs-plugin-datalabels

This would explain why the skypack build process would have used an older version of the library.

[dbauszus-glx]

It's an issue with skypack pinning dependencies. As outlined in this issue. skypackjs/skypack-cdn#86

I marked your answer as this put us on the right track. Nothing we can do here. It's down to the skypack team to sort this out.