[Bug] Cannot pass Canvas object into echarts.init in Typescript nodeJS

[junyingg]

Version

5.30

Link to Minimal Reproduction

No response

Steps to Reproduce

Hi, I am currently replicating this server side rendering example provided for canvas and facing this issue where I'm unable to pass in the Canvas object into the echarts.init function due to a type mismatch

Am using nodeJS:

Code portion:

import * as echarts from "echarts";
import { createCanvas } from "canvas";

const canvas = createCanvas(800, 600);
  // ECharts can use the Canvas instance created by node-canvas as a container directly
  const chart = echarts.init(canvas);
  chart.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  });

Current versions:

"canvas": "^2.9.0",
"echarts": "^5.3.0",

It seems that the error is caused by type mismatch between the input and the accepted parameters for Typescript. Looking for anyone to advise on this issue, thanks!

Current Behavior

Error line:
const chart = echarts.init(canvas);

Error:

Argument of type 'Canvas' is not assignable to parameter of type 'HTMLElement'.
  Type 'Canvas' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 277 more.ts(2345)

Expected Behavior

No issue with inserting Canvas object into echarts.init function, as stated here

Mentioned in the code sample
// ECharts can use the Canvas instance created by node-canvas as a container directly

Environment

- OS: Windows 10 Pro
- Browser:
- Framework: ts-node

Any additional comments?

No response

[dmeehan1968]

@types/echarts seems to be at v4.9.15, whilst echarts is at v5.3.2.

You can workaround by casting

const chart = echarts.init(canvas as unknown as HTMLCanvasElement);

This also goes for using SVG for the output type:

this.chart = echarts.init(null as unknown as HTMLCanvasElement, undefined, {
  renderer: 'svg',
  ssr: true,
  width: 400,
  height: 300
});

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!