I can think of two possible solutions, but am unsure of implementation details.
Solution 1
The types of the props of svelte-chartjs components match the types of chartjs.
<script lang="ts">
import { Line } from 'svelte-chartjs';
import type { Chart } from 'chart.js';
let chartElement: Chart<"line"> | undefined;
</script>
<Line bind:chart={chartElement} data={"~add data as usual~"} />
Solution 2
svelte-chartjs exposes it's types easily to be used as so:
<script lang="ts">
import { Line } from 'svelte-chartjs';
import type { Chart } from 'svelte-chartjs' // could also be something like { Line }
let chartElement: Chart<"line"> | undefined; // then this would be chartElement: Line | undefined
</script>
<Line bind:chart={chartElement} data={"~add data as usual~"} />
Would you like to work on a fix?
Current and expected behavior
Current Behaviour
The
chartjs
types for things likeChart
andChartData
don't match the expected types fromsvelte-chartjs
data.It seems the issue is that the datapoints described by
TData = DefaultDataPoint<TType>
includes| null
which don't match with chartjs.This requires some type fiddling to access the
svelte-chartjs
type, with stuff like:Expected Behaviour
The
svelte-chartjs
types match, for data, binding the element, etc.Desired behaviour described in possible solution.
Reproduction
https://github.com/Taklop/svelte-chartjs-bug
chart.js version
4.4.1
svelte-chartjs version
3.1.5
Possible solution
I can think of two possible solutions, but am unsure of implementation details.
Solution 1
The types of the props of
svelte-chartjs
components match the types ofchartjs
.Solution 2
svelte-chartjs
exposes it's types easily to be used as so: