Highstock Gapsize Is Causing Line Rendering Issue

I'm using Highstock (v4.2.3) to present data in a StockChart with a number of different Y axes, all plotted against time on the X axis. The data has gaps in it, and I'd like to dep

Solution 1:

jsFiddle with your issue: http://jsfiddle.net/2N52H/109/

As you can read in our API: http://api.highcharts.com/highstock#plotOptions.line.gapSize

A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken

As far as I know data you have has random gaps so you will never know what is the distance between two closest points. For example if you will have data in every one hour, distance between two closest points will be 15 minutes and your gapSize will be set to 2, you will see only your closest points.

When you are using zoom sometimes your visible data closest distance is changing so the gaps are changing as well. See this example: http://jsfiddle.net/2N52H/111/

Maybe you can use xAxis.ordinal parameter to visualise your gaps: http://api.highcharts.com/highstock#xAxis.ordinal

You can also change standard functionallity by using wrapper. Here you can read about it: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

For example you can change gappedPath function:

(function(H) {
    H.wrap(H.Series.prototype, 'gappedPath', function(proceed) {
      var gapSize = this.options.gapSize,
        xAxis = this.xAxis,
        points = this.points.slice(),
        i = points.length - 1;

      if (gapSize && i > 0) { // #5008// extension for ordinal breakswhile (i--) {
          if (points[i + 1].x - points[i].x > gapSize) {
            points.splice( // insert after this one
              i + 1,
              0, {
                isNull: true
              }
            );
          }
        }
      }
      returnthis.getGraphPath(points);

    })
  }(Highcharts))

example: http://jsfiddle.net/2N52H/113/

Kind regards.