[Bug]: Type mismatch between svelte-chartjs and chartjs

[Taklop]

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

Current Behaviour

The chartjs types for things like Chart and ChartData don't match the expected types from svelte-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:

import type { Line as LineType } from 'svelte-chartjs';

type LineChartElement = Pick<LineType, 'LineProps'>['LineProps']['chart'];

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 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~"} />