No overload matches this call in ApexCharts with React and Typescript

Question

I'm trying to set up a chart from ApexChart in a React app made with typescript. This is how I'm defining the options for the chart:

const options = {
chart: {
  id: "lineGraph",
  height: 350,
  zoom: {
    enabled: false
  }
},
dataLabels: {
  enabled: false
},
stroke: {
  show: true,
  curve: 'smooth',
  lineCap: 'butt',
  colors: undefined,
  width: 2,
  dashArray: 0,      
},
xaxis: {
  categories: [43,42,67,12,53,45,63]
}
};
const series = [
{
  name: "Title", 
  data: [1,123,321,324,243,234,25]
}
];

And calling the chart component:

<Chart options={options} series={series} type="line"/>

However I get the error:

    No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactApexChart', gave the following error.
    Type '{ chart: { id: string; height: number; zoom: { enabled: boolean; }; }; dataLabels: { enabled: boolean; }; stroke: { show: boolean; curve: string; lineCap: string; colors: undefined; width: number; dashArray: number; }; xaxis: { ...; }; }' is not assignable to type 'ApexOptions'.
      The types of 'stroke.curve' are incompatible between these types.
        Type 'string' is not assignable to type '"smooth" | "straight" | "stepline" | ("smooth" | "straight" | "stepline")[] | undefined'.

Typescript, for some reason, is not happy with putting 'smooth' on stroke.curve property. However, this is correct according to the docs. I was able to fix this by changing the type definition for ApexStroke. Originally is:

type ApexStroke = {
  show?: boolean
  curve?: 'smooth' | 'straight' | 'stepline' | ('smooth' | 'straight' | 'stepline')[]
  lineCap?: 'butt' | 'square' | 'round'
  colors?: string[]
  width?: number | number[]
  dashArray?: number | number[]
}

But if I put

type ApexStroke = {
  show?: boolean
  curve?: string
  lineCap?: 'butt' | 'square' | 'round'
  colors?: string[]
  width?: number | number[]
  dashArray?: number | number[]
}

It works but I'm not sure if this is the correct way to fix, if the package devs did something wrong or, more probably, if I did something wrong. How can I compile this without changing the type definition?

Answer 1

I'm not familiar whit ApexChart but here's what I've found on the docs with regards to the curve property:

stroke: {
  curve: 'smooth',
  // OR provide an array
  curve: ['smooth', 'straight', 'stepline']
}

Perhaps the following might work?

type TCurve = 'smooth' | 'straight' | 'stepline' | 'smooth' | 'straight' | 'stepline';

type ApexStroke = {
  show?: boolean;
  curve?: TCurve | TCurve[];
  lineCap?: 'butt' | 'square' | 'round';
  colors?: string[];
  width?: number | number[];
  dashArray?: number | number[];
}