Highchart windrose customization

Question

I would like to draw a windrose something like shown in the image below where I want to show outside circle with diffrent line color based on the data. is it possible to custmize the last gridline with highchart?

I tried to play around with customization of ticks and grid line and I wasnt able to acheive the result

Answer 1

For drawing cirlce you can use SVGRenderer inside events.

chart: {
height: 600,
events: {
  load: function() {
    let chart = this;

    chart.myCustomCircle = chart.renderer.circle(chart.plotLeft + chart.plotWidth / 2, chart.plotTop + chart.plotHeight / 2, Math.min(chart.plotWidth / 2, chart.plotHeight / 2)).attr({
      dashstyle: 'Dot',
      fill: 'transparent',
      stroke: 'green',
      'stroke-width': 0.1
    }).add();
  },
  redraw: function() {
    let chart = this,
      yAxis = chart.yAxis[0],
      yMax = yAxis.dataMax;

    if (chart.myCustomCircle) {
      chart.myCustomCircle.attr({
        x: chart.plotLeft + chart.plotWidth / 2,
        y: chart.plotTop + chart.plotHeight / 2,
        r: Math.min(chart.plotWidth / 2, chart.plotHeight / 2)
      });
    }

  }
},

https://jsfiddle.net/BlackLabel/6am2ojxc/

The next suggestion is to use xAxis.plotBands, with customization core code, it's possible to set plotBands related to series color.

  xAxis: {
    plotBands: [{
        color: 'cyan',
        from: -0.5,
        to: 0.5,
        outerRadius: '110%',
        innerRadius: '100%'
      }, {
        color: 'blue',
        from: 0.5,
        to: 1.5,
        outerRadius: '110%',
        innerRadius: '100%'
      },
      {
        color: 'red',
        from: 1.5,
        to: 2.5,
        outerRadius: '110%',
        innerRadius: '100%'
      },
      {
        color: 'green',
        from: 2.5,
        to: 3.5,
        outerRadius: '110%',
        innerRadius: '100%'
      },
      {
        color: 'yellow',
        from: 3.5,
        to: 4.5,
        outerRadius: '110%',
        innerRadius: '100%'
      },
      {
        color: 'orange',
        from: 4.5,
        to: 5.5,
        outerRadius: '110%',
        innerRadius: '100%'
      }
    ]
  },

https://jsfiddle.net/BlackLabel/prmhku7j/