xAxis categories don't update after first render in line chart

[mkantz84]

Hi,
After updating the chart, everything is updating except the xAxis categories.
Tried changing tickPlacement to 'between', but it hasn't helped.
Any help would be appreciated..

versions:
"react-apexcharts": "^1.3.3"
"apexcharts": "^3.8.6"

[junedchhipa]

Can you please post a codesandbox demo to reproduce the issue?

[sebastianpikand]

@junedchhipa

Try this. Works with "bar" but not "line"...

---

import React, { Component } from 'react';
import Chart from 'react-apexcharts';

export default class TotalSessions extends Component {
constructor(props) {
super(props);

this.state = {
  options: {
    xaxis: {
      categories: ['w', 'w', 'w']
    }
  },
  series: [{ data: [4, 6, 6] }]
};

this.toggle = () => {
  let newCategories = ['a', 'b', 'c'];
  let series = [{ data: [1, 2, 3] }];

  // Method 1 – DOES NOT WORK
  this.setState({
    ...this.state,
    series,
    options: {
      ...this.state.options,
      xaxis: {
        ...this.state.options.xaxis,
        categories: ['X1', 'X2', 'X3']
      }
    }
  });

  // Method 2 – DOES NOT WORK
  // this.setState({
  //   series,
  //   options: {
  //     ...this.state.options,
  //     xaxis: {
  //       ...this.state.options.xaxis,
  //       categories: newCategories
  //     }
  //   }
  // });
};

}

render() {
return (

<button onClick={() => this.toggle()}>test

);
}
}

[maxferro71]

Hi,
I've the same problem
I changed tickPlacement to 'between' but nothing, xaxis categories are not updated

if it help;
chartContext.opts.xaxis.categories contains the old value
while length of chartContext.opts.xaxis.categories is correct

any idea?

[jpb-lourenco]

#117 worked for me

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.