Using react-highcharts, trying to update the xAxis categories values, but it doesn't, it keeps the values in my config variable.

Question

As stated above, I can't seem to get the categories to re-render when I am using the react-highchart library. I seem to be able to set the data of the chart values but I can't change the values of the xAxis categories, any help is appreciated. I am also rendering the highcharts in the render method.

Code of config

const config = {
  /* HighchartsConfig */

title: {
    text: ''
},

xAxis: {
    tickLength: 75,
    categories: [month1, month2, month3, month4],
    labels: {
      style: {
        color: 'black',
        fontSize:'13px'

      },
      formatter: function(){

      return '<span style="margin-right: 2.5px">' + this.chart.series[0].options.stack + '</span><span>' + this.chart.series[1].options.stack + 
      '</span><br /><div style="text-align:center"> <br />' + this.value + '</div> '
    },    
    useHTML: true
  } 
},

yAxis: [{ //--- Primary yAxis
  title: {
      text: 'Bugs, Questions And Enhancements'
  }
}, { //--- Secondary yAxis
  title: {
      text: 'Total Open'
  },
  opposite: true
}],

tooltip: {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
    }
},
plotOptions: {
    column: {
        stacking: 'normal',
        allowPointSelect: false,

    },


},
legend: {
  events: {
    legendItemClick: function () {

       return false; 
       // <== returning false will cancel the default action
        }
    },
      itemStyle: {

          fontSize: '17px'
      }
},
credits: {
  enabled: false
},
series: 
[{
    yAxis: 0,
    type: 'column',
    name: 'Bug',
    color: '#1E90FF',
    stack: 'Open'

},
 {
    yAxis: 0,
    type: 'column',
    name: 'Bug',
    color: '#1E90FF',
    showInLegend: false,
    stack: 'Closed'
}, 
{
  yAxis: 0,
  type: 'column',
  name: 'Question',
  color: '#DC143C',
  stack: 'Open'
}, 
{
  yAxis: 0,
  type: 'column',
  name: 'Question',
  color: '#DC143C',
  showInLegend: false,
  stack: 'Closed'
},
{
  yAxis: 0,
  type: 'column',
  name: 'Enhancement',
  color: '#32CD32',
  stack: 'Open'
},
{ 
  yAxis: 0,
  type: 'column',
  name: 'Enhancement',
  color: '#32CD32',
  showInLegend: false,
  stack: 'Closed'
},{
    yAxis: 1,
    type: 'line',
    name: 'Total Open',
    color: '#2C2727',
    lineWidth: 4.5,
    animation: false,
    marker: {
      enabled: false
    }
  }

 ]};

Code setting the categories not working

 if(this.state.live == 0)
    {
       let chart = this.refs.chart.getChart();
       chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
                              chart.redraw();
            }

Answer 1

Highcharts now has Axis.update() functionality. Maybe something like this would solve:

chart.xAxis[0].update({categories:['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']});