Spider Chart

author(s): Leon Amarant

by lamarant

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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

Highcharts.chart('container', {

  chart: {
    polar: true,
    type: 'area'
  },

  title: {
    text: 'Ball Power Ranking'
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: ['Spin', 'Speed', 'Launch Angle', 'Carry',
      'Peak Height', 'D@PH'
    ],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },

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

  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
  },

  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
  },

  series: [{
    name: 'Average Ball',
    data: [43000, 19000, 60000, 35000, 17000, 10000],
    //pointPlacement: 'on'
  }, {
    name: 'Ball Model X',
    data: [50000, 39000, 42000, 31000, 26000, 14000],
    //pointPlacement: 'on'
  }],

  plotOptions: {
    area: {
      marker: {
        enabled: false
      }
    }
  }

});