Highcharts Demo

author(s): Alon

by sectioni

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1.1/highcharts-more.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 360px;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

var chart = new Highcharts.chart('container', {

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

    xAxis: {
        categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
            'Information Technology', 'Administration'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
    },
  plotOptions: {
    series: {

      dataLabels: {
        enabled:true,
        useHTML: true
      }
    }
   },
    series: [{
        name: 'Allocated Budget',
        data: [43000, 19000, 60000, 35000, 17000, 10000],
        pointPlacement: 'on'
    }, {
        name: 'Actual Spending',
        data: [50000, 39000, 42000, 31000, 26000, 14000],
        pointPlacement: 'on'
    }]

});


chart.update({
  tooltip: {
    formatter: function () {                                                                

    }

  }
});