Stack Overflow answer for http://stackoverflow.com/questions/38759474/spiderweb-highcharts-with-multiple-scales-on-multiple-axes

Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

  $('#container').highcharts({
    chart: {
      polar: true,
      type: 'line'
    },
    title: {
      text: 'Budget vs spending',
      x: -80
    },
    pane: {
      size: '80%'
    },
    xAxis: {
      categories: ['B', 'A', 'E', 'D', 'C'],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    yAxis: {
      lineWidth: 0,
      min: 0, max: 5,
      tickInterval: 1, 
      showLastLabel: true 
      // 'showLastLabel' needed per answer posted at:
      // http://stackoverflow.com/questions/25890006/last-y-axis-label-not-displaying-on-highcharts-spiderweb
    },
    tooltip: {
      enabled: false
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },
    series: [{
      name: 'first',
      data: [1,4,5,2,3],
      pointPlacement: 'on'
    }, {
      name: 'second',
      data: [2,2,3,3,2],
      pointPlacement: 'on'
    }, {
      name: 'third',
      data: [3,2,4,3,4],
      pointPlacement: 'on'
    }]
  });

	// Add "dummy series to control the custom labels.
  // We will add one for each spoke, but first will always be 
  // overriden by y-axis labels; I could not figure out how to 
  // disable that behavior.
  // The color, showInLegend, and enableMouseTracking attributes 
  // prevent the user from seeing or interacting with the series
  // as they are only used for the custom labels.
  var chart = $('#container').highcharts();
  var labelArray = [
    ['','1','2','3','4','5'],
    ['','j','k','l','m','n'],
    ['','one','two','three','four','five'],
    ['','u','v','w','x','y'],
    ['','a','b','c','d','e']
  ];
  for (var i = 0; i<=5; i++) {
    chart.addSeries({
      name: 'dummy series #' + i + ' for label placement',
      data: [
      	{ name: labelArray[0][i], y: i }, 
        { name: labelArray[1][i], y: i }, 
        { name: labelArray[2][i], y: i }, 
        { name: labelArray[3][i], y: i }, 
        { name: labelArray[4][i], y: i }
      ],
     ...