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