[Bug]: Wrong typings for Bar component

[Oleksii14]

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

Bar component has these typings in vue-chartjs/dist/typedCharts.d.ts:

export declare const Bar: TypedChartComponent<"bar", (number | [number, number] | null)[], unknown>;

The chart data can be also an array of objects like [{ x: Date; y: number }] or similar. When I provide such data type to the Bar component, I receive related type errors from vue-tsc:

Type '{ datasets: { label: string; data: { x: Date; y: number; }[]; backgroundColor: string; grouped: boolean; maxBarThickness: number; }[]; }' is not assignable to type 'ChartData<"bar", (number | [number, number] | null)[], unknown>'.

In the reproduction section, don't forget to run project in the TypeScript workspace (the sandbox has JS workspace so you will not see any errors)

Reproduction

https://stackblitz.com/edit/github-ucglyx?file=src%2FApp.vue

chart.js version

v4.4.0

vue-chartjs version

v5.2.0

Possible solution

Adjust the typings

[noygafni]

I am having the same problem, this must be fixed.

But for now, do you have a workaround? Because right now typescript check fails and we are not able to build the project.

[ngekoding]

Because of this issue, I switch to Google Charts and it solve my problem.

[mghlb]

import type { ChartData } from 'chart.js'

then use it to type your data variable:

const data: ChartData<'bar'> = ...

[goodwan]

same problem.

according to chart.js docs, internal format for bar chart is

{x, y, _custom} where _custom is an optional object defining stacked bar properties: {start, end, barStart, barEnd, min, max}. start and end are the input values. Those two are repeated in barStart (closer to origin), barEnd (further from origin), min and max.

which is kind of extended Point, but not [number, number] as in the vue-chartjs

[goodwan]

I am having the same problem, this must be fixed.

But for now, do you have a workaround? Because right now typescript check fails and we are not able to build the project.

I use casting to any like

const dataset: any = apiData.map(d => ({x: ..., y: ...}));
...
{
    datasets: [ dataset as ChartData<'bar'> ]
}

[Oleksii14]

The issue should be resolved in the latest version of vue-chartjs. As soon as the main lib's related PR is merged, I will restore the previous algorithm of type generation, since the original issue is related to the Chart.js

[Oleksii14]

UPD: Chart.js supports generic types so you can easily provide own type of the data while initializing a chart, so there's no issue with Chart.js itself (see comment here).

The interface fix for this issue is already in the main vue-chartjs branch, but I will try to rethink this solution via Vue generic components