ApexCharts convert class to functional component

Question

I have issue inserting chart.type for ApexCharts. Have inserted type: line but not working. Please advice if I can't define the chart type or there is another way to do this.

import React, { useState, Component } from 'react';
import { makeStyles, createStyles, Theme, useTheme } from '@material-ui/core/styles';
import ApexCharts from 'apexcharts';
import ReactApexChart from "react-apexcharts";

interface ApexChartProps { }

interface TravelDetailsViewProps {
  options?: any;
  series?: any;
}

// const EditRoleForm = ({ onCompleted, onCancel, value, ...rest }: EditRoleFormProps) => {

const TravelDetailsView = () => {

  const theme = useTheme();

  const [chartData, setChartData] = useState({
    options: {
      chart: {
        // type: 'Line',
        id: 'apexchart-example',
        foreColor: theme.palette.primary.main,
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          type: "horizontal",
          shadeIntensity: 0.5,
          gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 100],
          colorStops: []
        }
      },
      legend: {
        // position: '',
        width: 400,
        // position: 'top',
      },
    },
    series: [{
      name: 'Distance Traveled',
      type: 'column',
      data: [440, 505, 414, 571, 227, 413, 201, 352, 652, 320, 257, 160]
    }, {
      name: 'Time Traveled',
      type: 'line',
      data: [23, 42, 35, 27, 43, 22, 17, 31, 42, 22, 12, 16]
    }],
  });

  return (
    <ReactApexChart 
      options={chartData.options} 
      series={chartData.series} 
      type="line" 
    />
  )
}

export default TravelDetailsView;

error below >>>

The types of 'chart.type' are incompatible between these types.
        Type 'string' is not assignable to type '"line" | "area" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar" | undefined'.

==> Under node_modules\apexcharts\types\apexcharts.d.ts

/**

• Main Chart options

• See https://apexcharts.com/docs/options/chart/ */

  type ApexChart = { width?: string | number height?: string | number type?: | 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'treemap'

same issue with the legend.position.

Appreciated for the help. Cheers!

Answer 1

Because it's a static variable, so you don't need to define a state. You can assign chartData to a variable. In addition when you're defining the variable, set the type as ApexOptions:

const TravelDetailsView = () => {
  const theme = useTheme();

  const chartData: ApexOptions = {
    chart: {
      type: "line",
      id: "apexchart-example",
      foreColor: theme.palette.primary.main
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "horizontal",
        shadeIntensity: 0.5,
        gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 50, 100]
        // colorStops: []
      }
    },
    legend: {
      // position: '',
      width: 400
      // position: 'top',
    },
    series: [
      {
        name: "Distance Traveled",
        type: "column",
        data: [440, 505, 414, 571, 227, 413, 201, 352, 652, 320, 257, 160]
      },
      {
        name: "Time Traveled",
        type: "line",
        data: [23, 42, 35, 27, 43, 22, 17, 31, 42, 22, 12, 16]
      }
    ]
  };

  return <ReactApexChart options={chartData} series={chartData.series} />;
};