react plotly js with typescript

Question

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.

Answer 1

I was having a similar issue trying to use react-plotly.js with TypeScript.

Here you are passing "lines+points" which is not a valid type, but even if you pass a correct type and still facing the issue.

This is how I got it resolved!

Packages required:

npm i plotly.js react-plotly.js

dev dependencies:

npm i --save-dev @types/plotly.js @types/react-plotly.js

Example Chart.tsx file:

import React from "react";
import Plotly from "plotly.js";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

export default function LineChart() {
  const data = [
    {
      x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      mode: "lines",
    },
  ];
  const layout = { title: "Chart Title" };

  return <Plot data={data} layout={layout} />;
}