Nunwood VOC CEE Spider Chart

by Danielle Parkinson

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',
        backgroundColor: '#201f2d',
        style: {
            fontFamily: 'Chivo',
            color: '#fff'
        },
        width: 550,
        height: 500,
        margin: [0, 0, 0, 0]
    },
    credits: {
    		enabled: false
    },

    title: {
        text: ' ',
        x: -80
    },

    pane: {
        size: '60%'
    },

    xAxis: {
        categories: ['Personalisation', 'Integrity', 'Expectations', 'Resolution',
                'Time & Effort', 'Empathy'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        labels: {
            style: {
                color: '#fff',
                fontSize: '16px',
                fontFamily: 'Chivo'
            }
        }
    },

    yAxis: {
    		min: 5,
        max: 9,
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        labels: {
        		enabled: false
        },
        gridLineColor: '#999'
    },

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

    legend: {
    		enabled: false,
        align: 'center',
        verticalAlign: 'bottom',
        layout: 'horizontal',
        itemStyle: {
                color: '#e6e6e6',
                fontSize: '16px',
                fontWeight: 'normal'
            }
    },

    series: [{
        name: 'Brand',
        color: '#0091da',
        data: [7.97, 8.44, 7.50, 7.95, 7.51, 5.35],
        pointPlacement: 'on',
        zIndex: 1,
        marker: {
        		radius: 4,
            fillColor: '#201f2d',
            lineColor: '#0091da',
            lineWidth: 2,
            symbol: 'circle'
        }
    },{
        name: 'Industry Average',
        color: '#00a3a1',
        fillColor: 'transparent',
        dashStyle: 'shortDot',
        zIndex: 2,
        data: [7.77, 7.90, 7.07, 7.46, 7.15, 7.25],
        pointPlacement: 'on',
       ...