Highcharts Demo
by Mike Rawling
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>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 600px; margin: 2em auto"></div>
JavaScript
Highcharts.setOptions({
colors: ['#05D4A1', '#06D6DE', '#058DC7', '#069FE0', '#0529D4', '#06E02F', '#05D4A1', '#06E02F', '#06EB72']
});
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'SEO Competitor Report',
x: -200
},
pane: {
size: '100%'
},
xAxis: {
categories: ['Domain Authority', 'Technical Audit', 'Shared Links', 'Page Speed Mobile',
'Page Speed Desktop', 'Depp Linking', 'Root Domain', 'Share of Voice', 'SEMRush Visibility'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 0,
layout: 'vertical'
},
series: [{
name: 'Bertolli.co.uk',
data: [90, 44, 10, 80, 34, 23, 80, 10, 15],
//
pointPlacement: 'off',
type: 'area',
}, {
name: 'Bonelli.co.uk',
data: [51,60, 80, 61, 68, 56, 6, 50, 55],
pointPlacement: ''
}, {
name: 'DeCecco.co.uk',
data: [45, 66, 75, 51, 45, 34, 44, 35, 40],
pointPlacement: 'on'
}, {
name: 'Pompeiam.co.uk',
data: [70, 70, 98, 70, 30, 53, 56, 23, 28],
pointPlacement: 'on'
}, {
name: 'Filippoberio.co.uk',
data: [64, 77, 67, 77, 88, 99, 67, 78, 88],
pointPlacement: 'on'
}]
});