Alignment issue in dynamically updated highstock having multiple series

Question

I am creating a dynamic updated highstock chart with 2 series but at start one series is rendering in wrong place. And when I resize the selection in navigator the series comes back to its correct place. Here is the config of highstock:

Highcharts.setOptions({
global: {
    useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
    ['second',[1, 2, 5, 10, 15, 30]],
    ['minute',[1, 2, 5, 10, 15, 30]],
    ['day',[1]]
    ]; 
// Create the chart
Highcharts.stockChart('container', {

chart: {
    events: {
        load: function () {

            // set up the updating of the chart each second
            var series = this.series[0];
            var series1 = this.series[1];
            setInterval(function () {
                var x = (new Date()).getTime(), // current time
                    y = Math.round(Math.random() * 100);
                series.addPoint([x, y], true, false);
                series1.addPoint([x, y], true, false);
            }, 500);
        }
    }
},

rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1min'
        },
        {
            count: 3,
            type: 'minute',
            text: '3min'
        }, {
            count: 5,
            type: 'minute',
            text: '5min'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 3
      },
      exporting: {
        enabled: false
      },
      title: {
          text: 'Live Chart'
      },

      yAxis: [
        {
          labels: {
              align: 'right',
              x: -3
          },
          title: {
              text: 'Line'
          },
          height: '60%',
          lineWidth: 2,
          resize: {
              enabled: true
          }
      }, 
      {
          labels: {
              align: 'right',
              x: -3
          },
          title: {
              text: 'Volume'
          },
          top: '65%',
          height: '35%',
          offset: 0,
          lineWidth: 2
      }],

      tooltip: {
          split: true
      },

      series: [
        {
          type: 'line',
          name: 'OHLC',
          data: [[]],
          dataGrouping: {
              units: groupingUnits
          }
      },
      {
          type: 'column',
          name: 'Volume',
          data: [[]],
          yAxis: 1,
          dataGrouping: {
              units: groupingUnits
          }
      }
    ]
});

I have created a fiddle for the same: https://jsfiddle.net/xu058sgp/23/

I have tried changing the height and top property of yAxis but nothing seems to fix this issue. I am not sure but it can be due to the frequency in which the data is getting updated. Can someone point me out what I am doing wrong here.

Seems like it wants to place both series at axis 0 initially, but since you have top: 65% in axis 1, it puts it that much higher than axis 1. If the graph is already initialized, it seems to be fine: jsfiddle.net/ewolden/xu058sgp/36 — ewolden
thanks @ewolden, It worked. The serious initialization with [0] instead of [] fixed it. — Shail_bee

ewolden ewolden · Accepted Answer · 2018-07-17T10:13:25

As a workaround you could initialize the series and then remove the points before adding your own points.

Initialization:

series: [{
  type: 'line',
  name: 'OHLC',
  data: [0], //added this 0
  dataGrouping: {
    units: groupingUnits
  }
}, {
  type: 'column',
  name: 'Volume',
  data: [0], //added this 0
  yAxis: 1,
  dataGrouping: {
    units: groupingUnits
  }
}]

Then, remove the points before adding new ones:

events: {
  load: function () {
    // set up the updating of the chart each second
    var chart = this
    var series = this.series[0];
    var series1 = this.series[1];

    //Remove 0 data
    series.setData([], false); //false to avoid redrawing, so we only redraw once per update
    series1.setData([], false);

    //update graph
    setInterval(function () {
      var x = (new Date()).getTime(), // current time
      y = Math.round(Math.random() * 100);
      series.addPoint([x, y], false, false);
      series1.addPoint([x, y], false, false);
      //redraw graph
      chart.redraw();
    }, 500);
  }
}

Working example: https://jsfiddle.net/ewolden/xu058sgp/46/

Alignment issue in dynamically updated highstock having multiple series

1 Answers