Highcharts Demo Gallery

« Go to the Highcharts home page

Pick an example on the left and combine it with a preset theme in the top menu. Click "View options" to inspect the code.

Line and scatter charts

Area charts

Column and bar charts

Pie charts

Dynamic charts

Combinations




View options
var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			type: 'spline'
		},
		title: {
			text: 'Snow depth in the Vikjafjellet mountain, Norway'
		},
		subtitle: {
			text: 'An example of irregular time data in Highcharts JS'
		},
		xAxis: {
			type: 'datetime',
			dateTimeLabelFormats: { // don't display the dummy year
				month: '%e. %b',
				year: '%b'
			}
		},
		yAxis: {
			title: {
				text: 'Snow depth (m)'
			},
			min: 0
		},
		tooltip: {
			formatter: function() {
					return '<b>'+ this.series.name +'</b><br/>'+
					Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
			}
		},
		
		series: [{
			name: 'Winter 2007-2008',
			// 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.
			data: [
				[Date.UTC(1970,  9, 27), 0   ],
				[Date.UTC(1970, 10, 10), 0.6 ],
				[Date.UTC(1970, 10, 18), 0.7 ],
				[Date.UTC(1970, 11,  2), 0.8 ],
				[Date.UTC(1970, 11,  9), 0.6 ],
				[Date.UTC(1970, 11, 16), 0.6 ],
				[Date.UTC(1970, 11, 28), 0.67],
				[Date.UTC(1971,  0,  1), 0.81],
				[Date.UTC(1971,  0,  8), 0.78],
				[Date.UTC(1971,  0, 12), 0.98],
				[Date.UTC(1971,  0, 27), 1.84],
				[Date.UTC(1971,  1, 10), 1.80],
				[Date.UTC(1971,  1, 18), 1.80],
				[Date.UTC(1971,  1, 24), 1.92],
				[Date.UTC(1971,  2,  4), 2.49],
				[Date.UTC(1971,  2, 11), 2.79],
				[Date.UTC(1971,  2, 15), 2.73],
				[Date.UTC(1971,  2, 25), 2.61],
				[Date.UTC(1971,  3,  2), 2.76],
				[Date.UTC(1971,  3,  6), 2.82],
				[Date.UTC(1971,  3, 13), 2.8 ],
				[Date.UTC(1971,  4,  3), 2.1 ],
				[Date.UTC(1971,  4, 26), 1.1 ],
				[Date.UTC(1971,  5,  9), 0.25],
				[Date.UTC(1971,  5, 12), 0   ]
			]
		}, {
			name: 'Winter 2008-2009',
			data: [
				[Date.UTC(1970,  9, 18), 0   ],
				[Date.UTC(1970,  9, 26), 0.2 ],
				[Date.UTC(1970, 11,  1), 0.47],
				[Date.UTC(1970, 11, 11), 0.55],
				[Date.UTC(1970, 11, 25), 1.38],
				[Date.UTC(1971,  0,  8), 1.38],
				[Date.UTC(1971,  0, 15), 1.38],
				[Date.UTC(1971,  1,  1), 1.38],
				[Date.UTC(1971,  1,  8), 1.48],
				[Date.UTC(1971,  1, 21), 1.5 ],
				[Date.UTC(1971,  2, 12), 1.89],
				[Date.UTC(1971,  2, 25), 2.0 ],
				[Date.UTC(1971,  3,  4), 1.94],
				[Date.UTC(1971,  3,  9), 1.91],
				[Date.UTC(1971,  3, 13), 1.75],
				[Date.UTC(1971,  3, 19), 1.6 ],
				[Date.UTC(1971,  4, 25), 0.6 ],
				[Date.UTC(1971,  4, 31), 0.35],
				[Date.UTC(1971,  5,  7), 0   ]
			]
		}, {
			name: 'Winter 2009-2010',
			data: [
				[Date.UTC(1970,  9,  9), 0   ],
				[Date.UTC(1970,  9, 14), 0.15],
				[Date.UTC(1970, 10, 28), 0.35],
				[Date.UTC(1970, 11, 12), 0.46],
				[Date.UTC(1971,  0,  1), 0.59],
				[Date.UTC(1971,  0, 24), 0.58],
				[Date.UTC(1971,  1,  1), 0.62],
				[Date.UTC(1971,  1,  7), 0.65],
				[Date.UTC(1971,  1, 23), 0.77],
				[Date.UTC(1971,  2,  8), 0.77],
				[Date.UTC(1971,  2, 14), 0.79],
				[Date.UTC(1971,  2, 24), 0.86],
				[Date.UTC(1971,  3,  4), 0.8 ],
				[Date.UTC(1971,  3, 18), 0.94],
				[Date.UTC(1971,  3, 24), 0.9 ],
				[Date.UTC(1971,  4, 16), 0.39],
				[Date.UTC(1971,  4, 21), 0   ]
			]
		}]
	});
});
Edit in jsFiddle « Previous Next »