Upgrade chart.js to v4

[thmsobrmlr]

We're on v3 of chart.js, but a v4 version was released. See here for a migration guide https://www.chartjs.org/docs/latest/migration/v4-migration.html.

Note that finding things that are incompatible with chart.js v3 is also a good outcome of this task.

Some things to check:

• [ ] Are the chart.js plugins we use compatible with the new version
• [ ] Do the various insight configurations work with the new version (probably easiest to use a trends insight and checking the various display options; it might also make sense to run storybook and check the insights there)
• [ ] Do visual regression tests still run after the upgrade (probably easiest push the changes and let CI run)

[nategrift]

Did some research into upgrading chart.js to v4. Here are my findings for each plugin.

• ❌ chartjs-adapter-dayjs-3 - it's compatible but stale repo, so unless you use npm i --force it won't run due to outdated package.json which is not an acceptable solution.
• ✅ chartjs-plugin-crosshair - had some breaking issues before upgrading, reached out and got admin rights to repository, I released a new v2.0.0 of this plugin to be compatible with chart.js v4 for anyone who uses the plugin.
• ✅ chartjs-plugin-datalabels - has already been upgraded for v4
• ✅ chartjs-plugin-stacked100 - has already been upgraded for v4

Based on these findings, it is not possible to simply update the plugins and continue, however, see below an alternative.

Alternatives I have considered

• To migrate to chart.js v4 we can either create a fork of chartjs-adapter-dayjs-3 and change dependency requirements OR we can take the small ~80 lines of the plugin and build it into PostHog the app (as the plugin is under the MIT license).

@thmsobrmlr Let me know if you want me to proceed, I am happy to make the migration. My recommendation would be to do option 2 (implement adapter in PostHog repo) as it is the easiest to maintain and doesn't require creating a new package.

[thmsobrmlr]

Awesome findings @nategrift! And congratulations on becoming chartjs-plugin-crosshair admin 😅

I‘m without laptop until the 16th and will have a closer look then. cc @Twixes @mariusandra if you have comments meanwhile.

Regarding the issue with chartjs-adapter-dayjs-3: We‘re using pnpm, which supports a resolutions field in package.json. Maybe that could help, though unsure without having looked at the actual issue myself.

[nategrift]

Okay, sounds good! When you get back and take a look, just tag me!

[thmsobrmlr]

I've had a brief check and was able to use the updated packages without other changes (didn't run into an issue with pnpm). Thus we'd be ready to try the upgrade from a dependency resolution point of view. Do you want to give it a try @nategrift?

[nategrift]

Sure! I would be happy to do that.

[AvaterClasher]

Is this still open ?

[sejalgolani2801]

I would be happy to help. Is the issue still open?