Highcharts update chart scroll issue- scroll to initial position

Question

I am having an issue with Highcharts highstock column chart. With xaxis min=0, max=5 [page size] which has 20 categories. After the initial load when you scroll the xaxis to the end and then click on modify data. On this action I will invoke an api and update the series data. 'The chart displays as No data to display' even if there is one category. I wanted to reset scroll to initial position, which I cannot do for categories. You will need to move scroll manually

Also Since there is only one category and I do not want other categories to display as numbers. https://jsfiddle.net/shashi3337/zcf8kvgx/7/

I am updating the chart to modify xaxis min and max to set max as 0 [ 1 category] to remove numbers. https://jsfiddle.net/shashi3337/zcf8kvgx/5/.

Now when you click on Add data which adds back the data. I am resetting min=0 and max=5. Now I just see only 1 category per page scroll.

Expected Behavior I expect the scroll bar to be automatically scrolled back after I click modify data button and when I click on add data button I expect to see 6 categories per page scroll on xaxis.

function test(n) {
  var data = [];
  for (var i = 0; i < n; i++) {
    var value = Math.random() * 10;
    var x = {
      id: i,
      name: 'test ' + i,
      y: value
    }
    data.push(x);
  }
  return data;
}

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    },
  },
  xAxis: {
    type: 'category',
    min:0,
    max:5
  },
  scrollbar: {
    enabled: true
  },
  series: [{
      name: "A",
      data: test(20)
    }, {
      name: "B",
      data: test(20)
    },
    {
      name: "C",
      data: test(20)
    },
    {
      name: "D",
      data: test(20)
    }
  ]
});


$(document).ready(function(){
  $('#modify').click(function(){
   if(chart){
    while (chart.series.length > 0)
         chart.series[0].remove(true);


     chart.addSeries({
     name: 'new',
        data: test(1)
     });
    }
  });

  $('#add').click(function(){
   if(chart){
    while (chart.series.length > 0)
         chart.series[0].remove(true);

    chart.update({
      xAxis: {
        min:0,
        max:5
        }
     });

     chart.addSeries({
     name: 'A',
        data: test(20)
     });
    }
  });
});

Use xAxis.update or xAxis.setExtremes to manipulate the axis' min and max. You can modify xAxis labels dynamically between the updates with the use of labels.formatter - see the example jsfiddle.net/ehbzw9Lm — morganfree

Shashi Shashi · Accepted Answer · 2018-03-13T18:29:23

Found the answer to this.

You need to use xAxis.setExtremes() to modify extremes on the chart. At this moment, extremes set by user (e.g. by scrollbar) have the highest priority and are not cleared when you remove all series.

Example https://jsfiddle.net/BlackLabel/pp2qpxks/

 chart.xAxis[0].setExtremes(0, 0);

Highcharts update chart scroll issue- scroll to initial position

1 Answers