Highcharts - 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');