CODEWITHSUNDEEP
javascriptreactjsapexcharts
mehdi hanine
mehdi hanine

Reputation: 113

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

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

Upvotes: 4

Views: 8478

Answers (1)

Ed Lucas
Ed Lucas

Reputation: 7355

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})

Upvotes: 2

Related Questions