[Bug]: Warning when using with svelte version ^4.0.0

[netcodedev]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Library should just work without errors or warnings

Reproduction

https://codesandbox.io/p/sandbox/black-wood-2hz8vj

chart.js version

^4.3.0

svelte-chartjs version

^3.1.2

Possible solution

Update the dependency to svelte@^4.0.0

[okuruu]

I have the same issue..

[diramazioni]

More then a warning, it just doesn't work!, And doesn't produce any visible error either, beside the console log hinting to add import for Filler option that I did I see no further error.
In ts/vscode I see error if I hover in {data} for <Line {data} options={{ responsive: true }} />

Type '{ labels: string[]; datasets: { label: string; fill: boolean; lineTension: number; backgroundColor: string; borderColor: string; borderCapStyle: string; borderDash: never[]; borderDashOffset: number; ... 10 more ...; data: number[]; }[]; }' is not assignable to type 'ChartData<"line", (number | Point)[], unknown>'.
  Types of property 'datasets' are incompatible.
    Type '{ label: string; fill: boolean; lineTension: number; backgroundColor: string; borderColor: string; borderCapStyle: string; borderDash: never[]; borderDashOffset: number; borderJoinStyle: string; ... 9 more ...; data: number[]; }[]' is not assignable to type 'ChartDataset<"line", (number | Point)[]>[]'.
      Type '{ label: string; fill: boolean; lineTension: number; backgroundColor: string; borderColor: string; borderCapStyle: string; borderDash: never[]; borderDashOffset: number; borderJoinStyle: string; ... 9 more ...; data: number[]; }' is not assignable to type 'ChartDataset<"line", (number | Point)[]>'.

so the problem may be due to a change of chartjs dataset format?

[SkepticMystic]

I can confirm that @rbozan's suggestion (#112) works in my project:

For installing through npm:

npm i github:SauravKanchan/svelte-chartjs#renovate/svelte-4.x --force

Or you can just override it in package.json

  "overrides": {
    "svelte-chartjs": {
      "svelte": ">=4.x"
    }
  }

Specifically, the overrides option works for me, I have not tried the first approach.

[thomasdom]

@SauravKanchan any updates on this topic? We'll be implementing the workaround mentioned above, but it would be better if the lib was updated properly 👍🏼

[exislow]

+1

Can you please update it?

[niemyjski]

I think this will be resolved in the next update.

[niemyjski]

This is fixed in the latest release https://github.com/SauravKanchan/svelte-chartjs/releases/tag/v3.1.4