Highcharts Demo

author(s): Torstein Hønsi

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" class="QASDE1234"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

.QASDE1234 tspan {
	fill:red;
}

.QASDE1234 .highcharts-anchor{
	fill: blue;
}

JavaScript

Highcharts.chart('container', {
						chart: {
							type: 'bar'
						},
						title: {
							text: 'Historic World Population by Region'
						},
						subtitle: {
							text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
						},
						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]
						}]
					});