Highcharts spiderweb with columns without rounded edge

Question

I would like to create a spiderweb chart with columns. I was fiddling with the demo and was able to create a polar chart with a polygon gridline and columns. However now the edges of the columns are round and don't follow the the straight polygon gridline. Is it possible to create columns without the rounded edges?

Below my code and my jsfiddle: fiddle

$(function () {

$('#container').highcharts({

    chart: {
        polar: true
    },

    title: {
        text: 'Highcharts Polar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 45,
        lineWidth: 0,
        min: 0,
        max: 360,
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
                    lineWidth: 0,
        min: 0
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },

    series: [{
        type: 'column',
        name: 'Column',
        data: [8,1, 6, 5, 4, 3, 2, 1],
        pointPlacement: 'between'
    }]
});

});

Answer 1

There is no default option to do this, but you could define custom shape (as shown here) and wrap (more about extending Highcharts) Highcharts.seriesTypes.column.prototype.translate function.

The problem is that this function is already wrapped in highcharts-more, so to cheat that wrapper let's set this.xAxis.isRadial = false;, so code in highcharts-more wrapper will not run.

Example: http://jsfiddle.net/3fdeq741/

  // Define a custom symbol path
  Highcharts.SVGRenderer.prototype.symbols.cutArc = function(x, y, w, h, options) {
    var start = options.start,
      radius = w,
      end = options.end,
      innerRadius = options.innerR,
      open = options.open,
      cosStart = Math.cos(start),
      sinStart = Math.sin(start),
      cosEnd = Math.cos(end),
      sinEnd = Math.sin(end);

    return [
      'M',
      x + radius * cosStart,
      y + radius * sinStart,
      'L',
      x + radius * cosEnd,
      y + radius * sinEnd,
      'L',
      x + innerRadius * cosEnd,
      y + innerRadius * sinEnd,
      'Z'
    ];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cutArc = Highcharts.SVGRenderer.prototype.symbols.cutArc;
  }

  (function(H) {
    H.wrap(H.seriesTypes.column.prototype, 'translate', function(proceed) {
      //avoid running wrapper from highcharts-more
      var temp = this.xAxis.isRadial;
      this.xAxis.isRadial = false;

      // Run original proceed method
      proceed.apply(this, [].slice.call(arguments, 1));
      this.xAxis.isRadial = temp;

      //run this instead of highcharts-more wrapper
      var xAxis = this.xAxis,
        len = this.yAxis.len,
        center = xAxis.center,
        startAngleRad = xAxis.startAngleRad,
        renderer = this.chart.renderer,
        start,
        points,
        point,
        i;

      if (xAxis.isRadial) {
        points = this.points;
        i = points.length;
        while (i--) {
          point = points[i];
          start = point.barX + startAngleRad;
          point.shapeType = 'path';
          point.shapeArgs = {
            d: renderer.symbols.cutArc(
              center[0],
              center[1],
              len - point.plotY,
              null, {
                start: start,
                end: start + point.pointWidth,
                innerR: len - H.pick(point.yBottom, len)
              }
            )
          };
          // Provide correct plotX, plotY for tooltip
          this.toXY(point);
          point.tooltipPos = [point.plotX, point.plotY];
          point.ttBelow = point.plotY > center[1];
        }
      }
    });
  }(Highcharts));