Highcharts Demo

author(s): Torstein Hønsi

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: 450px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

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

  exporting: {
    buttons: {
      contextButton: {
        enabled: false
      }
    }
  },

  legend: {
    itemStyle: {
      color: '#c4c4c4',
      fontWeight: 'bold'
    }
  },

  credits: {
    enabled: false
  },


  title: {
    style: {
      display: 'none'
    }
  },

  plotOptions: {
    area: {
      dataLabels: {
        useHTML: true,
        enabled: true,
        formatter: function() {
          value = this.y;
          numericSymbolDetector = Math.abs(this.y);
          if (numericSymbolDetector > 1000) {
            value = Highcharts.numberFormat(value / 1000, 3, '.', '');
          }
          return value
        },
        style: {
          color: '#c4c4c4',
          font: '5px Trebuchet MS, Verdana, sans-serif'
        }
      },
      //enableMouseTracking: false
    },
    series: {
      lineColor: '#808080'
    }
  },



  pane: {
    size: '80%',


  },

  xAxis: {
    categories: ['Win Rate', 'Kills', 'Deaths', 'Assits',
      'Minions Killed', 'Gold Earned', 'Damage Dealt'
    ],
    tickmarkPlacement: 'on',
    lineWidth: 0,
    gridLineColor: "#808080",
    gridLineDashStyle: "Solid",
    gridLineWidth: 2,
    labels: {
      style: {
        color: '#c4c4c4',
        font: '11px Trebuchet MS, Verdana, sans-serif'
      }
    }
  },

  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    gridLineColor: "#808080",
    gridLineDashStyle: "Solid",
    gridLineWidth: 2,
    labels: {
      formatter: function() {
        return this.value;
      },
      style: {
        color: '#c4c4c4',
        font: '11px Trebuchet MS, Verdana, sans-serif'
      }
    }
  },

  tooltip: {
    shared: true,
    formatter: function() {
        var points = this.points,
          each = Highcharts.each,
          txt = '<span style="font-size: 10px">' + points[0].key + '</span><br/>',
          H =...