score:1

Accepted answer

As I have mentioned in my comment, I think that you should be able to override getPlotBand method in your code for enabling plotBands with bigger from value than to value:

 (function(H) {
    H.wrap(H.Axis.prototype, 'init', function(proceed, chart, userOptions) {
      this.getPlotBandPath = function(from, to, options) {
        var center = this.center,
          startAngleRad = this.startAngleRad,
          pick = H.pick,
          map = H.map,
          pInt = H.pInt,
          fullRadius = center[2] / 2,
          radii = [
            pick(options.outerRadius, '100%'),
            options.innerRadius,
            pick(options.thickness, 10)
          ],
          offset = Math.min(this.offset, 0),
          percentRegex = /%$/,
          start,
          end,
          open,
          isCircular = this.isCircular, // X axis in a polar chart
          ret;
        // Polygonal plot bands
        if (this.options.gridLineInterpolation === 'polygon') {
          ret = this.getPlotLinePath(from).concat(this.getPlotLinePath(to, true));

          // Circular grid bands
        } else {

          // Keep within bounds
          from = Math.max(from, this.min);
          to = Math.min(to, this.max);

          // Plot bands on Y axis (radial axis) - inner and outer radius depend on to and from
          if (!isCircular) {
            radii[0] = this.translate(from);
            radii[1] = this.translate(to);
          }

          // Convert percentages to pixel values
          radii = map(radii, function(radius) {
            if (percentRegex.test(radius)) {
              radius = (pInt(radius, 10) * fullRadius) / 100;
            }
            return radius;
          });

          // Handle full circle
          if (options.shape === 'circle' || !isCircular) {
            start = -Math.PI / 2;
            end = Math.PI * 1.5;
            open = true;
          } else {
            start = startAngleRad + this.translate(from);
            end = startAngleRad + this.translate(to);
          }

          radii[0] -= offset; // #5283
          radii[2] -= offset; // #5283

          ret = this.chart.renderer.symbols.arc(
            this.left + center[0],
            this.top + center[1],
            radii[0],
            radii[0], {
              start: start, // Math is for reversed yAxis (#3606)
              end: end,
              innerR: pick(radii[1], radii[0] - radii[2]),
              open: open
            }
          );
        }

        return ret;
      }
      proceed.call(this, chart, userOptions);
    });
  }(Highcharts))

Live example:

http://jsfiddle.net/2Ljk7usL/9/


Related Query

More Query from same tag