React js和chart js饼图类型

Question

Hello everyone i need to get a dynamic chart js pie type,

this is the request to get the data:

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

})

}

this the code with static data:

 const options = {
        animationEnabled: true,
        exportEnabled: true,
        theme: "light1", 
        title:{
          text: "Trip Expenses"
        },
        data: [{
          type: "pie",
          indexLabel: "{label}: {y}%",      
          startAngle: -90,
          dataPoints: [
            
            

            

            
            { y: 5, label: "Lost" },
            { y: 24, label: "Won" },
           
           ]
        }]
      }

please what i should to do to get the dynamic value at my chart

Answer 1

Try using react-apexcharts. this lets you create dynamic charts as your wish

Answer 2

You should make new component with chart.js pie and define props , too. After receiving data from backend, you would import this component and send this data as props .

<Pie {...this.state.data} />

props: {
   data: Array,
   ....
}

computed() {
   pie() {
      return this.data || [];
   }
}