[Bug]: Wrong typings for Bar component about vue-chartjs HOT 7 OPEN

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

from vue-chartjs.

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.

from vue-chartjs.

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

from vue-chartjs.

import type { ChartData } from 'chart.js'

then use it to type your data variable:

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

from vue-chartjs.

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

from vue-chartjs.

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'> ]
}

from vue-chartjs.

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

from vue-chartjs.