Decimation doesn't work with Lit (Shadow-dom?)

[exetico]

Update:

@LeeLenaleee pointed out that I've not imported the Decimation plugin (Thanks!). I didn't notice that, as Chart.js didn't tell me about it. Clearly a mistake but myself, but I'd like Chart.js to do so.

I'm sorry about submitting a support-related ticket here. I really thought something wierd was going on.

---

Expected behavior

I expect Decimation to work in a Lit Element, like it works if integrated into other frameworks.

Current behavior

Right now nothing happens if I use Decimation within the Lit Element. I'm unable to see any errors thrown or similar.

I think it could be related to the dom, if Chart.js does use that, as it's normally would use the size of the canvas for threshold calculations.

At this point, I'm unsure on how to continue.

Reproducible sample

https://codesandbox.io/p/sandbox/lit-with-normal-integration-reference-7ygzdx

Optional extra steps/info to reproduce

Add Chart.js to a Lit Element, and try and use the decimation function. I'm unable to get it to work as expected.

I've reproduced the example from the docs, which I've worked with.

Not working: Lit with chart defined as property on my Lit Element: Go to Codesandbox.io Not working: Lit with chart ref defined outside Lit Element: Go to Codesandbox.io Test without Lit with UDM version of Chart.js: Go to Codesandbox.io Just made as done in the docs.

Possible solution

I'm unsure of why it's not working as expected.

Context

I'm trying to plot a time-series of data. But the provided data are just generated, as it's done in the docs, to make it as simple as possible.

You'll notive the the UDM example works just fine, but none of my Lit solutions works with decimation. As this point, I'm unsure if I'm overlooking something. I've personally wondered, if it's related to the shadow-dom and the way decimation uses the dom-element itself. But I really hope it's possible to fix in Chart.js, or patch, somehow, without using a light dom (if that has anything to say, all other features I've tested, works as expected)

chart.js version

v4.4.1

Browser name and version

Google Chorme 121.0.6167.184 and Firefox Developer Edition 123.0b4 (macOS)

Link to your project

No response

[LeeLenaleee]

You need to import and register the decimation plugin: https://codesandbox.io/p/sandbox/lit-with-normal-integration-reference-forked-8jwd5s?file=%2Fsrc%2Findex.js

[exetico]

What the actual.... It's clear that I've searched all the way too much, instead of just looking after the plugin imports. I've already imported the Legend plugin, so I didn't think of a missing Decimation plugin, cause... reasons.

I'd be cool to have Chart.js scream about a provided plugin-configuration, without the needed component imported, as it's doing if a adapter is missing, and similar.

Thank you for the quick reply, Jacco.

[LeeLenaleee]

No problem, have a nice day.

We are with a small team but it is indeed a nice to have to warn people about missing registers for plugins.