Property 'type' is missing in type .but required in type 'Props'

Question

I am getting this weird typescript error in IDE on line 16 (<Line ...) when converting my react es6 comp to typescript. Its a chart component where I am using react-chartjs-2.

Property 'type' is missing in type '{ data: { labels: string[]; datasets: { label: string; data: string[]; }[]; }; height: number; width: number; options: { maintainAspectRatio: boolean; scales: { yAxes: { ticks: { beginAtZero: boolean; }; }[]; }; legend: { ...; }; }; }' but required in type 'Props'.

import React from "react";
import { Line, defaults } from "react-chartjs-2";

defaults.plugins.tooltip.enabled = true;
defaults.plugins.legend.position = "bottom";

interface Props {
  currencyValues: string[],
  dateList: string[],
}

const LineGraph = ({ currencyValues, dateList }: Props) => {
  return (
    <div className="graphContainer">
      {currencyValues.length ? (
        <Line
          data={{
            labels: [...dateList],
            datasets: [
              {
                label: "Historical Dates",
                data: [...currencyValues],
              },
            ],
          }}
          height={400}
          width={600}
          options={{
            maintainAspectRatio: false,
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true,
                  },
                },
              ],
            },
            legend: {
              labels: {
                fontSize: 25,
              },
            },
          }}
        />
      ) : null}
    </div>
  );
};

export default LineGraph;

Nicholas Tower Nicholas Tower · Accepted Answer · 2021-05-03T23:17:03

Looks like the type definitions say that the type prop is mandatory. This appears to be a mistake on the part of the library author, with multiple open issues on github (1, 2)

If you pass in a type prop, it will get rid of the type error, and have no effect (because the Line component overwrites the type prop):

<Line
  type="line"
  data={{
    //etc

Property 'type' is missing in type .but required in type 'Props'

1 Answers