radar chart negative render stroke and markers error

import React, { Component } from 'react'
import { formatMessage } from 'umi/locale'
import Chart from 'react-apexcharts'
import { min } from 'lodash'

class Rada extends Component {
  render() {
    const { perfect, actual } = this.props
    let arrColors = []
    actual.map(ele => {
      if (ele < 0) {
        arrColors.push('rgb(237, 28, 36)')
      } else {
        arrColors.push('rgb(24, 144, 255)')
      }
      return ele
    })
    const minData = min(actual)
    const actualData = actual.map(i => (minData < 0 ? i + Math.abs(minData) : i))
    const perfectdata = perfect.map(i => (minData < 0 ? i + Math.abs(minData) : i))
    let data = {
      options: {
        chart: {
          id: 'apexchart-category',
          toolbar: {
            show: false,
          },
        },
        dataLabels: {
          enabled: true,
          formatter: val => val,
          style: {
            colors: arrColors,
          },
        },
        colors: ['#1890FF', '#ED1C24'],
        xaxis: {
          categories: [
            `${formatMessage({
              id: 'assessment.tab.endPoint',
              defaultMessage: 'End Point',
            })} (${(actual || [])[0]})`,
            `${formatMessage({
              id: 'assessment.tab.smartPhone',
              defaultMessage: 'Smart Phone',
            })} (${(actual || [])[1]})`,
            `${formatMessage({
              id: 'assessment.tab.serverCloud',
              defaultMessage: 'Server Cloud',
            })} (${(actual || [])[2]})`,
            `${formatMessage({
              id: 'assessment.tab.network',
              defaultMessage: 'Network',
            })} (${(actual || [])[3]})`,
            `${formatMessage({
              id: 'assessment.tab.website',
              defaultMessage: 'Website',
            })} (${(actual || [])[4]})`,
            `${formatMessage({
              id: 'assessment.tab.physicalSecurity',
              defaultMessage: 'Physical Security',
            })} (${(actual || [])[5]})`,
            `${formatMessage({
              id: 'assessment.tab.rulesAndRegulations',
              defaultMessage: 'Rules And Regulations',
            })} (${(actual || [])[6]})`,
          ],
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['#1890FF', '#ED1C24'],
          dashArray: 0,
        },
        markers: {
          show: true,
          size: 4,
          colors: ['#1890FF', '#ED1C24'],
          hover: {
            size: 8,
          },
        },
        yaxis: {
          show: true,
          // tickAmount: 10,
          // min: -100,
          // max: 100,
          labels: {
            formatter(val) {
              if (minData < 0) {
                return val - Math.abs(minData)
              }
              return val
            },
          },
        },
        legend: {
          show: true,
          offsetY: -20,
          showForSingleSeries: true,
          showForNullSeries: true,
          showForZeroSeries: true,
          position: 'top',

          horizontalAlign: 'right',
          fontSize: '14px',
          markers: {
            width: 25,
            height: 10,
            strokeWidth: 100,
            strokeColor: ['#1890FF', '#ED1C24'],
            radius: 0,
          },
          itemMargin: {
            horizontal: 20,
            vertical: 10,
          },
          onItemClick: {
            toggleDataSeries: true,
          },
          onItemHover: {
            highlightDataSeries: true,
          },
        },
      },
      series: [
        {
          name: formatMessage({
            id: 'overall.fields.score',
            defaultMessage: 'Score',
          }),
          data: perfectdata,
        },
        {
          name: formatMessage({
            id: 'overall.fields.evaluationPoint',
            defaultMessage: 'Evaluation Point',
          }),
          data: actualData,
        },
      ],
    }

    const { options, series } = data
    return <Chart options={options} series={series} type="radar" width={500} height={420} />
  }
}

export default Rada
I have tried this way but I want an optimal solution.
apexcharts / apexcharts.js

radar chart negative render stroke and markers error #1029
