Apex Charts 的饼图中不能有超过 7 个数字

Question

I have come across this strange problem and would like to know if there is a solution to it. I am using ApexChart Pie Chart to show a breakdown but whenever I go above the 7 number it gives this error. The error does not appear if the series array (see code below) is 7 or less.

Uncaught (in promise) TypeError: t.push is not a function

Here is my code

    const [series, setSeries] = useState([8, 17, 3, 3, 3, 3, 10, 34])

    const options = {
        chart: {
            width: 500,
            type: 'pie',
            foreColor: '#373d3f'
        },
        labels: ['Alpha', 'Charlie', 'Delta', 'Mike', 'NS', 'Deltaa', 'Mikee', 'er'],
        stroke: {
            show: true,
            curve: 'smooth',
            lineCap: 'butt',
            colors: "#03111E",
            width: 2,
            dashArray: 0,
        },
        responsive: [{
            breakpoint: 540,
            options: {
                chart: {
                    width: 350
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    }

<Chart options={options} series={series} type="pie" height={360 + Math.random() * 10}
                   width={550}
                   style={{margin: "auto"}}/>

Versions

"apexcharts": "^3.35.3",
"react-apexcharts": "^1.4.0",

I have seen some other question related to this but sadly they do not answer the question. I would like to know if there is a solution to this or is this just a limitation of ApexChart. Thank you.

Answer 1

Work fine when you pass stroke colors as array, not string

  stroke: {
    ...
    colors: ["#03111E"],
    ...
  }

https://apexcharts.com/docs/options/stroke/#colors