This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TS: Argument of type 'HTMLElement' is not assignable to parameter of type 'ChartItem' #9427
Comments
I looked into this and export declare type ChartItem =
| string
| CanvasRenderingContext2D
| OffscreenCanvasRenderingContext2D
| HTMLCanvasElement
| OffscreenCanvas
| { canvas: HTMLCanvasElement | OffscreenCanvas }
| ArrayLike<CanvasRenderingContext2D | HTMLCanvasElement | OffscreenCanvas>; Passing any import Chart from 'chart.js/auto';
function generateBarChart(res: any): any {
const chartElem = <HTMLCanvasElement>document.getElementById(`bar-chart`);
const data = {
labels: res.labels
datasets: [{ label: `Number of items`, data: res.data }],
};
const chartConfig = {
type: 'bar',
data,
options: {
...
},
};
return new Chart(chartElem, chartConfig);
} |
Ok thanks, I also had to cast the type of chartConfig as ChartConfiguration to prevent this type error:
So the final code became: import { ChartConfiguration } from 'chart.js';
import Chart from 'chart.js/auto';
const chartElem = document.getElementById(`bar-chart-week${idSuffix}`) as HTMLCanvasElement;
...
const chartConfig = {
...
} as ChartConfiguration;
... I would recommend to add a documentation about this somewhere for TypeScript users (and Angular users). |
It looks like TS is having trouble inferring the type from the options. You don't need a cast though, if you declare the const chartConfig: ChartConfiguration = {
type: 'bar',
data,
options: {},
}; |
If I use const chartConfig: ChartConfiguration = { Then the line with
|
If I edit index.esm.d.ts at line 3299 with this, the above error goes away: ...
export interface ChartTypeRegistry {
[bar: string]: { // line 3299, it was bar: {
chartOptions: BarControllerChartOptions;
... Inspired from: https://www.typescriptlang.org/docs/handbook/2/keyof-types.html |
What version of typescript are you using? |
Ok, I tested with 4.1.x and it worked fine. There are other things broken starting in 4.2.0 (#9328 for example) |
@DavideViolante are you able to test this again with chart.js v3.5.0? The types should work better for TS >= 4.2.0 |
It's working with the same code as before, using |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Expected Behavior
No error?
Current Behavior
Possible Solution
idk
Steps to Reproduce
I just upgraded from 3.3.2 to 3.4.x
Context
Angular project:
Environment
The text was updated successfully, but these errors were encountered: