echarts-for-react icon indicating copy to clipboard operation
echarts-for-react copied to clipboard

Typing does not support charts v5.4.3

Open bkhouri opened this issue 2 years ago • 0 comments

There are TypeScript errors when using echarts v5.4.3 and eachrts-for-react v3.0.2,

The following is in package.json

{
  "dependencies": {
    ...
    "echarts": "^5.4.3",
    "echarts-for-react": "^3.0.2",
    ...
  },
  ...
}

Here is a simple reproduction case:

import ReactECharts from 'echarts-for-react';

export const MyComponent: React.FC = () => {

    return (
        <ReactECharts
            option={
                {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [150, 230, 224, 218, 135, 147, 260],
                            type: 'line'
                        }
                    ]
                }
            }
            opts={{
                renderer: "canvas",
                width: "auto",
                height: "auto",
                useCoarsePointer: true,
                pointerSize: 100,
                useDirtyRect: true,
            }}
        />
    )
}

Executing the npm run build which calls react-scripts build causes the following error

TS2322: Type '{ renderer: "canvas"; width: "auto"; height: "auto"; useCoarsePointer: true; pointerSize: number; useDirtyRect: true; }' is not assignable to type 'Opts'.
  Object literal may only specify known properties, and 'useCoarsePointer' does not exist in type 'Opts'.
    28 |                 width: "auto",
    29 |                 height: "auto",
  > 30 |                 useCoarsePointer: true,
       |                 ^^^^^^^^^^^^^^^^^^^^^^
    31 |                 pointerSize: 100,
    32 |                 useDirtyRect: true,
    33 |             }}

A similar error occurs on the pointerSize: 100, and useDirtyRect: true options.

bkhouri avatar Oct 03 '23 13:10 bkhouri