Highcharts - how to prevent xAxis redraw when using addSeries?

Question

I have a highstocks scatter chart and after the series data is initialised I add a line of best fit (once I've calculated the endpoints) using addSeries.

The problem I am having is that when I add my new series the xAxis datetime labels all disappear (they are originally drawn correctly). It seems like because the new series only has two points, the chart redraws the xAxis to cater for the new series and draws it with only a single datetime label.

Looks very similar to this issue which was never solved

How can I avoid this happening?

I can't share my actual code as it's embedded in a Java widget on a proprietary framework but this Fiddle shows the same behaviour

    Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'x'
  },
  title: {
    text: 'Random data'
  },
  xAxis: {
    title: {
      enabled: true,
      text: 'Height (cm)'
    },
    type: 'datetime' //,
      // startOnTick: true,
      // endOnTick: true,
      // showLastLabel: true
  },
  exporting: {
    buttons: {
      customButton: {
        text: 'Add Series',
        onclick: function() {
          var newRegressionLineSeries = {
            type: 'line',
            name: 'Line series',
            data: [
              [Date.UTC(2015, 2, 26), 0.8],
              [Date.UTC(2015, 6, 28), 0.7]
            ],
            marker: {
              enabled: false
            },
            states: {
              hover: {
                lineWidth: 0
              }
            },
            enableMouseTracking: false
          };
          this.addSeries(newRegressionLineSeries);
        }
      }
    }
  },

  plotOptions: {
    scatter: {
      marker: {
        radius: 5,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x} cm, {point.y} kg'
      }
    }
  },

  series: [{
    name: 'Data',
    color: 'rgba(223, 83, 83, .5)',
    data: [
      [Date.UTC(2015, 2, 26), 0.9188],
      [Date.UTC(2015, 2, 27), 0.9184],
      [Date.UTC(2015, 2, 29), 0.9188],
      [Date.UTC(2015, 2, 30), 0.9231],
      [Date.UTC(2015, 2, 31), 0.9319],
      [Date.UTC(2015, 3, 1), 0.9291],
      [Date.UTC(2015, 3, 2), 0.9188],
      [Date.UTC(2015, 3, 3), 0.9109],
      [Date.UTC(2015, 3, 5), 0.9091],
      [Date.UTC(2015, 3, 6), 0.9154],
      [Date.UTC(2015, 3, 7), 0.9246],
      [Date.UTC(2015, 3, 8), 0.9276],
      [Date.UTC(2015, 3, 9), 0.9382],
      [Date.UTC(2015, 3, 10), 0.9431],
      [Date.UTC(2015, 3, 12), 0.9426],
      [Date.UTC(2015, 3, 13), 0.9463],
      [Date.UTC(2015, 3, 14), 0.9386],
      [Date.UTC(2015, 3, 15), 0.9357],
      [Date.UTC(2015, 3, 16), 0.9293],
      [Date.UTC(2015, 3, 17), 0.9254],
      [Date.UTC(2015, 3, 19), 0.9251],
      [Date.UTC(2015, 3, 20), 0.9312],
      [Date.UTC(2015, 3, 21), 0.9315],
      [Date.UTC(2015, 3, 22), 0.9323],
      [Date.UTC(2015, 3, 23), 0.9236],
      [Date.UTC(2015, 3, 24), 0.9196],
      [Date.UTC(2015, 3, 26), 0.9201],
      [Date.UTC(2015, 3, 27), 0.9184],
      [Date.UTC(2015, 3, 28), 0.9106],
      [Date.UTC(2015, 3, 29), 0.8983],
      [Date.UTC(2015, 3, 30), 0.8909],
      [Date.UTC(2015, 4, 1), 0.8928],
      [Date.UTC(2015, 4, 3), 0.8941],
      [Date.UTC(2015, 4, 4), 0.8972],
      [Date.UTC(2015, 4, 5), 0.8940],
      [Date.UTC(2015, 4, 6), 0.8808],
      [Date.UTC(2015, 4, 7), 0.8876],
      [Date.UTC(2015, 4, 8), 0.8925],
      [Date.UTC(2015, 4, 10), 0.8934],
      [Date.UTC(2015, 4, 11), 0.8964],
      [Date.UTC(2015, 4, 12), 0.8917],
      [Date.UTC(2015, 4, 13), 0.8805],
      [Date.UTC(2015, 4, 14), 0.8764],
      [Date.UTC(2015, 4, 15), 0.8732],
      [Date.UTC(2015, 4, 17), 0.8737],
      [Date.UTC(2015, 4, 18), 0.8838],
      [Date.UTC(2015, 4, 19), 0.8969],
      [Date.UTC(2015, 4, 20), 0.9014],
      [Date.UTC(2015, 4, 21), 0.8999],
      [Date.UTC(2015, 4, 22), 0.9076],
      [Date.UTC(2015, 4, 24), 0.9098],
      [Date.UTC(2015, 4, 25), 0.9110],
      [Date.UTC(2015, 4, 26), 0.9196],
      [Date.UTC(2015, 4, 27), 0.9170],
      [Date.UTC(2015, 4, 28), 0.9133],
      [Date.UTC(2015, 4, 29), 0.9101],
      [Date.UTC(2015, 4, 31), 0.9126],
      [Date.UTC(2015, 5, 1), 0.9151],
      [Date.UTC(2015, 5, 2), 0.8965],
      [Date.UTC(2015, 5, 3), 0.8871],
      [Date.UTC(2015, 5, 4), 0.8898],
      [Date.UTC(2015, 5, 5), 0.8999],
      [Date.UTC(2015, 5, 7), 0.9004],
      [Date.UTC(2015, 5, 8), 0.8857],
      [Date.UTC(2015, 5, 9), 0.8862],
      [Date.UTC(2015, 5, 10), 0.8829],
      [Date.UTC(2015, 5, 11), 0.8882],
      [Date.UTC(2015, 5, 12), 0.8873],
      [Date.UTC(2015, 5, 14), 0.8913],
      [Date.UTC(2015, 5, 15), 0.8862],
      [Date.UTC(2015, 5, 16), 0.8891],
      [Date.UTC(2015, 5, 17), 0.8821],
      [Date.UTC(2015, 5, 18), 0.8802],
      [Date.UTC(2015, 5, 19), 0.8808],
      [Date.UTC(2015, 5, 21), 0.8794],
      [Date.UTC(2015, 5, 22), 0.8818],
      [Date.UTC(2015, 5, 23), 0.8952],
      [Date.UTC(2015, 5, 24), 0.8924],
      [Date.UTC(2015, 5, 25), 0.8925],
      [Date.UTC(2015, 5, 26), 0.8955],
      [Date.UTC(2015, 5, 28), 0.9113],
      [Date.UTC(2015, 5, 29), 0.8900],
      [Date.UTC(2015, 5, 30), 0.8950],
      [Date.UTC(2015, 6, 1), 0.8950],
      [Date.UTC(2015, 6, 2), 0.8750],
      [Date.UTC(2015, 6, 3), 0.8650],
      [Date.UTC(2015, 6, 4), 0.8550],
      [Date.UTC(2015, 6, 5), 0.8150],
      [Date.UTC(2015, 6, 6), 0.8100],
      [Date.UTC(2015, 6, 7), 0.8070],
      [Date.UTC(2015, 6, 8), 0.8050],
      [Date.UTC(2015, 6, 9), 0.7990],
      [Date.UTC(2015, 6, 10), 0.7900],
      [Date.UTC(2015, 6, 11), 0.7850],
      [Date.UTC(2015, 6, 12), 0.7800],
      [Date.UTC(2015, 6, 13), 0.7750],
      [Date.UTC(2015, 6, 14), 0.7700],
      [Date.UTC(2015, 6, 15), 0.7650],
      [Date.UTC(2015, 6, 16), 0.7600],
      [Date.UTC(2015, 6, 17), 0.7550],
      [Date.UTC(2015, 6, 18), 0.7500],
      [Date.UTC(2015, 6, 19), 0.7450],
      [Date.UTC(2015, 6, 20), 0.7400],
      [Date.UTC(2015, 6, 21), 0.7350],
      [Date.UTC(2015, 6, 22), 0.7250],
      [Date.UTC(2015, 6, 23), 0.7150],
      [Date.UTC(2015, 6, 24), 0.7050],
      [Date.UTC(2015, 6, 25), 0.6900],
      [Date.UTC(2015, 6, 26), 0.6750],
      [Date.UTC(2015, 6, 27), 0.6600],
      [Date.UTC(2015, 6, 28), 0.6300],
    ]
  }]
});

Added a fiddle to original post - bear in mind that although data is hard-coded in the fiddle It is dynamic in reality, so answers that rely on manually adding appropriate tick positions are not useful — J.Redwood

ewolden ewolden · Accepted Answer · 2018-01-10T11:48:05

An easy workaround would be to create a new axis and put the lines with insufficient points on that axis.

I updated the fiddle you provided to achieve this in the following way:

Add new xAxis:

xAxis: [{
  id: '0',
  title: {
    enabled: true,
    text: 'Height (cm)'
  },
  type: 'datetime' 
},{
  id: '1', //new axis ID
  type: 'datetime',
  visible: false,
  linkedTo: '0'
}],

New lines are added to the new xAxis:

var newRegressionLineSeries = {
  xAxis: '1', //Added this
  type: 'line',
  ...
}

Working example: https://jsfiddle.net/xs9toj13/9/

Highcharts - how to prevent xAxis redraw when using addSeries?

1 Answers