4

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.

2 Answers 2

8

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} />;
}
1

Looks like your mode isn't valid:

mode:
        | 'lines'
        | 'markers'
        | 'text'
        | 'lines+markers'
        | 'text+markers'
        | 'text+lines'
        | 'text+lines+markers'
        | 'none'
        | 'gauge'
        | 'number'
        | 'delta'
        | 'number+delta'
        | 'gauge+number'
        | 'gauge+number+delta'
        | 'gauge+delta';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.