Apexcharts.js: Updating colors doesn't seem to work

[timojaask]

Updating chart color doesn't seem to have any visible effect:

chart.updateOptions({
  colors: ["#00FF00"]
})

Here's a simple react component implementation example, with initial chart color set to red:

Expected behavior when chartColor changes:

• chart changes color to green
• the x-axis labels are removed

Actual behavior:

• only the x-axis labels are removed (color fails to change)

Not sure what happens here, but I'm guessing that it simply merges the colors array, resulting in ["#FF0000", "#00FF00"], but that's obviously not what I want. I want to change the existing color.

  import React from "react"
  import ApexCharts from 'apexcharts'

  class Chart extends React.Component {

    componentDidMount() {
      var options = {
        colors: ["#FF0000"],
        chart: {
          type: 'bar'
        },
        series: [{
          name: 'sales',
          data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
        }],
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      }

      this.chart = new ApexCharts(document.querySelector("#chart"), options)
      this.chart.render()
    }

    componentDidUpdate(prevProps) {
      if (this.props.chartColor !== prevProps.chartColor) {
        this.chart.updateOptions({
          colors: ["#00FF00"],
          xaxis: {
            labels: {
              show: false
            }
          },
        })
      }
    }

    render() {
      return (
        <div id="chart"></div>
      )
    }
  }

  export default Chart

[junedchhipa]

I accidentally mutated the user-defined config object and that was preventing the colors to be updated.
Here is the working codepen example which shows the color being successfully updated.