Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating colors doesn't seem to work #22

Closed
timojaask opened this issue Aug 7, 2018 · 2 comments
Closed

Updating colors doesn't seem to work #22

timojaask opened this issue Aug 7, 2018 · 2 comments
Labels
bug Something isn't working

Comments

@timojaask
Copy link

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 junedchhipa added the bug Something isn't working label Aug 7, 2018
@junedchhipa
Copy link
Contributor

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.

@atulpand3y
Copy link

i define var with color code
var color='#3EBD52','#FF9945'
and using this var in
option colors: [color] but this code not working.
what is wrong

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants