I am using react and typescript. I get an error with type. How can I solve it?

position is of type string. .html

[React + ts + react-chartjs-2]

import React from 'react';
import {Pie} from 'react-chartjs-2';

export default class Chart extends React.Component{
  constructor(props) {
     super(props);
     this.state = { };
  }

  render() {
    let options = {
      legend: {
        position:'bottom',
      }
    };

    return (
      <Pie options={options}  />
    );
  }
}

[Error.] Types of property 'options' are inpatible.

Type '{ legend: { position: string; }; }' is not assignable to type 'ChartOptions'.
Types of property 'legend' are inpatible.
Type '{ position: string; }' is not assignable to type 'ChartLegendOptions'.
Types of property 'position' are inpatible.
Type 'string' is not assignable to type 'PositionType'.

I am using react and typescript. I get an error with type. How can I solve it?

position is of type string. http://www.chartjs/docs/latest/configuration/legend.html

[React + ts + react-chartjs-2]

import React from 'react';
import {Pie} from 'react-chartjs-2';

export default class Chart extends React.Component{
  constructor(props) {
     super(props);
     this.state = { };
  }

  render() {
    let options = {
      legend: {
        position:'bottom',
      }
    };

    return (
      <Pie options={options}  />
    );
  }
}

[Error.] Types of property 'options' are inpatible.

Type '{ legend: { position: string; }; }' is not assignable to type 'ChartOptions'.
Types of property 'legend' are inpatible.
Type '{ position: string; }' is not assignable to type 'ChartLegendOptions'.
Types of property 'position' are inpatible.
Type 'string' is not assignable to type 'PositionType'.

• javascript
• reactjs
• typescript
• chart.js
• react-chartjs

2 Answers 2

Firstly you are missing a required data attribute i.e.

<Pie data={data} />

You can then change your code to:

import React from 'react';
import * as ReactDOM from "react-dom"
import { Pie } from 'react-chartjs-2';
import { ChartOptions } from 'chart.js'

export default class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const data = {
      labels: [
        'Red',
        'Green',
        'Yellow'
      ],
      datasets: [{
        data: [300, 50, 100],
        backgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56'
        ]
      }]
    };

    const options: ChartOptions = {
      legend: {
        position: 'bottom',
      }
    };

    return (
      <Pie data={data} options={options} />
    );
  }
}

ReactDOM.render(<Chart />, document.getElementById("root"))

You can see this example working here.

When we are using Typescript with we can use legend and it's properties and it's values like as below.

<Pie                         
   data={data}          
   options={{   
     responsive: true,  
     maintainAspectRatio: true, 
     aspectRatio: 2, 
      plugins: {
         legend: {                                    
          display: true,
              position:'bottom', 
              labels:{
                 padding: 40
              },                                  
           },
         },                           
      }} 
  />