0

This may be unfixable, but I was hoping someone may have come across this before and found a workaround.

Highcharts-ng seems to merge series data with existing data in such a way that I cannot maintain the ordering of series. I specifically want to show two series, call them A & B, from left to right (because the form controls are organized that way).

So, I'm starting with a series A, then I add a B, then change A, and it's now in the order B & A.

I've looked at the highcharts-ng code, and I can understand why it's happening (see processSeries method below).

The only workaround that I've been able to get to work is to completely reset the series data and call $apply, which of course you cannot do in the middle of another apply.

$scope.chartConfig.series.length = 0
$scope.chartConfig.xAxis.categories.length = 0
$scope.$apply(); # force update with empty series (throws $apply already in progress error)

I'd really like to know if there's an option that I can set, or some other workaround that would allow me to use this how I'd like without having to resort to editing the directive.

var processSeries = function(chart, series) {
  var ids = []
  if(series) {
    ensureIds(series);

    //Find series to add or update
    series.forEach(function (s) {
      ids.push(s.id)
      var chartSeries = chart.get(s.id);
      if (chartSeries) {
        chartSeries.update(angular.copy(s), false);
      } else {
        chart.addSeries(angular.copy(s), false)
      }
    });
  }

Thanks a bunch!

1 Answers1

0

Answering my own question. It seems the workaround is to have placeholders for the series in fixed positions, and do updates rather than replacements, such as:

$scope.chartConfig.series[0].data = [1,2,3]
$scope.chartConfig.series[0].name = 'foo'
$scope.chartConfig.series[1].data = [4,5,6]
$scope.chartConfig.series[1].name = 'bar'

Even doing something like:

$scope.chartConfig.series[0] = {name: 'foo', data: [1,2,3]}
$scope.chartConfig.series[1] = {name: 'bar', data: [4,5,6]}

results in the ordering issue described above.