Spider Chart

by Adam Nekola

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

	var hc_options = {
		chart: {
	        polar: true,
	        type: 'line',
			marginTop:80,
			spacingTop: 0,
			spacingBottom: 50,
			spacingLeft: 100,
			spacingRight: 100
	    },
	    title: {
	        text: 'For All Parents'
	    },
		credits: {
			enabled: false
		},
	    pane: {
	    	size: '100%'
	    },
	    xAxis: {
	        categories: ['Happy', 'Meaningful', 'Stressed', 'Tired'],
	        tickmarkPlacement: 'on',
	        lineWidth: 0,
			labels: {
				style: {
					color: '#777',
					width: '110px'	
				}
			}
	    },
	    yAxis: {
	        gridLineInterpolation: 'polygon',
	        lineWidth: 0,
	        min: 0,
			max: 100
	    },
	    tooltip: {
	    	shared: true,
			useHTML: true,
			borderColor: '#cccccc',
			headerFormat: '<div style="width:200px; white-space: normal; margin-bottom:10px;">{point.key}</div><table>',
	        pointFormat: '<tr><td style="border-bottom:0px;"><span style="color:{series.color}">{series.name}:</span> <b>{point.y:,.0f}%</b></td></tr>',
			footerFormat: '</table>'
	    },
	    legend: {
	        y: 0,
			verticalAlign: "top"
	    },
		plotOptions: {
			series: {
				marker: {
					symbol: 'circle',
					radius: 3,
					lineWidth: 2,
					fillColor: '#fff'
				},
				states: {
					hover: {
						enabled: true,
						lineWidth: 2
					}
				}
			}
		},
	    series: [{
			color: "#EA9E2B",
			marker: {
				lineColor: '#EA9E2B' 
			},
	        name: 'Paid worK',
	        data: [19,36,5,5],
	        pointPlacement: 'on'
	    }, {
			color: "#4FA9CE",
			marker: {
				lineColor: '#4FA9CE' 
			},
	        name: 'Housework',
	        data: [21,43,5,7],
	        pointPlacement: 'on'
	    }, {
			color: "#949D48",
			marker: {
				lineColor: '#949D48' 
			},
	        name: 'Child care',
	        data: [35,62,3,12],
	        pointPlacement: 'on'
	    }, {
			color: "#949D48",
			marker: {
				lineColor: '#949D48' 
			},
	        name: 'Leisure',
	        data: [41,59,4,5],
	        pointPlacement: 'on'
	   ...