ChartJS should be updated to 3.x to improve speed and bundle size

[JasonTheAdams]

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

[kjohnson]

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 AbelHeinsbroek/chartjs-plugin-crosshair#65

[kjohnson]

@JasonTheAdams This is close enough, right? @DevinWalker won't notice a difference 😅

ChartJS 2.x	ChartJS 3.x

[kjohnson]

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 the ChartJS class.
  • import { Chart as ChartJS } from 'chart.js'
• Line tension needs to be specified in components/chart/utils/index::formatData(), as the default value is now 0.
  • 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.

[github-actions]

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.

[github-actions]

This issue was closed because it has been stalled for an additional 14 days with no activity.