givewp
givewp copied to clipboard
ChartJS should be updated to 3.x to improve speed and bundle size
Details
We use ChartJS for our reporting and are using ChartJS 2.x. It does a good job, but is absolutely massive and bloats the bundle size (~450kb). This also slows things down. About a month ago ChartJS 3.x came out which supports Tree Shaking. This is really the reason it was so huge.
Updating to ChartJS 3.x will help reduce the bundle size and overall speed.
Additional Context
Migration Guide: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
Acceptance Criteria
- [ ] Reporting uses ChartJS 3.x
Important Note: chartjs-plugin-crosshair
is not compatible with Chart.JS 3.x - there is some community movement working on that upgrade, but the transition is not complete.
See https://github.com/AbelHeinsbroek/chartjs-plugin-crosshair/pull/65
@JasonTheAdams This is close enough, right? @DevinWalker won't notice a difference 😅
ChartJS 2.x | ChartJS 3.x |
---|---|
![]() |
![]() |
There is a lot to dig through, so I don't think I'll be able to complete this upgrade before the next cycle.
That said, here are my notes on what I was able to upgrade:
- Importing from
chart.js
now returns a spread of objects, not just theChartJS
class.-
import { Chart as ChartJS } from 'chart.js'
-
- Line
tension
needs to be specified incomponents/chart/utils/index::formatData()
, as the default value is now0
.-
tension: 0.4,
-
- Tree shaking requires that controllers, elements, scales, and plugins are imported and registered as needed.
-
Chart.register(...registerables)
-
- Time scales require importing the date library and adapter.
-
import 'chartjs-adapter-moment';
-
Also, I wasn't able to get the fill
to work - in the example I was able to add a fill: true
property/value alongside tension
, but that did not seem to work locally.
This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 14 additional days.
This issue was closed because it has been stalled for an additional 14 days with no activity.