Skip to content

Adding a formatter to options causes the donut chart to not update #5030

Open
@tormodAase

Description

@tormodAase

Description

(I created an issue in react-apexcharts's repository, but I'm recreating it here, since this part of the project seems more active, and I don't know whether the bug is related to react-apexcharts or apexcharts)

If I have an options object inside a component, with a label formatter, the chart will not update. Defining the options object OUTSIDE of the component does not trigger the bug.

In my project this started happening after bumping apexcharts from 4.4.0 to 4.6.0, but in codepen it seems like it doesn't matter which version of apexcharts you use.

const options = {
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
            total: {
              show: true,
              label: "",
              //adding this will enable the bug
              formatter: () => {
                return "Any formatter will enable the bug";
              }
            }
          }
        }
      }
    },
  };

apexcharts version: 4.7.0
react-apexcharts version: 1.7.0

Steps to Reproduce

  1. Create a component with the options object inside
  2. Add plotOptions.pie.donut.labels.total.formatter
  3. Render the chart with type donut

Expected Behavior

It should be possible to update the data and have the donut chart update

Actual Behavior

The donut chart stops updating, and will only update on window resize

Screenshots

Image
This screenshot makes more sense if you open the codepen link

Reproduction Link

https://codepen.io/tormodaase/pen/raaJbYB

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions