Chart.js 3.0 support

[benmccann]

Chart.js 3.0 is out now

[umutdeveloper]

WARN in ./node_modules/vue-chartjs/es/BaseCharts.js
"export 'default' (imported as 'Chart') was not found in 'chart.js'
And also this in devtools:

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

First observed error 👍

[DenisFerrero]

I encountered the same problem... Is there a way to ignore this problem and show the charts anyway before the new release?

[komen205]

npm install chart.js@2
It fixed it for me

I encountered the same problem... Is there a way to ignore this problem and show the charts anyway before the new release?

[Gregory-Han]

Hi, Team.

When do you plan to upgrade to V3?
Thank you for your hard work.

[Tofandel]

Following the doc now will result in an error because of v3, the doc should change to npm install vue-chartjs chart.js@2 --save

Or v3 support should be added

[AlexVapniaruk]

Following the doc now will result in an error because of v3, the doc should change to npm install vue-chartjs chart.js@2 --save

Or v3 support should be added

Thanks! you saved my day!

[FagaDavide]

Thank you so much! You make my day 😘

[rahmaniali-ir]

@AlexVapniaruk Did that work?

[AlexVapniaruk]

@AlexVapniaruk Did that work?

Yes, downgrade chart.js to v2 will help with Warning and issue with chart display.

[ghoshsanjoy78]

Just spent a couple of hours trying to understand why this was happening. Anyone who recently downloaded the package will be hitting this. The workaround of downgrading to v2 worked. Would be good if the documentation on vue-chartjs.org could be updated to reflect this until v3 support lands.

[sageworksstudio]

Came here after using 3.2.0 and searching for
"export 'default' (imported as 'Chart') was not found in 'chart.js'

Downgrading to chart.js@2 didn't work. Still getting this error.

EDIT: Just realized Vue3 isn't supported. Sadness ensues.

[mfoschian]

In BaseChart.js rewrite the import

import Chart from 'chart.js'

into

import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-moment'; // or another adapter to avoid moment
Chart.register(...registerables);

You have also to change the code to match the new options syntax in v3 (expecially for the axes/scales)

[kamal94]

The upgrade to Charts.js 3 is needed for security reasons as well. Charts 2.9.4 (last 2.x release) has not been patched with critical vulnerability fixes.

[hajime9652]

In BaseChart.js rewrite the import

import Chart from 'chart.js'

into

import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-moment'; // or another adapter to avoid moment
Chart.register(...registerables);

You have also to change the code to match the new options syntax in v3 (expecially for the axes/scales)

@mfoschian Thank you very much. I don't get the error anymore, but renderChart doesn't seem to be working. Do I need to resolve this error?

[mfoschian]

@hajime9652 : can you share a simple project for futher investigation ? Usually I don't work in ts but in js.
Probably you have to touch some other ts apart of BaseChart.js in the source repo.

[lpeinado]

Hi,
I came here with same problem. After doing npm install vue-chartjs chart.js@2 --save I am still getting an error.
This is:

ERROR in ./node_modules/chart.js/dist/chart.esm.js
Module build failed: Error: ENOENT: no such file or directory, open '.../node_modules/chart.js/dist/chart.esm.js'

Does anyone know how to solve it?
Thanks a lot!

[hajime9652]

@mfoschian
Thanks for your replying.
I use vue-charjs in this repo.
https://github.com/tiangolo/full-stack-fastapi-postgresq

[jpaav]

@lpeinado I also got this error when I downgraded. It was fixed by restarting vue.

[rubik]

@apertureless Any indication on when Chart.js 3 will be supported? What is missing on vue-chartjs' side?

[apertureless]

Well, whats currently missing is simply time to properly review and rewrite vue-chartjs to be compatible with chart.js v3.

There are several points that need to be considered and tested.

1. New tree-shakeable imports

Most simple solution would be import Chart from 'chart.js/auto'. However this is also not the best solution. Because it would be a disadvantage in using vue-chartjs because this would import and register all modules. I would like to come up with a better approach, so people can also utilize tree-shaking in vue-chartjs.

2. Typescript

Chart.js 3 comes now with its own typings, so no need to use @types/chart.js. This means I have to look into this, how to rewrite and use chart.js internal typings etc. On top of that, I haven't used TS much, which makes this whole process and also testing kinda painfull.

3. Custom Charts

Chart.js v3 also changed the way you can create custom chart types. So I will need also to investigate on how to translate it into vue-chartjs.

4. Build System

While working on point 1. I ran into some issues, which may or may not be related to webpack. This project is still using webpack 3, which should be maybe updated to utilize all new features. But I think everyone knows that this is also a deep rabbit hole. Because the whole build process needs to be rewritten. I need to make sure, that the release build is working with current bundlers and setups (some people still use browserify, gulp, grunt, webpack, rollup etc.) and also that it works as a browser build.

5. Documentation

Depending on the points above, the usage of vue-chartjs may change, so the documentation needs to be updated. At least the way how custom charts are created will change. There are also some breaking changes in chart.js which need to be taken into account, like removing the HorizontalBar chart.

6. Other breaking changes

