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

netcodedev commented 11 months ago

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 commented 11 months ago

I have the same issue..

diramazioni commented 11 months ago

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 commented 10 months ago

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 commented 10 months ago

@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 👍🏼