Dynamically loaded chart data not showing Chartjs React

Question

I created a pie chart that shows the pokemon catch rate. The console.logs all work at first but then it appears to continue running so the data is no longer displaying correctly. The props value is a useState variable from a different component.

Here is my code:

const [captureRate, setCaptureRate] = useState();
// const [lossRate, setLossRate] = useState();

console.log("run");



    let capture=[];
    let notCapture=0;
    console.log((props.nameForRate));

    useEffect(() => {
    axios.get('https://pokeapi.co/api/v2/pokemon-species/'+(props.nameForRate)+'/')
    .then((res)=>{

      let data=res.data;

      capture[0] = data.capture_rate;
      capture[1] = 255 - (data.capture_rate);
    
      console.log(("it works " +capture));
      setCaptureRate(capture);

    });

    
    console.log("here it is again " + captureRate[0]);
    
  
   }, []);




return(
    <>
    <div className="componentInteriorDoughnut">
          {/* <h3>Chart 2: Doughnut Chart</h3> */}

          <div className="CaptureRate">
          <Doughnut 
          data={{
             
              labels: ['Captured', 'Not Captured'],
              datasets: [{
                  label: 'Capture Rate',
                  data: captureRate,
                  backgroundColor: [
                    'rgb(42, 157, 143)',
                    '#f1f1f1',
                   
                  ],
                
                  borderWidth: 0,
                //   borderRadius:10,
                  
            
                  
                  
              },

It is unclear what exactly you meant with it appears to continue running, what exactly is happening? — Obsidianlab
– Obsidianlab, Commented Apr 13, 2022 at 11:40
In the console, you see the console.log appear initially but then it changes to undefined — Alexa Pettitt
– Alexa Pettitt, Commented Apr 13, 2022 at 12:09

Prathap Parameswar · Accepted Answer · 2022-04-13 11:30:26Z

1

Can you try adding listener to specific value change, this function will invoke on every state changes. instead of below code

useEffect(() => {},[])

Instead of that if you can specify which variable to listen, then multiple function call can be avoidable. For example use like this

useEffect(() => {},[notCapture]);

In this scenario if there is any change happens to notCaputure variable, then only function got triggered

answered Apr 13, 2022 at 11:30

Prathap Parameswar

4991 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thedeepponkiya · Accepted Answer · 2022-11-22 13:31:42Z

0

Please check the below code. It may help you.

const finalData = () => {
        return new Promise((resolve, reject) => {
            const data = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    data: actionsListData.map(({ EditorId }) => EditorId)
                }]
            }
            resolve(data)
        })
    }

<ChartControl
            type={ChartType.Bar}
            datapromise={finalData()}
        />

Please refer below link for details

https://pnp.github.io/sp-dev-fx-controls-react/controls/ChartControl/

answered Nov 22, 2022 at 13:31

thedeepponkiya

1203 silver badges20 bronze badges

Collectives™ on Stack Overflow

Dynamically loaded chart data not showing Chartjs React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related