How to update series on pie chart

Question

In my index.js I have defined the pie chart:

import pieChart1 from './chart/pie-chart-1';

It is then added here under the render() function:

        <Col md={6}>
                <Card>
                    <Card.Header>
                        <Card.Title as="h5">BALANCE</Card.Title>
                    </Card.Header>
                    <Card.Body>
                        <Chart {...pieChart1} />
                    </Card.Body>
                </Card>
            </Col>

I have a pie chart defined in ./chart/pie-chart-1.js as such:

export default {
    height: 320,
    type: 'pie',
    options: {
        labels: ['Call', 'Put'],
        colors: ['#4680ff', '#0e9e4a'],
        legend: {
            show: true,
            position: 'bottom',
        },
        dataLabels: {
            enabled: true,
            dropShadow: {
                enabled: false,
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    },
    series: [50, 50]

I have a function that calls an API, does some math and saves the values to state.

  this.setState({CallPrem : callPrem, PutPrem : putPrem})

At this point, I want to update the pie chart with these values....how the heck do I do that? Basically want series[0] to have callPrem value and series[1] to have putPrem.

Please excuse me for my noob-like lingo with this, first time working with reactjs and I like it BUT I am slowly piecing together how all this works. Thanks

score 2 · Accepted Answer · answered Sep 17 '20 at 14:19

You have multiple options to update the chart.

The first and a recommended way is to update the props which you pass to your component

const newOptions = {
  ...pieOptions,
  options: {
    ...options,
    labels: [newLabels]
  },
  series: [newSeries]
}

Updating props will automatically re-render the chart.

Another way is to use the core ApexCharts.exec() function. For this to work, you will need to set a chart-id first in your pie-chart-1.js file.

export default {
    height: 320,
    type: 'pie',
    options: {
      chart: {
        id: "chart-id"
      }
    }
}

Once you set the chart id, you will be able to call below method

ApexCharts.exec('chart-id', 'updateOptions', {
  series: newSeries,
  labels: newLabels
})

How to update series on pie chart

1 Answers1