Highcharts - How to deal with separately scrollbar on multi-charts

Question

Scenario

I have 2 data source 10/20 records.

• data.src10.series and data.src10.categories
• data.src20.series and data.src20.categories

show_rank_limit this function will show all rank on left

• When I click latest top 10 button, it will

  • show 10 rank
  • no scrollbar
  • switch to 10 records datasource data.src10

• When I click latest top 20 button, it will

  • show 20 rank
  • with scrollbar
  • switch to 20 records datasource data.src20

• Both keep 10 rank height.

My problem

How to deal with separately on multi-charts.

• When I call chart1.series[0].setData it will clear my style and some data, it should not be happened! why?

  

• Did I use redraw event? it will cause too many redraw when I use scrollbar.

  redraw: function(event) {
      cfg.common.fun.show_rank_limit(this);
  }
  

• When I click latest top 20 it will keep 10 rank height, but cannot scroll down.

• What I found. I put 'AAAAA BBBBB', 'AAAA-BBBBB' to data, seems it cannot display normally. And it can take html tag. ( eg. <b></b>) see above screenshot.

html code

<div id="container1" class="container" ...></div>
<br>
<div id="container2" class="container" ...></div>

js code

show_rank_limit: function(that) {
    $("text.rank").remove();//remove all rank before render
    ...
}

var barchart1 = cfg.common;
barchart1.series = data.src20.series;
barchart1.xAxis.categories = data.src10.categories;
barchart1.title.text = 'barchart 1';

var barchart2 = _.cloneDeep(barchart1);
barchart2.title.text = 'barchart 2';

var chart1 = Highcharts.chart('container1', barchart1);
var chart2 = Highcharts.chart('container2', barchart2);

$('#top10').click(function() {
  chart1.series[0].setData(data.src10.series, false);
  chart1.xAxis[0].setCategories(data.src10.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: false
    }
  });
});

$('#top20').click(function() {
  chart1.series[0].setData(data.src20.series, false);
  chart1.xAxis[0].setCategories(data.src20.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: true
    }
  });
});

```

DEMO : https://jsfiddle.net/puff0211/6rxd31xk/

Does anyone know how to resolve this?

Thank you!

Answer 1

Check documentation about setData. It think you are confused with series. setData updates data inside series, and you are passing series not data.

update with chart1.series[0].setData(data.src10.series[0].data, false); and chart1.series[0].setData(data.src20.series[0].data, false);

$('#top10').click(function() {
  chart1.series[0].setData(data.src10.series[0].data, false);
  chart1.xAxis[0].setCategories(data.src10.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: false
    }
  });
});

$('#top20').click(function() {
  chart1.series[0].setData(data.src20.series[0].data, false);
  chart1.xAxis[0].setCategories(data.src20.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: true
    }
  });
});

Fiddle demo