Line charts


<div id="graph1"></div>
				

Highcharts.chart('graph1', {
	title: {
		text: 'Solar Employment Growth by Sector, 2010-2016'
	},
	subtitle: {
		text: 'Source: thesolarfoundation.com'
	},
	yAxis: {
		title: {
			text: 'Number of Employees'
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'middle'
	},
	plotOptions: {
		series: {
			label: {
				connectorAllowed: false
			},
			pointStart: 2010
		}
	},
	series: [{
		name: 'Installation',
		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
	}, {
		name: 'Manufacturing',
		data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
	}, {
		name: 'Sales & Distribution',
		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
	}, {
		name: 'Project Development',
		data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
	}, {
		name: 'Other',
		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
	}],
	responsive: {
		rules: [{
			condition: {
				maxWidth: 500
			},
			chartOptions: {
				legend: {
					layout: 'horizontal',
					align: 'center',
					verticalAlign: 'bottom'
				}
			}
		}]
	}
});
				

<div id="graph2"></div>
				

Highcharts.chart('graph2', {
	chart: {
		scrollablePlotArea: {
			minWidth: 700
		}
	},
	data: {
		csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' + '057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
		beforeParse: function (csv) {
			return csv.replace(/\n\n/g, '\n');
		}
	},
	title: {
		text: 'Daily sessions at www.highcharts.com'
	},
	subtitle: {
		text: 'Source: Google Analytics'
	},
	xAxis: {
		tickInterval: 7 * 24 * 3600 * 1000, // one week
		tickWidth: 0,
		gridLineWidth: 1,
		labels: {
			align: 'left',
			x: 3,
			y: -3
		}
	},
	yAxis: [{ // left y axis
		title: {
			text: null
		},
		labels: {
			align: 'left',
			x: 3,
			y: 16,
			format: '{value:.,0f}'
		},
		showFirstLabel: false
	}, { // right y axis
		linkedTo: 0,
		gridLineWidth: 0,
		opposite: true,
		title: {
			text: null
		},
		labels: {
			align: 'right',
			x: -3,
			y: 16,
			format: '{value:.,0f}'
		},
		showFirstLabel: false
	}],
	legend: {
		align: 'left',
		verticalAlign: 'top',
		borderWidth: 0
	},
	tooltip: {
		shared: true,
		crosshairs: true
	},
	plotOptions: {
		series: {
			cursor: 'pointer',
			point: {
				events: {
					click: function (e) {
						hs.htmlExpand(null, {
							pageOrigin: {
								x: e.pageX || e.clientX,
								y: e.pageY || e.clientY
							},
							headingText: this.series.name,
							maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':
' + this.y + ' sessions', width: 200 }); } } }, marker: { lineWidth: 1 } } }, series: [{ name: 'All sessions', lineWidth: 4, marker: { radius: 4 } }, { name: 'New users' }] });

<div id="graph3"></div>
				

Highcharts.chart('graph3', {
	chart: {
		type: 'line'
	},
	title: {
		text: 'Monthly Average Temperature'
	},
	subtitle: {
		text: 'Source: WorldClimate.com'
	},
	xAxis: {
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	},
	yAxis: {
		title: {
			text: 'Temperature (°C)'
		}
	},
	plotOptions: {
		line: {
			dataLabels: {
				enabled: true
			},
			enableMouseTracking: false
		}
	},
	series: [{
		name: 'Tokyo',
		data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
	}, {
		name: 'London',
		data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
	}]
});
				

<div id="graph4"></div>
				

var elevationData = [
	[0.0, 225],[0.1, 226],[0.2, 228],[0.3, 228],[0.4, 229],[0.5, 229]...
];

Highcharts.chart('graph4', {
	chart: {
		type: 'area',
		zoomType: 'x',
		panning: true,
		panKey: 'shift',
		scrollablePlotArea: {
			minWidth: 600
		}
	},
	title: {
		text: '2017 Tour de France Stage 8: Dole - Station des Rousses'
	},
	subtitle: {
		text: 'An annotated chart in Highcharts'
	},
	annotations: [{
		labelOptions: {
			backgroundColor: 'rgba(255,255,255,0.5)',
			verticalAlign: 'top',
			y: 15
		},
		labels: [{
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 27.98,
				y: 255
			},
			text: 'Arbois'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 45.5,
				y: 611
			},
			text: 'Montrond'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 63,
				y: 651
			},
			text: 'Mont-sur-Monnet'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 84,
				y: 789
			},
			x: -10,
			text: 'Bonlieu'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 129.5,
				y: 382
			},
			text: 'Chassal'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 159,
				y: 443
			},
			text: 'Saint-Claude'
		}]
	}, {
		labels: [{
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 101.44,
				y: 1026
			},
			x: -30,
			text: 'Col de la Joux'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 138.5,
				y: 748
			},
			text: 'Côte de Viry'
		}, {
			point: {
				xAxis: 0,
				yAxis: 0,
				x: 176.4,
				y: 1202
			},
			text: 'Montée de la Combe
de Laisia Les Molunes' }] }, { labelOptions: { shape: 'connector', align: 'right', justify: false, crop: true, style: { fontSize: '0.8em', textOutline: '1px white' } }, labels: [{ point: { xAxis: 0, yAxis: 0, x: 96.2, y: 783 }, text: '6.1 km climb
4.6% on avg.' }, { point: { xAxis: 0, yAxis: 0, x: 134.5, y: 540 }, text: '7.6 km climb
5.2% on avg.' }, { point: { xAxis: 0, yAxis: 0, x: 172.2, y: 925 }, text: '11.7 km climb
6.4% on avg.' }] }], xAxis: { labels: { format: '{value} km' }, minRange: 5, title: { text: 'Distance' } }, yAxis: { startOnTick: true, endOnTick: false, maxPadding: 0.35, title: { text: null }, labels: { format: '{value} m' } }, tooltip: { headerFormat: 'Distance: {point.x:.1f} km
', pointFormat: '{point.y} m a. s. l.', shared: true }, legend: { enabled: false }, series: [{ data: elevationData, lineColor: Highcharts.getOptions().colors[1], color: Highcharts.getOptions().colors[2], fillOpacity: 0.5, name: 'Elevation', marker: { enabled: false }, threshold: null }] });

<div id="graph5"></div>
				

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json', function (data) {
	Highcharts.chart('graph5', {
		chart: {
			zoomType: 'x'
		},
		title: {
			text: 'USD to EUR exchange rate over time'
		},
		subtitle: {
			text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
		},
		xAxis: {
			type: 'datetime'
		},
		yAxis: {
			title: {
				text: 'Exchange rate'
			}
		},
		legend: {
			enabled: false
		},
		plotOptions: {
			area: {
				fillColor: {
					linearGradient: {
						x1: 0,
						y1: 0,
						x2: 0,
						y2: 1
					},
					stops: [
						[0, Highcharts.getOptions().colors[0]],
						[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
					]
				},
				marker: {
					radius: 2
				},
				lineWidth: 1,
				states: {
					hover: {
						lineWidth: 1
					}
				},
				threshold: null
			}
		},
		series: [{
			type: 'area',
			name: 'USD to EUR',
			data: data
		}]
	});
});
				

<div id="graph6"></div>
				

Highcharts.chart('graph6', {
	chart: {
		type: 'spline',
		inverted: true
	},
	title: {
		text: 'Atmosphere Temperature by Altitude'
	},
	subtitle: {
		text: 'According to the Standard Atmosphere Model'
	},
	xAxis: {
		reversed: false,
		title: {
			enabled: true,
			text: 'Altitude'
		},
		labels: {
			format: '{value} km'
		},
		maxPadding: 0.05,
		showLastLabel: true
	},
	yAxis: {
		title: {
			text: 'Temperature'
		},
		labels: {
			format: '{value}°'
		},
		lineWidth: 2
	},
	legend: {
		enabled: false
	},
	tooltip: {
		headerFormat: '{series.name}
', pointFormat: '{point.x} km: {point.y}°C' }, plotOptions: { spline: { marker: { enable: false } } }, series: [{ name: 'Temperature', data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]] }] });

<div id="graph7"></div>
				

Highcharts.chart('graph7', {
	chart: {
		type: 'spline'
	},
	title: {
		text: 'Monthly Average Temperature'
	},
	subtitle: {
		text: 'Source: WorldClimate.com'
	},
	xAxis: {
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	},
	yAxis: {
		title: {
			text: 'Temperature'
		},
		labels: {
			formatter: function () {
				return this.value + '°';
			}
		}
	},
	tooltip: {
		crosshairs: true,
		shared: true
	},
	plotOptions: {
		spline: {
			marker: {
				radius: 4,
				lineColor: '#666666',
				lineWidth: 1
			}
		}
	},
	series: [{
		name: 'Tokyo',
		marker: {
			symbol: 'square'
		},
		data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
			y: 26.5,
			marker: {
				symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
			}
		}, 23.3, 18.3, 13.9, 9.6]
	}, {
		name: 'London',
		marker: {
			symbol: 'diamond'
		},
		data: [{
			y: 3.9,
			marker: {
				symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
			}
		}, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
	}]
});
				

<div id="graph8"></div>
				

Highcharts.chart('graph8', {
	chart: {
		type: 'spline',
		scrollablePlotArea: {
			minWidth: 600,
			scrollPositionX: 1
		}
	},
	title: {
		text: 'Wind speed during two days'
	},
	subtitle: {
		text: '13th & 14th of February, 2018 at two locations in Vik i Sogn, Norway'
	},
	xAxis: {
		type: 'datetime',
		labels: {
			overflow: 'justify'
		}
	},
	yAxis: {
		title: {
			text: 'Wind speed (m/s)'
		},
		minorGridLineWidth: 0,
		gridLineWidth: 0,
		alternateGridColor: null,
		plotBands: [{ // Light air
			from: 0.3,
			to: 1.5,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: 'Light air',
				style: {
					color: '#606060'
				}
			}
		}, { // Light breeze
			from: 1.5,
			to: 3.3,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: 'Light breeze',
				style: {
					color: '#606060'
				}
			}
		}, { // Gentle breeze
			from: 3.3,
			to: 5.5,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: 'Gentle breeze',
				style: {
					color: '#606060'
				}
			}
		}, { // Moderate breeze
			from: 5.5,
			to: 8,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: 'Moderate breeze',
				style: {
					color: '#606060'
				}
			}
		}, { // Fresh breeze
			from: 8,
			to: 11,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: 'Fresh breeze',
				style: {
					color: '#606060'
				}
			}
		}, { // Strong breeze
			from: 11,
			to: 14,
			color: 'rgba(0, 0, 0, 0)',
			label: {
				text: 'Strong breeze',
				style: {
					color: '#606060'
				}
			}
		}, { // High wind
			from: 14,
			to: 15,
			color: 'rgba(68, 170, 213, 0.1)',
			label: {
				text: 'High wind',
				style: {
					color: '#606060'
				}
			}
		}]
	},
	tooltip: {
		valueSuffix: ' m/s'
	},
	plotOptions: {
		spline: {
			lineWidth: 4,
			states: {
				hover: {
					lineWidth: 5
				}
			},
			marker: {
				enabled: false
			},
			pointInterval: 3600000, // one hour
			pointStart: Date.UTC(2018, 1, 13, 0, 0, 0)
		}
	},
	series: [{
		name: 'Hestavollane',
		data: [
			3.7, 3.3, 3.9, 5.1, 3.5, 3.8, 4.0, 5.0, 6.1, 3.7, 3.3, 6.4, 6.9, 6.0, 6.8, 4.4, 4.0, 3.8, 5.0, 4.9, 9.2, 9.6, 9.5, 6.3, 9.5, 10.8, 14.0, 11.5, 10.0, 10.2, 10.3, 9.4, 8.9, 10.6, 10.5, 11.1, 10.4, 10.7, 11.3, 10.2, 9.6, 10.2, 11.1, 10.8, 13.0, 12.5, 12.5, 11.3, 10.1
		]
	}, {
		name: 'Vik',
		data: [
			0.2, 0.1, 0.1, 0.1, 0.3, 0.2, 0.3, 0.1, 0.7, 0.3, 0.2, 0.2, 0.3, 0.1, 0.3, 0.4, 0.3, 0.2, 0.3, 0.2, 0.4, 0.0, 0.9, 0.3, 0.7, 1.1, 1.8, 1.2, 1.4, 1.2, 0.9, 0.8, 0.9, 0.2, 0.4, 1.2, 0.3, 2.3, 1.0, 0.7, 1.0, 0.8, 2.0, 1.2, 1.4, 3.7, 2.1, 2.0, 1.5
		]
	}],
	navigation: {
		menuItemStyle: {
			fontSize: '10px'
		}
	}
});
				

<div id="graph9"></div>
				

Highcharts.chart('graph9', {
	chart: {
		type: 'spline'
	},
	title: {
		text: 'Snow depth at Vikjafjellet, Norway'
	},
	subtitle: {
		text: 'Irregular time data in Highcharts JS'
	},
	xAxis: {
		type: 'datetime',
		dateTimeLabelFormats: { // don't display the dummy year
			month: '%e. %b',
			year: '%b'
		},
		title: {
			text: 'Date'
		}
	},
	yAxis: {
		title: {
			text: 'Snow depth (m)'
		},
		min: 0
	},
	tooltip: {
		headerFormat: '{series.name}
', pointFormat: '{point.x:%e. %b}: {point.y:.2f} m' }, plotOptions: { spline: { marker: { enabled: true } } }, colors: ['#6CF', '#39F', '#06C', '#036', '#000'], // Define the data points. All series have a dummy year // of 1970/71 in order to be compared on the same x axis. Note // that in JavaScript, months start at 0 for January, 1 for February etc. series: [{ name: "Winter 2014-2015", data: [ [Date.UTC(1970, 10, 25), 0], [Date.UTC(1970, 11, 6), 0.25], [Date.UTC(1970, 11, 20), 1.41], [Date.UTC(1970, 11, 25), 1.64], [Date.UTC(1971, 0, 4), 1.6], [Date.UTC(1971, 0, 17), 2.55], [Date.UTC(1971, 0, 24), 2.62], [Date.UTC(1971, 1, 4), 2.5], [Date.UTC(1971, 1, 14), 2.42], [Date.UTC(1971, 2, 6), 2.74], [Date.UTC(1971, 2, 14), 2.62], [Date.UTC(1971, 2, 24), 2.6], [Date.UTC(1971, 3, 1), 2.81], [Date.UTC(1971, 3, 11), 2.63], [Date.UTC(1971, 3, 27), 2.77], [Date.UTC(1971, 4, 4), 2.68], [Date.UTC(1971, 4, 9), 2.56], [Date.UTC(1971, 4, 14), 2.39], [Date.UTC(1971, 4, 19), 2.3], [Date.UTC(1971, 5, 4), 2], [Date.UTC(1971, 5, 9), 1.85], [Date.UTC(1971, 5, 14), 1.49], [Date.UTC(1971, 5, 19), 1.27], [Date.UTC(1971, 5, 24), 0.99], [Date.UTC(1971, 5, 29), 0.67], [Date.UTC(1971, 6, 3), 0.18], [Date.UTC(1971, 6, 4), 0] ] }, { name: "Winter 2015-2016", data: [ [Date.UTC(1970, 10, 9), 0], [Date.UTC(1970, 10, 15), 0.23], [Date.UTC(1970, 10, 20), 0.25], [Date.UTC(1970, 10, 25), 0.23], [Date.UTC(1970, 10, 30), 0.39], [Date.UTC(1970, 11, 5), 0.41], [Date.UTC(1970, 11, 10), 0.59], [Date.UTC(1970, 11, 15), 0.73], [Date.UTC(1970, 11, 20), 0.41], [Date.UTC(1970, 11, 25), 1.07], [Date.UTC(1970, 11, 30), 0.88], [Date.UTC(1971, 0, 5), 0.85], [Date.UTC(1971, 0, 11), 0.89], [Date.UTC(1971, 0, 17), 1.04], [Date.UTC(1971, 0, 20), 1.02], [Date.UTC(1971, 0, 25), 1.03], [Date.UTC(1971, 0, 30), 1.39], [Date.UTC(1971, 1, 5), 1.77], [Date.UTC(1971, 1, 26), 2.12], [Date.UTC(1971, 3, 19), 2.1], [Date.UTC(1971, 4, 9), 1.7], [Date.UTC(1971, 4, 29), 0.85], [Date.UTC(1971, 5, 7), 0] ] }, { name: "Winter 2016-2017", data: [ [Date.UTC(1970, 9, 15), 0], [Date.UTC(1970, 9, 31), 0.09], [Date.UTC(1970, 10, 7), 0.17], [Date.UTC(1970, 10, 10), 0.1], [Date.UTC(1970, 11, 10), 0.1], [Date.UTC(1970, 11, 13), 0.1], [Date.UTC(1970, 11, 16), 0.11], [Date.UTC(1970, 11, 19), 0.11], [Date.UTC(1970, 11, 22), 0.08], [Date.UTC(1970, 11, 25), 0.23], [Date.UTC(1970, 11, 28), 0.37], [Date.UTC(1971, 0, 16), 0.68], [Date.UTC(1971, 0, 19), 0.55], [Date.UTC(1971, 0, 22), 0.4], [Date.UTC(1971, 0, 25), 0.4], [Date.UTC(1971, 0, 28), 0.37], [Date.UTC(1971, 0, 31), 0.43], [Date.UTC(1971, 1, 4), 0.42], [Date.UTC(1971, 1, 7), 0.39], [Date.UTC(1971, 1, 10), 0.39], [Date.UTC(1971, 1, 13), 0.39], [Date.UTC(1971, 1, 16), 0.39], [Date.UTC(1971, 1, 19), 0.35], [Date.UTC(1971, 1, 22), 0.45], [Date.UTC(1971, 1, 25), 0.62], [Date.UTC(1971, 1, 28), 0.68], [Date.UTC(1971, 2, 4), 0.68], [Date.UTC(1971, 2, 7), 0.65], [Date.UTC(1971, 2, 10), 0.65], [Date.UTC(1971, 2, 13), 0.75], [Date.UTC(1971, 2, 16), 0.86], [Date.UTC(1971, 2, 19), 1.14], [Date.UTC(1971, 2, 22), 1.2], [Date.UTC(1971, 2, 25), 1.27], [Date.UTC(1971, 2, 27), 1.12], [Date.UTC(1971, 2, 30), 0.98], [Date.UTC(1971, 3, 3), 0.85], [Date.UTC(1971, 3, 6), 1.04], [Date.UTC(1971, 3, 9), 0.92], [Date.UTC(1971, 3, 12), 0.96], [Date.UTC(1971, 3, 15), 0.94], [Date.UTC(1971, 3, 18), 0.99], [Date.UTC(1971, 3, 21), 0.96], [Date.UTC(1971, 3, 24), 1.15], [Date.UTC(1971, 3, 27), 1.18], [Date.UTC(1971, 3, 30), 1.12], [Date.UTC(1971, 4, 3), 1.06], [Date.UTC(1971, 4, 6), 0.96], [Date.UTC(1971, 4, 9), 0.87], [Date.UTC(1971, 4, 12), 0.88], [Date.UTC(1971, 4, 15), 0.79], [Date.UTC(1971, 4, 18), 0.54], [Date.UTC(1971, 4, 21), 0.34], [Date.UTC(1971, 4, 25), 0] ] }] });

<div id="graph10"></div>
				

Highcharts.chart('container', {
	title: {
		text: 'Logarithmic axis demo'
	},
	xAxis: {
		tickInterval: 1
	},
	yAxis: {
		type: 'logarithmic',
		minorTickInterval: 0.1
	},
	tooltip: {
		headerFormat: '{series.name}
', pointFormat: 'x = {point.x}, y = {point.y}' }, series: [{ data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512], pointStart: 1 }] });

<div id="graph11"></div>
				

function getData(n) {
	var arr = [], i, x, a, b, c, spike;
	for (
		i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5;
		i < n;
		i = i + 1, x = x + 36e5
	) {
		if (i % 100 === 0) {
			a = 2 * Math.random();
		}
		if (i % 1000 === 0) {
			b = 2 * Math.random();
		}
		if (i % 10000 === 0) {
			c = 2 * Math.random();
		}
		if (i % 50000 === 0) {
			spike = 10;
		} else {
			spike = 0;
		}
		arr.push([
			x,
			2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
		]);
	}
	return arr;
}
var n = 500000, data = getData(n);
console.time('line');
Highcharts.chart('container', {
	chart: {
		zoomType: 'x'
	},
	title: {
		text: 'Highcharts drawing ' + n + ' points'
	},
	subtitle: {
		text: 'Using the Boost module'
	},
	tooltip: {
		valueDecimals: 2
	},
	xAxis: {
		type: 'datetime'
	},
	series: [{
		data: data,
		lineWidth: 0.5,
		name: 'Hourly data points'
	}]
});
console.timeEnd('line');
				

Area charts


<div id="graph12"></div>
				

Highcharts.chart('graph12', {
	chart: {
		type: 'area'
	},
	title: {
		text: 'US and USSR nuclear stockpiles'
	},
	subtitle: {
		text: 'Sources: ' +
			'thebulletin.org & ' +
			'armscontrol.org'
	},
	xAxis: {
		allowDecimals: false,
		labels: {
			formatter: function () {
				return this.value; // clean, unformatted number for year
			}
		}
	},
	yAxis: {
		title: {
			text: 'Nuclear weapon states'
		},
		labels: {
			formatter: function () {
				return this.value / 1000 + 'k';
			}
		}
	},
	tooltip: {
		pointFormat: '{series.name} had stockpiled {point.y:,.0f}
warheads in {point.x}' }, plotOptions: { area: { pointStart: 1940, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }, series: [{ name: 'USA', data: [ null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326, 5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018 ] }, { name: 'USSR/Russia', data: [ null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787, 12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500 ] }] });

<div id="graph13"></div>
				

Highcharts.chart('graph13', {
	chart: {
		type: 'area'
	},
	title: {
		text: 'Area chart with negative values'
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	credits: {
		enabled: false
	},
	series: [{
		name: 'John',
		data: [5, 3, 4, 7, 2]
	}, {
		name: 'Jane',
		data: [2, -2, -3, 2, 1]
	}, {
		name: 'Joe',
		data: [3, 4, 4, -2, 5]
	}]
});
				

<div id="graph14"></div>
				

Highcharts.chart('graph14', {
	chart: {
		type: 'area'
	},
	title: {
		text: 'Historic and Estimated Worldwide Population Growth by Region'
	},
	subtitle: {
		text: 'Source: Wikipedia.org'
	},
	xAxis: {
		categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
		tickmarkPlacement: 'on',
		title: {
			enabled: false
		}
	},
	yAxis: {
		title: {
			text: 'Billions'
		},
		labels: {
			formatter: function () {
				return this.value / 1000;
			}
		}
	},
	tooltip: {
		split: true,
		valueSuffix: ' millions'
	},
	plotOptions: {
		area: {
			stacking: 'normal',
			lineColor: '#666666',
			lineWidth: 1,
			marker: {
				lineWidth: 1,
				lineColor: '#666666'
			}
		}
	},
	series: [{
		name: 'Asia',
		data: [502, 635, 809, 947, 1402, 3634, 5268]
	}, {
		name: 'Africa',
		data: [106, 107, 111, 133, 221, 767, 1766]
	}, {
		name: 'Europe',
		data: [163, 203, 276, 408, 547, 729, 628]
	}, {
		name: 'America',
		data: [18, 31, 54, 156, 339, 818, 1201]
	}, {
		name: 'Oceania',
		data: [2, 2, 2, 6, 13, 30, 46]
	}]
});
				

<div id="graph15"></div>
				

Highcharts.chart('graph15', {
	chart: {
		type: 'area'
	},
	title: {
		text: 'Historic and Estimated Worldwide Population Distribution by Region'
	},
	subtitle: {
		text: 'Source: Wikipedia.org'
	},
	xAxis: {
		categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
		tickmarkPlacement: 'on',
		title: {
			enabled: false
		}
	},
	yAxis: {
		title: {
			text: 'Percent'
		}
	},
	tooltip: {
		pointFormat: '{series.name}: {point.percentage:.1f}% ({point.y:,.0f} millions)
', split: true }, plotOptions: { area: { stacking: 'percent', lineColor: '#ffffff', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#ffffff' } } }, series: [{ name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] }] });

<div id="graph16"></div>
				

Highcharts.chart('graph16', {
	chart: {
		type: 'area',
		spacingBottom: 30
	},
	title: {
		text: 'Fruit consumption *'
	},
	subtitle: {
		text: '* Jane\'s banana consumption is unknown',
		floating: true,
		align: 'right',
		verticalAlign: 'bottom',
		y: 15
	},
	legend: {
		layout: 'vertical',
		align: 'left',
		verticalAlign: 'top',
		x: 150,
		y: 100,
		floating: true,
		borderWidth: 1,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	},
	xAxis: {
		categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
	},
	yAxis: {
		title: {
			text: 'Y-Axis'
		},
		labels: {
			formatter: function () {
				return this.value;
			}
		}
	},
	tooltip: {
		formatter: function () {
			return '' + this.series.name + '
' + this.x + ': ' + this.y; } }, plotOptions: { area: { fillOpacity: 0.5 } }, credits: { enabled: false }, series: [{ name: 'John', data: [0, 1, 4, 4, 5, 2, 3, 7] }, { name: 'Jane', data: [1, 0, 3, null, 3, 1, 2, 1] }] });

<div id="graph17"></div>
				

Highcharts.chart('graph17', {
	chart: {
		type: 'area',
		inverted: true
	},
	title: {
		text: 'Average fruit consumption during one week'
	},
	subtitle: {
		style: {
			position: 'absolute',
			right: '0px',
			bottom: '10px'
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -150,
		y: 100,
		floating: true,
		borderWidth: 1,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	},
	xAxis: {
		categories: [
			'Monday',
			'Tuesday',
			'Wednesday',
			'Thursday',
			'Friday',
			'Saturday',
			'Sunday'
		]
	},
	yAxis: {
		title: {
			text: 'Number of units'
		},
		allowDecimals: false,
		min: 0
	},
	plotOptions: {
		area: {
			fillOpacity: 0.5
		}
	},
	series: [{
		name: 'John',
		data: [3, 4, 3, 5, 4, 10, 12]
	}, {
		name: 'Jane',
		data: [1, 3, 4, 3, 3, 5, 4]
	}]
});
				

<div id="graph18"></div>
				

Highcharts.chart('graph18', {
	chart: {
		type: 'areaspline'
	},
	title: {
		text: 'Average fruit consumption during one week'
	},
	legend: {
		layout: 'vertical',
		align: 'left',
		verticalAlign: 'top',
		x: 150,
		y: 100,
		floating: true,
		borderWidth: 1,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	},
	xAxis: {
		categories: [
			'Monday',
			'Tuesday',
			'Wednesday',
			'Thursday',
			'Friday',
			'Saturday',
			'Sunday'
		],
		plotBands: [{ // visualize the weekend
			from: 4.5,
			to: 6.5,
			color: 'rgba(68, 170, 213, .2)'
		}]
	},
	yAxis: {
		title: {
			text: 'Fruit units'
		}
	},
	tooltip: {
		shared: true,
		valueSuffix: ' units'
	},
	credits: {
		enabled: false
	},
	plotOptions: {
		areaspline: {
			fillOpacity: 0.5
		}
	},
	series: [{
		name: 'John',
		data: [3, 4, 3, 5, 4, 10, 12]
	}, {
		name: 'Jane',
		data: [1, 3, 4, 3, 3, 5, 4]
	}]
});
				

<div id="graph19"></div>
				

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/range.json', function (data) {
	Highcharts.chart('graph19', {
		chart: {
			type: 'arearange',
			zoomType: 'x',
			scrollablePlotArea: {
				minWidth: 600,
				scrollPositionX: 1
			}
		},
		title: {
			text: 'Temperature variation by day'
		},
		xAxis: {
			type: 'datetime'
		},
		yAxis: {
			title: {
				text: null
			}
		},
		tooltip: {
			crosshairs: true,
			shared: true,
			valueSuffix: '°C'
		},
		legend: {
			enabled: false
		},
		series: [{
			name: 'Temperatures',
			data: data
		}]
	});
});
				

<div id="graph20"></div>
				

var ranges = [
		[1246406400000, 14.3, 27.7], [1246492800000, 14.5, 27.8], [1246579200000, 15.5, 29.6], [1246665600000, 16.7, 30.7], [1246752000000, 16.5, 25.0], [1246838400000, 17.8, 25.7], [1246924800000, 13.5, 24.8], [1247011200000, 10.5, 21.4], [1247097600000, 9.2, 23.8], [1247184000000, 11.6, 21.8], [1247270400000, 10.7, 23.7], [1247356800000, 11.0, 23.3], [1247443200000, 11.6, 23.7], [1247529600000, 11.8, 20.7], [1247616000000, 12.6, 22.4], [1247702400000, 13.6, 19.6], [1247788800000, 11.4, 22.6], [1247875200000, 13.2, 25.0], [1247961600000, 14.2, 21.6], [1248048000000, 13.1, 17.1], [1248134400000, 12.2, 15.5], [1248220800000, 12.0, 20.8], [1248307200000, 12.0, 17.1], [1248393600000, 12.7, 18.3], [1248480000000, 12.4, 19.4], [1248566400000, 12.6, 19.9], [1248652800000, 11.9, 20.2], [1248739200000, 11.0, 19.3], [1248825600000, 10.8, 17.8], [1248912000000, 11.8, 18.5], [1248998400000, 10.8, 16.1]
	],
	averages = [
		[1246406400000, 21.5], [1246492800000, 22.1], [1246579200000, 23], [1246665600000, 23.8], [1246752000000, 21.4], [1246838400000, 21.3], [1246924800000, 18.3], [1247011200000, 15.4], [1247097600000, 16.4], [1247184000000, 17.7], [1247270400000, 17.5], [1247356800000, 17.6], [1247443200000, 17.7], [1247529600000, 16.8], [1247616000000, 17.7], [1247702400000, 16.3], [1247788800000, 17.8], [1247875200000, 18.1], [1247961600000, 17.2], [1248048000000, 14.4], [1248134400000, 13.7], [1248220800000, 15.7], [1248307200000, 14.6], [1248393600000, 15.3], [1248480000000, 15.3], [1248566400000, 15.8], [1248652800000, 15.2], [1248739200000, 14.8], [1248825600000, 14.4], [1248912000000, 15], [1248998400000, 13.6]
	];
Highcharts.chart('graph20', {
	title: {
		text: 'July temperatures'
	},
	xAxis: {
		type: 'datetime'
	},
	yAxis: {
		title: {
			text: null
		}
	},
	tooltip: {
		crosshairs: true,
		shared: true,
		valueSuffix: '°C'
	},
	legend: {},
	series: [{
		name: 'Temperature',
		data: averages,
		zIndex: 1,
		marker: {
			fillColor: 'white',
			lineWidth: 2,
			lineColor: Highcharts.getOptions().colors[0]
		}
	}, {
		name: 'Range',
		data: ranges,
		type: 'arearange',
		lineWidth: 0,
		linkedTo: ':previous',
		color: Highcharts.getOptions().colors[0],
		fillOpacity: 0.3,
		zIndex: 0,
		marker: {
			enabled: false
		}
	}]
});
				

<div id="graph22"></div>
				

var colors = Highcharts.getOptions().colors;
Highcharts.chart('graph22', {
	chart: {
		type: 'streamgraph',
		marginBottom: 30,
		zoomType: 'x'
	},
	// Make sure connected countries have similar colors
	colors: [
		colors[0], colors[1], colors[2], colors[3], colors[4],
		// East Germany, West Germany and Germany
		Highcharts.color(colors[5]).brighten(0.2).get(),
		Highcharts.color(colors[5]).brighten(0.1).get(),
		colors[5], colors[6], colors[7], colors[8], colors[9], colors[0], colors[1], colors[3],
		// Soviet Union, Russia
		Highcharts.color(colors[2]).brighten(-0.1).get(),
		Highcharts.color(colors[2]).brighten(-0.2).get(),
		Highcharts.color(colors[2]).brighten(-0.3).get()
	],
	title: {
		floating: true,
		align: 'left',
		text: 'Winter Olympic Medal Wins'
	},
	subtitle: {
		floating: true,
		align: 'left',
		y: 30,
		text: 'Source: sports-reference.com'
	},
	xAxis: {
		maxPadding: 0,
		type: 'category',
		crosshair: true,
		categories: [
			'', '1924 Chamonix', '1928 St. Moritz', '1932 Lake Placid', '1936 Garmisch-Partenkirchen', '1940 Cancelled (Sapporo)', '1944 Cancelled (Cortina d\'Ampezzo)', '1948 St. Moritz', '1952 Oslo', '1956 Cortina d\'Ampezzo', '1960 Squaw Valley', '1964 Innsbruck', '1968 Grenoble', '1972 Sapporo', '1976 Innsbruck', '1980 Lake Placid', '1984 Sarajevo', '1988 Calgary', '1992 Albertville', '1994 Lillehammer', '1998 Nagano', '2002 Salt Lake City', '2006 Turin', '2010 Vancouver', '2014 Sochi'
		],
		labels: {
			align: 'left',
			reserveSpace: false,
			rotation: 270
		},
		lineWidth: 0,
		margin: 20,
		tickWidth: 0
	},
	yAxis: {
		visible: false,
		startOnTick: false,
		endOnTick: false
	},
	legend: {
		enabled: false
	},
	annotations: [{
		labels: [{
			point: {
				x: 5.5,
				xAxis: 0,
				y: 30,
				yAxis: 0
			},
			text: 'Cancelled
during
World War II' }, { point: { x: 18, xAxis: 0, y: 90, yAxis: 0 }, text: 'Soviet Union fell,
Germany united' }], labelOptions: { backgroundColor: 'rgba(255,255,255,0.5)', borderColor: 'silver' } }], plotOptions: { series: { label: { minFontSize: 5, maxFontSize: 15, style: { color: 'rgba(255,255,255,0.75)' } } } }, // Data parsed with olympic-medals.node.js series: [{ "name": "Finland", "data": [0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5] }, { "name": "Austria", "data": [0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17] }, { "name": "Sweden", "data": [0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15] }, { "name": "Norway", "data": [0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26] }, { "name": "U.S.", "data": [0, 4, 6, 12, 4, 0, 0, 9, 11, 7, 10, 7, 7, 8, 10, 12, 8, 6, 11, 13, 13, 34, 25, 37, 28] }, { "name": "East Germany", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 14, 19, 23, 24, 25, 0, 0, 0, 0, 0, 0, 0] }, { "name": "West Germany", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 5, 10, 5, 4, 8, 0, 0, 0, 0, 0, 0, 0] }, { "name": "Germany", "data": [0, 0, 1, 2, 6, 0, 0, 0, 7, 2, 8, 9, 0, 0, 0, 0, 0, 0, 26, 24, 29, 36, 29, 30, 19] }, { "name": "Netherlands", "data": [0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 2, 9, 9, 6, 4, 0, 7, 4, 4, 11, 8, 9, 8, 24] }, { "name": "Italy", "data": [0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 1, 4, 4, 5, 4, 2, 2, 5, 14, 20, 10, 13, 11, 5, 8] }, { "name": "Canada", "data": [0, 1, 1, 7, 1, 0, 0, 3, 2, 3, 4, 3, 3, 1, 3, 2, 4, 5, 7, 13, 15, 17, 24, 26, 25] }, { "name": "Switzerland", "data": [0, 3, 1, 1, 3, 0, 0, 10, 2, 6, 2, 0, 6, 10, 5, 5, 5, 15, 3, 9, 7, 11, 14, 9, 11] }, { "name": "Great Britain", "data": [0, 4, 1, 0, 3, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 2, 1, 2, 1, 1, 4] }, { "name": "France", "data": [0, 3, 1, 1, 1, 0, 0, 5, 1, 0, 3, 7, 9, 3, 1, 1, 3, 2, 9, 5, 8, 11, 9, 11, 15] }, { "name": "Hungary", "data": [0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, { "name": "Unified Team", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 0, 0, 0, 0, 0, 0] }, { "name": "Soviet Union", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 21, 25, 13, 16, 27, 22, 25, 29, 0, 0, 0, 0, 0, 0, 0] }, { "name": "Russia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 18, 13, 22, 15, 33] }, { "name": "Japan", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 1, 1, 1, 7, 5, 10, 2, 1, 5, 8] }, { "name": "Czechoslovakia", "data": [0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 4, 3, 1, 1, 6, 3, 3, 0, 0, 0, 0, 0, 0] }, { "name": "Poland", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 2, 6, 6] }, { "name": "Spain", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0] }, { "name": "China", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 8, 8, 11, 11, 9] }, { "name": "South Korea", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 6, 6, 4, 11, 14, 8] }, { "name": "Czech Republic", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 4, 6, 8] }, { "name": "Belarus", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 3, 6] }, { "name": "Kazakhstan", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 0, 1, 1] }, { "name": "Bulgaria", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 3, 1, 0, 0] }, { "name": "Denmark", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0] }, { "name": "Ukraine", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 2, 0, 2] }, { "name": "Australia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 3, 3] }, { "name": "Belgium", "data": [0, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0] }, { "name": "Romania", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, { "name": "Liechtenstein", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 0, 0, 0, 0, 0, 0, 0] }, { "name": "Yugoslavia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0] }, { "name": "Luxembourg", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0] }, { "name": "New Zealand", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0] }, { "name": "North Korea", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0] }, { "name": "Slovakia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1] }, { "name": "Croatia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 3, 3, 1] }, { "name": "Slovenia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 1, 0, 3, 8] }, { "name": "Latvia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4] }, { "name": "Estonia", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 1, 0] }, { "name": "Uzbekistan", "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0] }], exporting: { sourceWidth: 800, sourceHeight: 600 } });
State Income Income per quarter Costs Costs per quarter Result Result per quarter
Alabama 254 296 -42
Alaska 246 181 65
Arizona 101 191 -90
Arkansas 303 76 227
California 200 217 -17
Colorado 118 273 -155
Connecticut 201 148 53
Delaware 161 298 -137
District of Columbia 106 185 -79
Florida 249 244 5

<div id="graph21"></div>
				

/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function (a, b, c) {
	var hasRenderToArg = typeof a === 'string' || a.nodeName,
		options = arguments[hasRenderToArg ? 1 : 0],
		defaultOptions = {
			chart: {
				renderTo: (options.chart && options.chart.renderTo) || this,
				backgroundColor: null,
				borderWidth: 0,
				type: 'area',
				margin: [2, 0, 2, 0],
				width: 120,
				height: 20,
				style: {
					overflow: 'visible'
				},
				// small optimalization, saves 1-2 ms each sparkline
				skipClone: true,
			},
			title: {
				text: ''
			},
			credits: {
				enabled: false
			},
			xAxis: {
				labels: {
					enabled: false
				},
				title: {
					text: null
				},
				startOnTick: false,
				endOnTick: false,
				tickPositions: []
			},
			yAxis: {
				endOnTick: false,
				startOnTick: false,
				labels: {
					enabled: false
				},
				title: {
					text: null
				},
				tickPositions: [0]
			},
			legend: {
				enabled: false
			},
			tooltip: {
				backgroundColor: null,
				borderWidth: 0,
				shadow: false,
				useHTML: true,
				hideDelay: 0,
				shared: true,
				padding: 0,
				positioner: function (w, h, point) {
					return { x: point.plotX - w / 2, y: point.plotY - h };
				}
			},
			plotOptions: {
				series: {
					animation: false,
					lineWidth: 1,
					shadow: false,
					states: {
						hover: {
							lineWidth: 1
						}
					},
					marker: {
						radius: 1,
						states: {
							hover: {
								radius: 2
							}
						}
					},
					fillOpacity: 0.25
				},
				column: {
					negativeColor: '#910000',
					borderColor: 'silver'
				}
			},
			exporting: {
				enabled: false
			}
	};
	options = Highcharts.merge(defaultOptions, options);
	return hasRenderToArg ?
		new Highcharts.Chart(a, options, c) :
		new Highcharts.Chart(options, b);
};
var start = +new Date(),
	$tds = $('td[data-sparkline]'),
	fullLen = $tds.length,
	n = 0;

// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
	var time = +new Date(),
		i,
		len = $tds.length,
		$td,
		stringdata,
		arr,
		data,
		chart;
	for (i = 0; i < len; i += 1) {
		$td = $($tds[i]);
		stringdata = $td.data('sparkline');
		arr = stringdata.split('; ');
		data = $.map(arr[0].split(', '), parseFloat);
		chart = {};
		if (arr[1]) {
			chart.type = arr[1];
		}
		$td.highcharts('SparkLine', {
			series: [{
				data: data,
				pointStart: 1
			}],
			tooltip: {
				headerFormat: '' + $td.parent().find('th').html() + ', Q{point.x}:
', pointFormat: '{point.y}.000 USD' }, chart: chart }); n += 1; // If the process takes too much time, run a timeout to allow interaction with the browser if (new Date() - time > 500) { $tds.splice(0, i + 1); setTimeout(doChunk, 0); break; } // Print a feedback on the performance if (n === fullLen) { $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms'); } } } doChunk();

Column and bar charts


<div id="graph23"></div>
				

Highcharts.chart('graph23', {
	chart: {
		type: 'bar'
	},
	title: {
		text: 'Historic World Population by Region'
	},
	subtitle: {
		text: 'Source: Wikipedia.org'
	},
	xAxis: {
		categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
		title: {
		text: null
	}
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Population (millions)',
			align: 'high'
		},
		labels: {
			overflow: 'justify'
		}
	},
	tooltip: {
		valueSuffix: ' millions'
	},
	plotOptions: {
		bar: {
			dataLabels: {
				enabled: true
			}
		}
	},
	legend: {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'top',
		x: -40,
		y: 80,
		floating: true,
		borderWidth: 1,
		backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
		shadow: true
	},
	credits: {
		enabled: false
	},
	series: [{
		name: 'Year 1800',
		data: [107, 31, 635, 203, 2]
	}, {
		name: 'Year 1900',
		data: [133, 156, 947, 408, 6]
	}, {
		name: 'Year 2000',
		data: [814, 841, 3714, 727, 31]
	}, {
		name: 'Year 2016',
		data: [1216, 1001, 4436, 738, 40]
	}]
});
				

<div id="graph24"></div>
				

Highcharts.chart('graph24', {
	chart: {
		type: 'bar'
	},
	title: {
		text: 'Stacked bar chart'
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Total fruit consumption'
		}
	},
	legend: {
		reversed: true
	},
	plotOptions: {
		series: {
			stacking: 'normal'
		}
	},
	series: [{
		name: 'John',
		data: [5, 3, 4, 7, 2]
	}, {
		name: 'Jane',
		data: [2, 2, 3, 2, 1]
	}, {
		name: 'Joe',
		data: [3, 4, 4, 2, 5]
	}]
});
				

<div id="graph25"></div>
				

// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19', '20-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80-84', '85-89', '90-94', '95-99', '100 + '];
Highcharts.chart('graph25', {
	chart: {
		type: 'bar'
	},
	title: {
		text: 'Population pyramid for Germany, 2018'
	},
	subtitle: {
		text: 'Source: Population Pyramids of the World from 1950 to 2100'
	},
	xAxis: [{
		categories: categories,
		reversed: false,
		labels: {
			step: 1
		}
	}, { // mirror axis on right side
		opposite: true,
		reversed: false,
		categories: categories,
		linkedTo: 0,
		labels: {
			step: 1
		}
	}],
	yAxis: {
		title: {
			text: null
		},
		labels: {
			formatter: function () {
				return Math.abs(this.value) + '%';
			}
		}
	},
	plotOptions: {
		series: {
			stacking: 'normal'
		}
	},
	tooltip: {
		formatter: function () {
			return '' + this.series.name + ', age ' + this.point.category + '
' + 'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); } }, series: [{ name: 'Male', data: [-2.2, -2.1, -2.2, -2.4, -2.7, -3.0, -3.3, -3.2, -2.9, -3.5, -4.4, -4.1, -3.4, -2.7, -2.3, -2.2, -1.6, -0.6, -0.3, -0.0, -0.0] }, { name: 'Female', data: [2.1, 2.0, 2.1, 2.3, 2.6, 2.9, 3.2, 3.1, 2.9, 3.4, 4.3, 4.0, 3.5, 2.9, 2.5, 2.7, 2.2, 1.1, 0.6, 0.2, 0.0] }] });

<div id="graph26"></div>
				

Highcharts.chart('graph26', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Monthly Average Rainfall'
	},
	subtitle: {
		text: 'Source: WorldClimate.com'
	},
	xAxis: {
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Rainfall (mm)'
		}
	},
	tooltip: {
		headerFormat: '{point.key}',
		pointFormat: '' +
			'',
		footerFormat: '
{series.name}: {point.y:.1f} mm
', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: 'Tokyo', data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { name: 'New York', data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] }, { name: 'London', data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] }, { name: 'Berlin', data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] }] });

<div id="graph27"></div>
				

Highcharts.chart('graph27', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Column chart with negative values'
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	credits: {
		enabled: false
	},
	series: [{
		name: 'John',
		data: [5, 3, 4, 7, 2]
	}, {
		name: 'Jane',
		data: [2, -2, -3, 2, 1]
	}, {
		name: 'Joe',
		data: [3, 4, 4, -2, 5]
	}]
});
				

<div id="graph28"></div>
				

Highcharts.chart('graph28', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Stacked column chart'
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Total fruit consumption'
		},
		stackLabels: {
			enabled: true,
			style: {
				fontWeight: 'bold',
				color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
			}
		}
	},
	legend: {
		align: 'right',
		x: -30,
		verticalAlign: 'top',
		y: 25,
		floating: true,
		backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
		borderColor: '#CCC',
		borderWidth: 1,
		shadow: false
	},
	tooltip: {
		headerFormat: '{point.x}
', pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, 2, 3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, 2, 5] }] });

<div id="graph29"></div>
				

Highcharts.chart('graph29', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Total fruit consumtion, grouped by gender'
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	yAxis: {
		allowDecimals: false,
		min: 0,
		title: {
			text: 'Number of fruits'
		}
	},
	tooltip: {
		formatter: function () {
		return '' + this.x + '
' + this.series.name + ': ' + this.y + '
' + 'Total: ' + this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal' } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'Joe', data: [3, 4, 4, 2, 5], stack: 'male' }, { name: 'Jane', data: [2, 5, 6, 2, 1], stack: 'female' }, { name: 'Janet', data: [3, 0, 4, 4, 3], stack: 'female' }] });

<div id="graph30"></div>
				

Highcharts.chart('graph30', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Stacked column chart'
	},
	xAxis: {
		categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Total fruit consumption'
		}
	},
	tooltip: {
		pointFormat: '{series.name}: {point.y} ({point.percentage:.0f}%)
', shared: true }, plotOptions: { column: { stacking: 'percent' } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, 2, 3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, 2, 5] }] });

<div id="graph31"></div>
				

Highcharts.chart('graph-31', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'World\'s largest cities per 2017'
	},
	subtitle: {
		text: 'Source: Wikipedia'
	},
	xAxis: {
		type: 'category',
		labels: {
			rotation: -45,
			style: {
				fontSize: '13px',
				fontFamily: 'Verdana, sans-serif'
			}
		}
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Population (millions)'
		}
	},
	legend: {
		enabled: false
	},
	tooltip: {
		pointFormat: 'Population in 2017: {point.y:.1f} millions'
	},
	series: [{
		name: 'Population',
		data: [
			['Shanghai', 24.2], ['Beijing', 20.8], ['Karachi', 14.9], ['Shenzhen', 13.7], ['Guangzhou', 13.1], ['Istanbul', 12.7], ['Mumbai', 12.4], ['Moscow', 12.2], ['São Paulo', 12.0], ['Delhi', 11.7], ['Kinshasa', 11.5], ['Tianjin', 11.2], ['Lahore', 11.1], ['Jakarta', 10.6], ['Dongguan', 10.6], ['Lagos', 10.6], ['Bengaluru', 10.3], ['Seoul', 9.8], ['Foshan', 9.3], ['Tokyo', 9.3]
		],
		dataLabels: {
			enabled: true,
			rotation: -90,
			color: '#FFFFFF',
			align: 'right',
			format: '{point.y:.1f}', // one decimal
			y: 10, // 10 pixels down from the top
			style: {
				fontSize: '13px',
				fontFamily: 'Verdana, sans-serif'
			}
		}
	}]
});
				

<div id="graph32"></div>
				

Highcharts.chart('graph32', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Browser market shares. January, 2018'
	},
	subtitle: {
		text: 'Click the columns to view versions. Source: statcounter.com'
	},
	xAxis: {
		type: 'category'
	},
	yAxis: {
		title: {
			text: 'Total percent market share'
		}
	},
	legend: {
		enabled: false
	},
	plotOptions: {
		series: {
			borderWidth: 0,
			dataLabels: {
				enabled: true,
				format: '{point.y:.1f}%'
			}
		}
	},
	tooltip: {
		headerFormat: '{series.name}
', pointFormat: '{point.name}: {point.y:.2f}% of total
' }, "series": [{ "name": "Browsers", "colorByPoint": true, "data": [{ "name": "Chrome", "y": 62.74, "drilldown": "Chrome" },{ "name": "Firefox", "y": 10.57, "drilldown": "Firefox" },{ "name": "Internet Explorer", "y": 7.23, "drilldown": "Internet Explorer" },{ "name": "Safari", "y": 5.58, "drilldown": "Safari" },{ "name": "Edge", "y": 4.02, "drilldown": "Edge" },{ "name": "Opera", "y": 1.92, "drilldown": "Opera" },{ "name": "Other", "y": 7.62, "drilldown": null }] }], "drilldown": { "series": [{ "name": "Chrome", "id": "Chrome", "data": [ ["v65.0", 0.1], ["v64.0", 1.3], ["v63.0", 53.02], ["v62.0", 1.4], ["v61.0", 0.88], ["v60.0", 0.56], ["v59.0", 0.45], ["v58.0", 0.49], ["v57.0", 0.32], ["v56.0", 0.29], ["v55.0", 0.79], ["v54.0", 0.18], ["v51.0", 0.13], ["v49.0", 2.16], ["v48.0", 0.13], ["v47.0", 0.11], ["v43.0", 0.17], ["v29.0", 0.26] ] },{ "name": "Firefox", "id": "Firefox", "data": [ ["v58.0", 1.02], ["v57.0", 7.36], ["v56.0", 0.35], ["v55.0", 0.11], ["v54.0", 0.1], ["v52.0", 0.95], ["v51.0", 0.15], ["v50.0", 0.1], ["v48.0", 0.31], ["v47.0", 0.12] ] },{ "name": "Internet Explorer", "id": "Internet Explorer", "data": [ ["v11.0", 6.2], ["v10.0", 0.29], ["v9.0", 0.27], ["v8.0", 0.47] ] },{ "name": "Safari", "id": "Safari", "data": [ ["v11.0", 3.39], ["v10.1", 0.96], ["v10.0", 0.36], ["v9.1", 0.54], ["v9.0", 0.13], ["v5.1", 0.2] ] },{ "name": "Edge", "id": "Edge", "data": [ ["v16", 2.6], ["v15", 0.92], ["v14", 0.4], ["v13", 0.1] ] },{ "name": "Opera", "id": "Opera", "data": [ ["v50.0", 0.96], ["v49.0", 0.82], ["v12.1", 0.14] ] }] } });

<div id="graph33"></div>
				

Highcharts.chart('graph33', {
	chart: {
		type: 'column'
	},
	title: {
		text: 'Efficiency Optimization by Branch'
	},
	xAxis: {
		categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
	},
	yAxis: [{
		min: 0,
		title: {
			text: 'Employees'
		}
	},{
		title: {
			text: 'Profit (millions)'
		},
		opposite: true
	}],
	legend: {
		shadow: false
	},
	tooltip: {
		shared: true
	},
	plotOptions: {
		column: {
			grouping: false,
			shadow: false,
			borderWidth: 0
		}
	},
	series: [{
		name: 'Employees',
		color: 'rgba(165,170,217,1)',
		data: [150, 73, 20],
		pointPadding: 0.3,
		pointPlacement: -0.2
	},{
		name: 'Employees Optimized',
		color: 'rgba(126,86,134,.9)',
		data: [140, 90, 40],
		pointPadding: 0.4,
		pointPlacement: -0.2
	},{
		name: 'Profit',
		color: 'rgba(248,161,63,1)',
		data: [183.6, 178.8, 198.5],
		tooltip: {
			valuePrefix: '$',
			valueSuffix: ' M'
		},
		pointPadding: 0.3,
		pointPlacement: 0.2,
		yAxis: 1
	},{
		name: 'Profit Optimized',
		color: 'rgba(186,60,61,.9)',
		data: [203.6, 198.8, 208.5],
		tooltip: {
			valuePrefix: '$',
			valueSuffix: ' M'
		},
		pointPadding: 0.4,
		pointPlacement: 0.2,
		yAxis: 1
	}]
});
				
Jane John
Apples 3 4
Pears 2 0
Plums 5 11
Bananas 1 1
Oranges 2 4

<div id="graph34"></div>
				

Highcharts.chart('graph34', {
	data: {
		table: 'datatable'
	},
	chart: {
		type: 'column'
	},
	title: {
		text: 'Data extracted from a HTML table in the page'
	},
	yAxis: {
		allowDecimals: false,
		title: {
			text: 'Units'
		}
	},
	tooltip: {
		formatter: function () {
				return '' + this.series.name + '
' + this.point.y + ' ' + this.point.name.toLowerCase(); } } });

<div id="graph35"></div>
				

Highcharts.chart('graph35', {
	chart: {
		type: 'columnrange',
		inverted: true
	},
	title: {
		text: 'Temperature variation by month'
	},
	subtitle: {
		text: 'Observed in Vik i Sogn, Norway, 2017'
	},
	xAxis: {
		categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	},
	yAxis: {
		title: {
			text: 'Temperature ( °C )'
		}
	},
	tooltip: {
		valueSuffix: '°C'
	},
	plotOptions: {
		columnrange: {
			dataLabels: {
				enabled: true,
				format: '{y}°C'
			}
		}
	},
	legend: {
		enabled: false
	},
	series: [{
		name: 'Temperatures',
		data: [
			[-9.9, 10.3], [-8.6, 8.5], [-10.2, 11.8], [-1.7, 12.2], [-0.6, 23.1], [3.7, 25.4], [6.0, 26.2], [6.7, 21.4], [3.5, 19.5], [-1.3, 16.0], [-8.7, 9.4], [-9.0, 8.6]
		]
	}]
});
				

Pie charts


<div id="graph36"></div>
				

Highcharts.chart('graph36', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: 'Browser market shares in January, 2018'
	},
	tooltip: {
		pointFormat: '{series.name}: {point.percentage:.1f}%'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '{point.name}: {point.percentage:.1f} %',
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				}
			}
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		data: [{
			name: 'Chrome',
			y: 61.41,
			sliced: true,
			selected: true
		}, {
			name: 'Internet Explorer',
			y: 11.84
		}, {
			name: 'Firefox',
			y: 10.85
		}, {
			name: 'Edge',
			y: 4.67
		}, {
			name: 'Safari',
			y: 4.18
		}, {
			name: 'Sogou Explorer',
			y: 1.64
		}, {
			name: 'Opera',
			y: 1.6
		}, {
			name: 'QQ',
			y: 1.2
		}, {
			name: 'Other',
			y: 2.61
		}]
	}]
});
				

<div id="graph37"></div>
				

Highcharts.chart('graph37', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: 'Browser market shares in January, 2018'
	},
	tooltip: {
		pointFormat: '{series.name}: {point.percentage:.1f}%'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: false
			},
			showInLegend: true
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		data: [{
			name: 'Chrome',
			y: 61.41,
			sliced: true,
			selected: true
		}, {
			name: 'Internet Explorer',
			y: 11.84
		}, {
			name: 'Firefox',
			y: 10.85
		}, {
			name: 'Edge',
			y: 4.67
		}, {
			name: 'Safari',
			y: 4.18
		}, {
			name: 'Other',
			y: 7.05
		}]
	}]
});
				

<div id="graph38"></div>
				

var colors = Highcharts.getOptions().colors,
	categories = ["Chrome", "Firefox", "Internet Explorer", "Safari", "Edge", "Opera", "Other"],
	data = [{
		"y": 62.74,
		"color": colors[2],
		"drilldown": {
			"name": "Chrome",
			"categories": ["Chrome v65.0", "Chrome v64.0", "Chrome v63.0", "Chrome v62.0", "Chrome v61.0", "Chrome v60.0", "Chrome v59.0", "Chrome v58.0", "Chrome v57.0", "Chrome v56.0", "Chrome v55.0", "Chrome v54.0", "Chrome v51.0", "Chrome v49.0", "Chrome v48.0", "Chrome v47.0", "Chrome v43.0", "Chrome v29.0"],
			"data": [0.1, 1.3, 53.02, 1.4, 0.88, 0.56, 0.45, 0.49, 0.32, 0.29, 0.79, 0.18, 0.13, 2.16, 0.13, 0.11, 0.17, 0.26]
		}
	},{
		"y": 10.57,
		"color": colors[1],
		"drilldown": {
			"name": "Firefox",
			"categories": ["Firefox v58.0", "Firefox v57.0", "Firefox v56.0", "Firefox v55.0", "Firefox v54.0", "Firefox v52.0", "Firefox v51.0", "Firefox v50.0", "Firefox v48.0", "Firefox v47.0"],
			"data": [1.02, 7.36, 0.35, 0.11, 0.1, 0.95, 0.15, 0.1, 0.31, 0.12]
		}
	},{
		"y": 7.23,
		"color": colors[0],
		"drilldown": {
			"name": "Internet Explorer",
			"categories": ["Internet Explorer v11.0", "Internet Explorer v10.0", "Internet Explorer v9.0", "Internet Explorer v8.0"],
			"data": [6.2, 0.29, 0.27, 0.47]
		}
	},{
		"y": 5.58,
		"color": colors[3],
		"drilldown": {
			"name": "Safari",
			"categories": ["Safari v11.0", "Safari v10.1", "Safari v10.0", "Safari v9.1", "Safari v9.0", "Safari v5.1"],
			"data": [3.39, 0.96, 0.36, 0.54, 0.13, 0.2]
		}
	},{
		"y": 4.02,
		"color": colors[5],
		"drilldown": {
			"name": "Edge",
			"categories": ["Edge v16", "Edge v15", "Edge v14", "Edge v13"],
			"data": [2.6, 0.92, 0.4, 0.1]
		}
	},{
		"y": 1.92,
		"color": colors[4],
		"drilldown": {
			"name": "Opera",
			"categories": ["Opera v50.0", "Opera v49.0", "Opera v12.1"],
			"data": [0.96, 0.82, 0.14]
		}
	},{
		"y": 7.62,
		"color": colors[6],
		"drilldown": {
			"name": 'Other',
			"categories": ['Other'],
			"data": [7.62]
		}
	}],
	browserData = [],
	versionsData = [],
	i,
	j,
	dataLen = data.length,
	drillDataLen,
	brightness;

// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
	// add browser data
	browserData.push({
		name: categories[i],
		y: data[i].y,
		color: data[i].color
	});

	// add version data
	drillDataLen = data[i].drilldown.data.length;
	for (j = 0; j < drillDataLen; j += 1) {
		brightness = 0.2 - (j / drillDataLen) / 5;
		versionsData.push({
			name: data[i].drilldown.categories[j],
			y: data[i].drilldown.data[j],
			color: Highcharts.Color(data[i].color).brighten(brightness).get()
		});
	}
}

// Create the chart
Highcharts.chart('graph38', {
	chart: {
		type: 'pie'
	},
	title: {
		text: 'Browser market share, January, 2018'
	},
	subtitle: {
		text: 'Source: statcounter.com'
	},
	yAxis: {
		title: {
			text: 'Total percent market share'
		}
	},
	plotOptions: {
		pie: {
			shadow: false,
			center: ['50%', '50%']
		}
	},
	tooltip: {
		valueSuffix: '%'
	},
	series: [{
		name: 'Browsers',
		data: browserData,
		size: '60%',
		dataLabels: {
			formatter: function () {
				return this.y > 5 ? this.point.name : null;
			},
			color: '#ffffff',
			distance: -30
		}
	}, {
		name: 'Versions',
		data: versionsData,
		size: '80%',
		innerSize: '60%',
		dataLabels: {
			formatter: function () {
				// display only if larger than 1
				return this.y > 1 ? '' + this.point.name + ': ' +
						this.y + '%' : null;
			}
		},
		id: 'versions'
	}],
	responsive: {
		rules: [{
			condition: {
				maxWidth: 400
			},
			chartOptions: {
				series: [{
					id: 'versions',
					dataLabels: {
						enabled: false
					}
				}]
			}
		}]
	}
});
				

<div id="graph39"></div>
				

Highcharts.chart('graph39', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: 0,
		plotShadow: false
	},
	title: {
		text: 'Browser
shares
2017', align: 'center', verticalAlign: 'middle', y: 40 }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, plotOptions: { pie: { dataLabels: { enabled: true, distance: -50, style: { fontWeight: 'bold', color: 'white' } }, startAngle: -90, endAngle: 90, center: ['50%', '75%'] } }, series: [{ type: 'pie', name: 'Browser share', innerSize: '50%', data: [ ['Chrome', 58.9], ['Firefox', 13.29], ['Internet Explorer', 13], ['Edge', 3.78], ['Safari', 3.42], { name: 'Other', y: 7.61, dataLabels: { enabled: false } } ] }] });

<div id="graph40"></div>
				

Highcharts.chart('graph40', {
	chart: {
		type: 'pie'
	},
	title: {
		text: 'Browser market shares. January, 2018'
	},
	subtitle: {
		text: 'Click the slices to view versions. Source: statcounter.com'
	},
	plotOptions: {
		series: {
			dataLabels: {
				enabled: true,
				format: '{point.name}: {point.y:.1f}%'
			}
		}
	},
	tooltip: {
		headerFormat: '{series.name}
', pointFormat: '{point.name}: {point.y:.2f}% of total
' }, "series": [{ "name": "Browsers", "colorByPoint": true, "data": [{ "name": "Chrome", "y": 62.74, "drilldown": "Chrome" },{ "name": "Firefox", "y": 10.57, "drilldown": "Firefox" },{ "name": "Internet Explorer", "y": 7.23, "drilldown": "Internet Explorer" },{ "name": "Safari", "y": 5.58, "drilldown": "Safari" },{ "name": "Edge", "y": 4.02, "drilldown": "Edge" },{ "name": "Opera", "y": 1.92, "drilldown": "Opera" },{ "name": "Other", "y": 7.62, "drilldown": null }] }], "drilldown": { "series": [{ "name": "Chrome", "id": "Chrome", "data": [ ["v65.0", 0.1], ["v64.0", 1.3], ["v63.0", 53.02], ["v62.0", 1.4], ["v61.0", 0.88], ["v60.0", 0.56], ["v59.0", 0.45], ["v58.0", 0.49], ["v57.0", 0.32], ["v56.0", 0.29], ["v55.0", 0.79], ["v54.0", 0.18], ["v51.0", 0.13], ["v49.0", 2.16], ["v48.0", 0.13], ["v47.0", 0.11], ["v43.0", 0.17], ["v29.0", 0.26] ] },{ "name": "Firefox", "id": "Firefox", "data": [ ["v58.0", 1.02], ["v57.0", 7.36], ["v56.0", 0.35], ["v55.0", 0.11], ["v54.0", 0.1], ["v52.0", 0.95], ["v51.0", 0.15], ["v50.0", 0.1], ["v48.0", 0.31], ["v47.0", 0.12] ] },{ "name": "Internet Explorer", "id": "Internet Explorer", "data": [ ["v11.0", 6.2], ["v10.0", 0.29], ["v9.0", 0.27], ["v8.0", 0.47] ] },{ "name": "Safari", "id": "Safari", "data": [ ["v11.0", 3.39], ["v10.1", 0.96], ["v10.0", 0.36], ["v9.1", 0.54], ["v9.0", 0.13], ["v5.1", 0.2] ] },{ "name": "Edge", "id": "Edge", "data": [ ["v16", 2.6], ["v15", 0.92], ["v14", 0.4], ["v13", 0.1] ] },{ "name": "Opera", "id": "Opera", "data": [ ["v50.0", 0.96], ["v49.0", 0.82], ["v12.1", 0.14] ] }] } });

<div id="graph41"></div>
				

Highcharts.setOptions({
	colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
		return {
			radialGradient: {
				cx: 0.5,
				cy: 0.3,
				r: 0.7
			},
			stops: [
				[0, color],
				[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
			]
		};
	})
});
// Build the chart
Highcharts.chart('graph41', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: 'Browser market shares in January, 2018'
	},
	tooltip: {
		pointFormat: '{series.name}: {point.percentage:.1f}%'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '{point.name}: {point.percentage:.1f} %',
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				},
				connectorColor: 'silver'
			}
		}
	},
	series: [{
		name: 'Share',
		data: [
			{ name: 'Chrome', y: 61.41 },
			{ name: 'Internet Explorer', y: 11.84 },
			{ name: 'Firefox', y: 10.85 },
			{ name: 'Edge', y: 4.67 },
			{ name: 'Safari', y: 4.18 },
			{ name: 'Other', y: 7.05 }
		]
	}]
});
				

<div id="graph42"></div>
				

// Make monochrome colors
var pieColors = (function () {
	var colors = [],
		base = Highcharts.getOptions().colors[0],
		i;
	for (i = 0; i < 10; i += 1) {
		// Start out with a darkened base color (negative brighten), and end
		// up with a much brighter color
		colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
	}
	return colors;
}());
// Build the chart
Highcharts.chart('graph42', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: 'Browser market shares at a specific website, 2014'
	},
	tooltip: {
		pointFormat: '{series.name}: {point.percentage:.1f}%'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			colors: pieColors,
			dataLabels: {
				enabled: true,
				format: '{point.name}
{point.percentage:.1f} %', distance: -50, filter: { property: 'percentage', operator: '>', value: 4 } } } }, series: [{ name: 'Share', data: [ { name: 'Chrome', y: 61.41 }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }, { name: 'Other', y: 7.05 } ] }] });

Scatter and bubble charts


<div id="graph43"></div>
				

Highcharts.chart('graph43', {
	chart: {
		type: 'scatter',
		zoomType: 'xy'
	},
	title: {
		text: 'Height Versus Weight of 507 Individuals by Gender'
	},
	subtitle: {
		text: 'Source: Heinz  2003'
	},
	xAxis: {
		title: {
			enabled: true,
			text: 'Height (cm)'
		},
		startOnTick: true,
		endOnTick: true,
		showLastLabel: true
	},
	yAxis: {
		title: {
			text: 'Weight (kg)'
		}
	},
	legend: {
		layout: 'vertical',
		align: 'left',
		verticalAlign: 'top',
		x: 100,
		y: 70,
		floating: true,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
		borderWidth: 1
	},
	plotOptions: {
		scatter: {
			marker: {
				radius: 5,
				states: {
					hover: {
						enabled: true,
						lineColor: 'rgb(100,100,100)'
					}
				}
			},
			states: {
				hover: {
					marker: {
						enabled: false
					}
				}
			},
			tooltip: {
				headerFormat: '{series.name}
', pointFormat: '{point.x} cm, {point.y} kg' } } }, series: [{ name: 'Female', color: 'rgba(223, 83, 83, .5)', data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8], [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8], [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0], [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8], [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6], [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3], [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8], [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3], [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3], [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0], [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7], [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5], [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2], [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8], [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9], [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2], [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4], [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4], [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2], [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0], [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0], [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4], [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4], [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5], [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5], [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2], [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2], [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3], [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5], [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4], [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6], [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8], [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1], [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5], [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2], [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6], [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0], [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0], [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9], [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1], [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4], [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7], [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5], [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8], [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0], [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9], [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6], [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8], [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]] }, { name: 'Male', color: 'rgba(119, 152, 191, .5)', data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6], [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0], [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9], [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8], [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9], [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1], [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1], [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6], [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1], [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2], [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2], [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0], [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2], [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2], [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9], [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9], [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0], [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3], [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7], [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5], [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3], [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1], [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0], [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2], [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1], [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6], [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1], [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5], [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1], [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5], [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5], [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9], [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1], [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8], [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5], [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4], [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5], [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6], [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7], [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5], [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6], [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7], [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0], [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3], [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3], [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9], [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1], [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1], [180.3, 83.2], [180.3, 83.2]] }] });

<div id="graph44"></div>
				

var data = [],
	n = 1000000,
	i;
for (i = 0; i < n; i += 1) {
	data.push([
		Math.pow(Math.random(), 2) * 100,
		Math.pow(Math.random(), 2) * 100
	]);
}
if (!Highcharts.Series.prototype.renderCanvas) {
	throw 'Module not loaded';
}
console.time('scatter');
Highcharts.chart('graph44', {
	chart: {
		zoomType: 'xy',
		height: '100%'
	},
	boost: {
		useGPUTranslations: true,
		usePreAllocated: true
	},
	xAxis: {
		min: 0,
		max: 100,
		gridLineWidth: 1
	},
	yAxis: {
		// Renders faster when we don't have to compute min and max
		min: 0,
		max: 100,
		minPadding: 0,
		maxPadding: 0,
		title: {
			text: null
		}
	},
	title: {
		text: 'Scatter chart with 1 million points'
	},
	legend: {
		enabled: false
	},
	series: [{
		type: 'scatter',
		color: 'rgba(152,0,67,0.1)',
		data: data,
		marker: {
			radius: 0.1
		},
		tooltip: {
			followPointer: false,
			pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
		}
	}]
});
console.timeEnd('scatter');
				

<div id="graph45"></div>
				

Highcharts.chart('graph45', {
	chart: {
		type: 'bubble',
		plotBorderWidth: 1,
		zoomType: 'xy'
	},
	legend: {
		enabled: false
	},
	title: {
		text: 'Sugar and fat intake per country'
	},
	subtitle: {
		text: 'Source: Euromonitor and OECD'
	},
	xAxis: {
		gridLineWidth: 1,
		title: {
			text: 'Daily fat intake'
		},
		labels: {
			format: '{value} gr'
		},
		plotLines: [{
			color: 'black',
			dashStyle: 'dot',
			width: 2,
			value: 65,
			label: {
				rotation: 0,
				y: 15,
				style: {
					fontStyle: 'italic'
				},
				text: 'Safe fat intake 65g/day'
			},
			zIndex: 3
		}]
	},
	yAxis: {
		startOnTick: false,
		endOnTick: false,
		title: {
			text: 'Daily sugar intake'
		},
		labels: {
			format: '{value} gr'
		},
		maxPadding: 0.2,
		plotLines: [{
			color: 'black',
			dashStyle: 'dot',
			width: 2,
			value: 50,
			label: {
				align: 'right',
				style: {
					fontStyle: 'italic'
				},
				text: 'Safe sugar intake 50g/day',
				x: -10
			},
			zIndex: 3
		}]
	},
	tooltip: {
		useHTML: true,
		headerFormat: '',
		pointFormat: '' +
			'' +
			'' +
			'',
		footerFormat: '

{point.country}

Fat intake:{point.x}g
Sugar intake:{point.y}g
Obesity (adults):{point.z}%
', followPointer: true }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.name}' } } }, series: [{ data: [ { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' }, { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' }, { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' }, { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' }, { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' }, { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' }, { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' }, { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' }, { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' }, { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' }, { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' }, { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' }, { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' }, { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' }, { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' } ] }] });

<div id="graph46"></div>
				

Highcharts.chart('graph46', {
	chart: {
		type: 'bubble',
		plotBorderWidth: 1,
		zoomType: 'xy'
	},
	title: {
		text: 'Highcharts bubbles with radial gradient fill'
	},
	xAxis: {
		gridLineWidth: 1
	},
	yAxis: {
		startOnTick: false,
		endOnTick: false
	},
	series: [{
		data: [
			[9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14], [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70], [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63], [93, 23, 23], [44, 83, 22]
		],
		marker: {
			fillColor: {
				radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
				stops: [
					[0, 'rgba(255,255,255,0.5)'],
					[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
				]
			}
		}
	}, {
		data: [
			[42, 38, 20], [6, 18, 1], [1, 93, 55], [57, 2, 90], [80, 76, 22], [11, 74, 96], [88, 56, 10], [30, 47, 49], [57, 62, 98], [4, 16, 16], [46, 10, 11], [22, 87, 89], [57, 91, 82], [45, 15, 98]
		],
		marker: {
			fillColor: {
				radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
				stops: [
					[0, 'rgba(255,255,255,0.5)'],
					[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
				]
			}
		}
	}]
});
				

Combinations


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

Styled mode (CSS styling)


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

Dynamic charts


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

3D charts


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

Gauges


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

Heat and tree maps


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

More chart types


<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>
				

				

<div id="graph23"></div>