Highstock gapsize causes row rendering problem

Question

I use Highstock (v4.2.3) to represent the data in StockChart with a series of different Y axes that are plotted in time on the X axis. The data has spaces, and I would like to draw those spaces, but when I turn on gapSize (with any value, non-zero), there is a strange quirk that causes problems with rendering the line - when using the navigator to increase on some date ranges (not all), in some cases (whose template I have not noticed yet) the chart cannot fully display the line along the entire axis x.

This annotated screenshot reflects the problem.

When I turn off gapSize (or explicitly set it to zero), this problem will disappear. Please note that the spaces themselves are displayed correctly on the chart (when switching to a date range that does not present a string rendering problem).

plotOptions: {
    series: {gapSize:2}
}

Any ideas?

Answer 1

jsQuestion: http://jsfiddle.net/2N52H/109/

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

A gap of 5 means that if the distance between the two points is five times greater than the two nearest points, the graph will break

, , , . , , 15 , gapSize 2, .

, , . . : http://jsfiddle.net/2N52H/111/

, xAxis.ordinal : http://api.highcharts.com/highstock#xAxis.ordinal

, . : http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

, gappedPath:

(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 breaks
        while (i--) {
          if (points[i + 1].x - points[i].x > gapSize) {
            points.splice( // insert after this one
              i + 1,
              0, {
                isNull: true
              }
            );
          }
        }
      }
      return this.getGraphPath(points);

    })
  }(Highcharts))

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

.