SPFX-Chart-webpart-react-pnpcontrol

Question

I am having a spfx webpart where it shows a chart view based on the List selected in property pane. I can able to generate the chart but while changing the list the second chart data shows the prev chart data on hover.The below code is on render method in .tsx file

<ChartControl                  
        type={ChartType.Bar}                   
         data promise={this._data()}                      
         options={{
         legend: {
         display: true,
         position: "right",                
         },
         title: {
         display: true,
         text: "My Chart Data"
         },  
         }} />

The _data() method will be as below,

let Chart:Chart;
Chart.ChartData = {
    labels: ['Income','Expense','Debt','Savings'],
    datasets: [{
      label: 'Archive',
      data: [10,13,20,90]          
    }]
  };

I have tried to implement,

Chart.destroy()/Chart.clear()

but not working.It shows error and get rejected saying the Chart is un definded.

How to clear the old data,while loading next list in this scenario.

I save the date in state,and create a button to update the data in state, after I clicked the button twice, the correct data was displayed. — Amos
@YLR no error is pop up on the screen it shows undefined while debugging on Chart.Destroy() — Starter-code

Amos Amos · Accepted Answer · 2021-01-21T05:45:06

@Starter-code

 this.state = {
          data: {
            labels:
              [
                'January', 'February', 'March', 'April', 'May', 'June', 'July'
              ],
            datasets:
              [{
                label: 'My Second Dataset',
                data:
                  [
                    65, 59, 80, 81, 56, 55, 40
                  ]
              }]
          }
        };

SPFX-Chart-webpart-react-pnpcontrol

2 Answers