Because this is a breaking change, I will also include some of the older long-running issue which are breaking like #504 and also a rewrite of the reactivity mixins, because 90% of the issues here (which are not questions about usage or chart.js specific questions) are based on the reactivity mixins not working as they should.

So, you see there are a lot of todos and currently I don't have much time to investigate. So it is moving slowly.

[ratherblue]

@apertureless Is there a branch we can contribute on for v3 support?

[thebrownfox]

There's an alternative if you want chartsjs v3.
https://github.com/victorgarciaesgi/vue-chart-3

[Iwakinomotoye]

@toniengelhardt if you are asking if the chart is reactive with data change, according to what I read from the documentation, I dont think it is reactive. But i if you want the chart to update when you change data then you should follow their documentation here:
https://www.chartjs.org/docs/3.5.0/developers/updates.html

[Iwakinomotoye]

That is you must always call the chart.update() method. Please let me know if my answer is clear.

[toniengelhardt]

@Iwakinomotoye yes it is, thanks!

[digitalkaoz]

Tbh that is not et all the vue reactive way, and not the answer to the initial question ;) Toni ***@***.***> schrieb am So., 12. Sept. 2021, 18:16:

…

@Iwakinomotoye <https://github.com/Iwakinomotoye> yes it is, thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#695 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACHVVZC5NPIJFZE4INFGVTUBTG6JANCNFSM42KIXCQA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[onurusluca]

Still having the same error.
npm install chart.js@2
worked for me.

Update: use npm install vue-chartjs chart.js@2.9.4

[ryuchaehwa]

@onurusluca Thank you so much, it worked out at once! while none of solution above doesn't work ;-).

[toniengelhardt]

@digitalkaoz I'm with you. vue-chartjs is reactive, whereas the proposed solution is not, which means we need to wait for the package to support Chart.js 3.0.

[jastax]

@apertureless Is there going to be ChartJs 3.x support? Otherwise I will have to migrate soon

[Vilezaricoul]

@onurusluca Uncaught (in promise) TypeError: createElement is not a function

tried everything, chart 2.9.4

[jastax]

Heads up for everyone waiting for 3.x support:

I've migrated to ChartJS 3.5 and while it's a lot of work, it's worth it (stacked scales, multi color lines, ...). I wouldn't wait for an update for this lib as most of the migration work will have to be done anyway.

@apertureless thank you for your work on this component, it was really helpful to me!

[Jsv97]

Following the doc now will result in an error because of v3, the doc should change to npm install vue-chartjs chart.js@2 --save

Or v3 support should be added

Thanks bro it works now

[WelaurS]

Bump, v3 support is really necessary.

[DaveL17]

I have chartjs 3.6.0 working well with Vue 3 with one exception. I've been unable to figure out how to include more than one instance of a chart type on the same page. My structure is thus:

• Chart.vue [component]: Stuff that all charts will use. Import chart.js, creates canvas, accepts props for chart type, data, and options. I also set global defaults here.
• BarChart.vue [component], LineChart.vue [component] (etc.): import Chart.vue, contains chart type, data and options.
• Home.vue [view]: page to display the chart(s). i.e.,

    <TileFormat class="A" tileSize="tile-double" :showButton="false" :yOverflow="false" header="bar chart" @click="wasClicked">
      <BarChart class="ChartBarTile" :chartHeight="160" :chartWidth="375" style="display: flex; justify-content: center;"/>
    </TileFormat>

One instance of any chart and multiple charts of different types (i.e., 1 bar, 1 line) works perfectly. However, trying to display 2 or more charts of the same type results in Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. The solution for this in vanilla JS is clear; however, I haven't been able to figure out where to destroy the canvas in Vue so the additional charts can be drawn.

Have I coded myself into a corner? Suggestions most welcome.

I followed this repo as an example.
"Full" code snippets on StackOverflow

EDIT:
I found a workable solution. I added a working example as an answer to the Stack question above.

[paidge]

Here is my Vue2/Nuxt2 component for using ChartJS v3. I'm a newbie in Vue's world so the code could be probably improved

[sneko]

Any news on supporting Chart.js v3.x?

Or is it better to throw away vue-chartjs? Any recommendation?

Thank you,

[dangreen]

@sneko I'm with @thabarbados working on refreshing the project's infrastructure, after that we going to upgrade the code to make it compatible with chart.js v3

[thebrownfox]

@sneko There's been replacement for like 4 months already.
https://github.com/victorgarciaesgi/vue-chart-3

[Tigran-Harutyunyan]

this fixed for me. But you have to use it locally. import { Line } from "yourpath .... /vue-chartjs/es/index"; Until it gets fixes ((

[CarlosVelasquezAyan]

this fixed for me. But you have to use it locally. import { Line } from "yourpath .... /vue-chartjs/es/index"; Until it gets fixes ((

This worked for me with this setting.

[thabarbados]

A new version 4.0.0 of vue-chartjs with Chart.js 3 support is already available on npm.

[soyekeye]

@onurusluca Uncaught (in promise) TypeError: createElement is not a function

tried everything, chart 2.9.4

Were you able to fix this

[snwlprdgthb]

npm install chart.js@2 It fixed it for me

I encountered the same problem... Is there a way to ignore this problem and show the charts anyway before the new release?

It still working for React and Next projects ! Thanks