[Highcharts - Spider Web] #SpiderWebChart #Highcharts

Ex01.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: 800px; height: 600px; margin: 0 auto"></div>

EX01.js

Highcharts.chart('container', {

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

    title: {
        text: null,
    },

    pane: {
        size: '80%'
    },

    xAxis: {
        categories: ['Risk', 'Cost', 'Prod.P'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        lineColor: 'red',
        labels: {
            style: {
                fontSize: '30px',
                fontWeight: 'bold',
                color:'black'
            },
            y: -16
        }
    },

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

    series: [{
        name: ' ',
        data: [60, 40, 53],
        dataLabels: {
           enabled: true,
           style: {
           		fontSize: '40px',
              fontWeight: 'bold',
              color: 'blue'
           }
        },
        pointPlacement: 'on'
    }]
});

EX01.md

Figure - final result chart example