chart js 3 alpha

[guykatz]

hi guys;
at what point in time do you think vue-chartjs will start integrating with the newly released 3.x? alpha? beta? RC? stable?
thanks in advance!

[apertureless]

Hi @guykatz

I just checked out the changelog for the alpha release.
However, most changes are internals which will not affect vue-chartjs in most cases, at least from what I can tell right now.

Actually `vue-chartjs´ should now work with the v3 alpha of chart.js.

As soon as Chart.js reaches RC state I will start to properly test if everything is working and bumping the peerDependency version.

[fergusmeiklejohn]

Actually `vue-chartjs´ should now work with the v3 alpha of chart.js.

Maybe we need a line in the readme about compatibility? From reading the docs it seems like vue-chartjs might not support all of chartjs and/or might be behind chartjs in release cycle. I was also just wondering about chartjs extensions for example.

[apertureless]

From reading the docs it seems like vue-chartjs might not support all of chartjs and/or might be behind chartjs in release cycle.

What makes you think that?

The docs quite clearly stated, that vue-chartjs is a wrapper around chart.js. And chart.js is configured as a peerDependency. Thus the users, can install specific versions of it or upgrade/downgrade to specific versions.

I mean you install vue-chartjs and chart.js in your project. Thus you will always have the latest version of chart.js.

And as long as the general chart initialization does not change, vue-chartjs should be compatible with every chart.js version.

Thats also a reason why chart.js is a peerDependency. So I don't have to bump the chart.js version with every release.

As soon as Chart.js v3 is going into a RC state, I will take a deeper look into it. But for now it does not make any sense for me.

Furthermore, the only area where breaking changes could affect vue-chartjs is in the reactive mixins. Because they make use of some internals. But like I said in my previous post, at least for now, I can't see any breaking changes that would affect vue-chartjs.

I was also just wondering about chartjs extensions for example.

And what are you wondering in particular? I mean vue-chartjs has support for (most) Chart.js extensions (I guess you mean the plugins?).

Chart.js v3 will break a lot of extensions I guess, because of the internal api changes. But I don't really see why this should affect vue-chartjs.

If you're running vue-chartjs with the chart.js v3 alpha, you have to make sure, that the plugins are compatible with v3.

[thismarcoantonio]

I couldn't use this package with the next version. I get an error related to webpack imported, maybe because the new V3 way of importing and register the elements, controllers, charts and etc...

[apertureless]

Yeah it seems that npm users now (with 3.0.0-alpha.2) have to manually import the "things they need" and register them.
Tbh not sure how I should feel about this.

If you really want to use the alpha, I think you can manually import chart.js the "new way" and it should maybe work.

import Chart, LineController, Line, Point, LinearScale, Title from `chart.js`

Chart.register(LineController, Line, Point, LinearScale, Title);

It is also worth to mention that horizontalBar is removed in v3 as a chart type.

[Mihailoff]

More granular import helps reduce the overall size of the JS bundle. Let's say you use only one chart type and don't need others, Webpack then will add only the files in use.

Maintainer reports v3.alpha.2 as being fairly stable -- chartjs/Chart.js#6598 (comment)

[apertureless]

@Mihailoff

More granular import helps reduce the overall size of the JS bundle. Let's say you use only one chart type and don't need others, Webpack then will add only the files in use.

Yeah I understand the reasoning behind this. On the other hand, it should be IMO only optional. Like most of other libs do it. But as far as I understand it, it is mandatory for npm users now.

The problem I see with this, is that new users are quite overwhelmed, what to import and why. Because it requires some knowledge of what to use.

It also kind of breaks the purpose of this package. Beacuse vue-chartjs should be an easy wrapper, people could use in their projects, without messing around with chart.js initialization etc. But now, it would require to manually import all required packages (again, how should I know what do I need?) and then import vue-chartjs.

If I find some time I will need to look how it could be implemented without requiring the user to import all required chart.js packages manually. Because otherwise I don't think it makes much sense to continue working on vue-chartjs.

IMO a wrapper should always abstract work from you and make it easier to interact. Which I am not sure is given now, with chart.js v3.

Maintainer reports v3.alpha.2 as being fairly stable -- chartjs/Chart.js#6598 (comment)

Well, yeah. However they could always introduce more breaking changes.
The whole imports part changed from 3.0.0-alpha to 3.0.0-alpha.2.

[maharzan]

Does this alpha version work with Vuejs 3 rc version? I am trying to make it work but cannot even after I add the two import/register lines above, throws error. If you have any working sample for any simple chart with vue 3, that would be great to get started with. Thanks.

[apertureless]

@maharzan

Well yes and no. It won't work out of the box right now, because Chart.js changed the initialization process. You now have to seperately import all Chart.js modules you want to use. Even tho I am not sure, how a (new) user should know what to use... ¯_(ツ)_/¯

I did not confirmed this, but it should work like this:

<script>
  // Import the chartjs modules you want to use...
  import { Chart, LineController, Line, Point, LinearScale, Title } from `chart.js`
  
  // Import the Line chart from vue-chartjs
  import { Line } from 'vue-chartjs'
  
  // Register your chart.js components
  Chart.register(LineController, Line, Point, LinearScale, Title);

  export default {
    extends: Line,

    mounted () {
      this.renderChart(data, options)
    }
  }
</script>

[zbateson]

@apertureless --

You can continue to make it easier for everyone by doing the import/registration in vue-chartjs, so in the end the effect is the same. At the moment vue-chartjs doesn't work with chart.js v3 beta, because the import line "import Chart from 'chart.js'" no longer works.

I created a small pull request in #658 with an updated BaseChart.js that does that -- it wouldn't be compatible with v2 though.

Thanks for all your efforts with this library 👍

[T0-B1]

@zbateson
I tried out your code with chart.js 3.0.0-beta and beta.6 but still got errors related to
__WEBPACK_IMPORTED_MODULE_0_chart_js___default.a is not a constructor
(webpack version 4.44.2)

Would like to provide a reproducible fiddle but apparently codesandbox doesn't support github branches dependency in package.json.
Any suggestion?

[zbateson]

@T0-B1 -- hmm, I'm really not an expert on this, just noticed this ticket and wanted to nudge a solution forward.

I can tell you I'm on 3.0.0-beta.6 and actually am also using webpack 4.44.2 without issues. My setup is using laravel-mix, so I'm not configuring webpack directly, but it is working for me. I'm able to load and use charts.

[Rubenpannen]

@apertureless Any updates on v4.x since ChartJS has now reached RC state?

[adarshmadrecha]

For anyone come looking 👀 for update - #695 (comment), here's the reply from Repo owner.