Cannot find Chart object in Vue app

[autorunman22]

I'm trying to integrate this package on my vue app but somehow an error pops out on the console Cannot find Chart object.

<script>
   import Chart from 'chart.js/auto'
   import 'chart.js-plugin-labels-dv'
...
</script>

Did I miss anything here?

[DavideViolante]

Idk about Vue, on Angular I'm importing only

import Chart from 'chart.js/auto';

and then using new Chart(...)

If you make it work with Vue, let me know and I add the info in the readme.

[brease-colin]

I've tried your suggestion in Vue, but it doesn't work for me. I think where this goes wrong in Vue (and React as well, looking at another issue), is because in the instructions for Angular, the following is mentioned:

Edit angular.json and add inside the "scripts" array: "node_modules/chart.js/dist/chart.min.js"

I'm no Angular expert, but it appears to me that this 'overrules' the whole treeshaking setup of v3.0 of Chart.js by including the entire Chart.js script and setting the global Chart variable that is required by this extension.

Since there's no equivalent setup mentioned for Vue / React, errors occur there or the plugin does nothing at all. I'm sure it'd work fine if the same .js file is imported somewhere in the Vue or React project, but I'm not sure if that's the best solution.

Maybe there's another way to access Chart from within the plugin? If no nice solution can be found, you could also add an alternative location, like window.Chart? It's easier (although still not that nice) to add a 'global' variable to window from Typescript.

Either way, thanks for forking this library, the functionality was great in Chart.js 2.0 and it would be nice to have the same in v3! 👍

[DavideViolante]

You should follow the same steps as installing any other third party library into a Vue project. For example how do you add jQuery ot similar library to Vue and how do you use it? It should work the same for Chart.js. Let me know if you succeed somehow, thanks.

[brease-colin]

Chart.js is added the normal way and works well, except for this plugin, even though the plugin was used the same as the previous version. Making changes like you suggest in earlier comments didn't help either.

I've used dozens of other libraries in Vue and both Chart.js and this plugin are added the same way.

What NPM libraries usually don't do however, is setting a global variable (like Chart). Maybe chart.js 2.0 did this and that's why the labels plugin worked the way it used to. Chart.js 3.0 doesn't do this anymore if added through NPM install, which is a good thing.

I see two possible solutions: either there should be a way to pass along Chart to your plugin or you can add chart.js as a dependency yourself and import it, using: import { Chart } from 'chart.js';

Like I said before, I don't know much about Angular, but it feels to me like the below line should not be required to make a library or plugin function in Angular. It should not be required to point to a .js-file directly.

Edit angular.json and add inside the "scripts" array: "node_modules/chart.js/dist/chart.min.js"

I mean, looking at an example guide like here, there's no mention of having to edit angular.json if you want to use Chart.js in Angular: https://tudip.com/blog-post/how-to-implement-chart-js-in-angular/

[aphavichitr]

Chart.js is added the normal way and works well, except for this plugin, even though the plugin was used the same as the previous version. Making changes like you suggest in earlier comments didn't help either.

I've used dozens of other libraries in Vue and both Chart.js and this plugin are added the same way.

What NPM libraries usually don't do however, is setting a global variable (like Chart). Maybe chart.js 2.0 did this and that's why the labels plugin worked the way it used to. Chart.js 3.0 doesn't do this anymore if added through NPM install, which is a good thing.

I see two possible solutions: either there should be a way to pass along Chart to your plugin or you can add chart.js as a dependency yourself and import it, using: import { Chart } from 'chart.js';

Like I said before, I don't know much about Angular, but it feels to me like the below line should not be required to make a library or plugin function in Angular. It should not be required to point to a .js-file directly.

Edit angular.json and add inside the "scripts" array: "node_modules/chart.js/dist/chart.min.js"

I mean, looking at an example guide like here, there's no mention of having to edit angular.json if you want to use Chart.js in Angular: https://tudip.com/blog-post/how-to-implement-chart-js-in-angular/

@brease-colin did you ever get this to work?

[DavideViolante]

Anyone tried something similar to this: https://github.com/DavideViolante/chartjs-plugin-labels/issues/5#issuecomment-1018550541? If someone make it work please comment here so I add the info on the readme.

[CodingLogistics]

I'm using a personally modified version of the original library that this is forked on that allows me to add border radius and rotation to the images. I got mine to work by not having the function run initially and instead call it while passing through the Chart object. Here's a code snippet:

import Chart from 'chart.js/auto';
import * as helpers from 'chart.js/helpers';
Chart.helpers = helpers;
import { chart_images } from '@/plugins/chart-images';
chart_images.init(Chart);

I'm sure there's a cleaner way to do this but this worked for me. This might give a bit on insight at least.

[zay0od]

I tried this with Vue3 and it works for me:

import Chart from "chart.js/auto"; import * as helpers from "chart.js/helpers";

and then inside the created() hook:

  async created() {
    window.Chart = Chart;
    Chart.helpers = helpers;
    awaitimport("chart.js-plugin-labels-dv");
  },

I hope this helps

[Lahe]

This worked for me with Vue 3 Composition API and Chart.js v4.3.0:

import { Chart as ChartJS } from 'chart.js'
import { getChartLabelPlugin } from 'chart.js-plugin-labels-dv'
ChartJS.register(getChartLabelPlugin())