I'm using react-plotly.js with typescript and I get the following error from it:
No overload matches this call.
Overload 1 of 2, '(props: PlotParams | Readonly<PlotParams>): Plot', gave the following error.
Type '({ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; } | { type: string; x: number[]; y: number[]; mode?: undefined; marker?: undefined; })[]' is not assignable to type 'Data[]'.
Type '{ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; } | { type: string; x: number[]; y: number[]; mode?: undefined; marker?: undefined; }' is not assignable to type 'Data'.
Type '{ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; }' is not assignable to type 'Data'.
Type '{ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; }' is not assignable to type 'Partial<BoxPlotData>'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"box" | undefined'.
Overload 2 of 2, '(props: PlotParams, context: any): Plot', gave the following error.
Type '({ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; } | { type: string; x: number[]; y: number[]; mode?: undefined; marker?: undefined; })[]' is not assignable to type 'Data[]'. TS2769
20 | };
21 |
> 22 | const Dashboard = () => <div><Plot data={data} layout={layout} /></div>;
| ^
23 |
24 | export default Dashboard;
25 |
I send to the following data with it, and it doesnt seem to work.
const data = [{
type: 'scatter',
mode: 'lines+points',
x: [1, 2, 3],
y: [2, 6, 3],
marker: { color: 'red' },
}, {
type: 'bar',
x: [1, 2, 3],
y: [2, 5, 3],
}];
const layout = {
width: 640,
height: 480,
title: 'A Fancy Plot',
};
const Dashboard = () => <div><Plot data={data} layout={layout} /></div>;
Is it something to do with the data im sending? I installed the types of react-plotly, and because of it, I get this error.