Pick an example on the left and combine it with a preset theme in the top menu. Click "View options" to inspect the code.
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
ignoreHiddenSeries: false
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)'
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)'
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)'
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)'
}]
},
labels: {
items: [{
// To do:
// Make a common labels layer and combine it with credits and titles?
// Use the Layer object and add a method for drawing HTML.
// Make balloons and make usable for individual dataLabels
html: 'Light air',
style: {
left: '10px',
top: '250px'
}
}, {
html: 'Light breeze',
style: {
left: '10px',
top: '220px'
}
}, {
html: 'Moderate breeze',
style: {
left: '10px',
top: '180px'
}
}, {
html: 'Fresh breeze',
style: {
left: '10px',
top: '135px'
}
}, {
html: 'Strong breeze',
style: {
left: '10px',
top: '90px'
}
}, {
html: 'High wind',
style: {
left: '10px',
top: '35px'
}
}]
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y +' m/s';
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0]
}, {
name: 'Voll',
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 4.3, 6.8, 6.0, 7.0, 6.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
}]
});
});