Highcharts polar spider with multiple y-axis scale

Question

I created a polar spider graph with highcharts http://www.highcharts.com/demo/polar-spider and I would like to know if it is possible to set scale (min and max) for each categories.

Answer 1

As Halvor Strand noted in his comment, one possible way to solve this question would be to have each of the chart points be a different distance from the center of the graph.

I chose to create a "dummy" line series to serve as the "lopsided" chart points, while making the real grid behind the lines invisible.

Here's the code for the "dummy" series:

    {
      name: 'dummy series for category max/mins',
      dataLabels: {
        allowOverlap: true,
        enabled: true,
        formatter:function() {
          return this.point.name;
        },
        style:{color:"black"}
      },
      data: [
        { y: 90000, name: 'Sales', dataLabels: { align: 'center', y: -5 } }, 
        { y: 70000, name: 'Marketing', dataLabels: { align: 'left', x: 10, y: 15 } },
        { y: 85000, name: 'Development', dataLabels: { align: 'left', x: 10, y: 15 } },
        { y: 80000, name: 'Customer Support', dataLabels: { align: 'center', y: 30 } },
        { y: 95000, name: 'Information<br />Technology', dataLabels: { align: 'right', x: -10, y: 15 } },
        { y: 100000, name: 'Administration', dataLabels: { align: 'right', x: -10, y: 15 } }
      ],
      pointPlacement: 'on',
      showInLegend: false,
      enableMouseTracking: false,
      lineWidth: 2,
      lineColor: 'red',
      marker: { enabled: false }
    }

What I did here is manually set the "max" values for each of the chart points and give them a name to match what would normally be shown in the x-axis categories.

The dataLabels attributes for all of the series return each data point's name attribute. Then, for each data point, there are unique dataLabels attributes to position the label.

To hide the gridlines and labels for the x- and y-axes, I added gridLineWidth: 0 and labels: { enabled: false } to each.

Here's how the result appears:

A working fiddle with this example can be found at http://jsfiddle.net/brightmatrix/bjrm0cr3/.