Apexcharts - React js Unhandled Rejection (TypeError): t.every is not a function

Question

I'm trying to set dynamic data into my pie chart using Apexcharts, but I'm running into an error.

class ApexChartPie1 extends React.Component {
    constructor(props) {
      super(props);
 
      this.state = {
        series: this.state={
          dataL : []
        },
        options: {
          chart: {
            width: 380,
            type: 'pie',
          },
          labels: ['LOST', 'WON'],
          responsive: [{
            breakpoint: 480,
            options: {
              chart: {
                width: 200
              },
              legend: {
                position: 'bottom'
              }
            }
          }]
        },         
      };
    }

  
    async componentDidMount(){
      axios.get("http://localhost:8080/designe/pieone")
      .then(response => response.data)
      .then((data) =>{
        this.setState({dataL : data})
      })
    }

    render() {
      return (
        <div id="chart">
          <ReactApexChart options={this.state.options} series={this.state.series} type="pie" width={380} />
        </div>
      );
    }
  }

The error I'm getting:

React js Unhandled Rejection (TypeError): t.every is not a function

Answer 1

One problem that I see is that you are nesting references to this.state and Apexcharts is looking for series to be an array of chart values.

You could try changing your setup in the constructor:

this.state = {
    series: [], 
    options: {
        // Your options
    }
};

And then add your data in the Axios call with:

this.setState({series: data})