Highcharts - column and bar charts
<div id="graph1"></div>
Highcharts.chart('graph1', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
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]
}]
});
<div id="graph2"></div>
Highcharts.chart('graph2', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<div id="graph3"></div>
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19', '20-24', '25-29', '30-34', '35-39', '40-44', '45-49', '50-54', '55-59', '60-64', '65-69', '70-74', '75-79', '80-84', '85-89', '90-94', '95-99', '100 + '];
Highcharts.chart('graph3', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2018'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, { // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '' + this.series.name + ', age ' + this.point.category + '
' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.1, -2.2, -2.4, -2.7, -3.0, -3.3, -3.2, -2.9, -3.5, -4.4, -4.1, -3.4, -2.7, -2.3, -2.2, -1.6, -0.6, -0.3, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.1, 2.3, 2.6, 2.9, 3.2, 3.1, 2.9, 3.4, 4.3, 4.0, 3.5, 2.9, 2.5, 2.7, 2.2, 1.1, 0.6, 0.2, 0.0]
}]
});
<div id="graph4"></div>
Highcharts.chart('graph4', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '{point.key}',
pointFormat: '{series.name}: ' +
'{point.y:.1f} mm
',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
<div id="graph5"></div>
Highcharts.chart('graph5', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
<div id="graph6"></div>
Highcharts.chart('graph6', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '{point.x}
',
pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<div id="graph7"></div>
Highcharts.chart('graph7', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '' + this.x + '
' +
this.series.name + ': ' + this.y + '
' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
<div id="graph8"></div>
Highcharts.chart('graph8', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '{series.name}: {point.y} ({point.percentage:.0f}%)
',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<div id="graph9"></div>
Highcharts.chart('graph9', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2017'
},
subtitle: {
text: 'Source: Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2017: {point.y:.1f} millions'
},
series: [{
name: 'Population',
data: [
['Shanghai', 24.2], ['Beijing', 20.8], ['Karachi', 14.9], ['Shenzhen', 13.7], ['Guangzhou', 13.1], ['Istanbul', 12.7], ['Mumbai', 12.4], ['Moscow', 12.2], ['São Paulo', 12.0], ['Delhi', 11.7], ['Kinshasa', 11.5], ['Tianjin', 11.2], ['Lahore', 11.1], ['Jakarta', 10.6], ['Dongguan', 10.6], ['Lagos', 10.6], ['Bengaluru', 10.3], ['Seoul', 9.8], ['Foshan', 9.3], ['Tokyo', 9.3]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
<div id="graph10"></div>
Highcharts.chart('graph10', {
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the columns to view versions. Source: statcounter.com'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '{series.name}
',
pointFormat: '{point.name}: {point.y:.2f}% of total
'
},
"series": [{
"name": "Browsers",
"colorByPoint": true,
"data": [{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome"
},{
"name": "Firefox",
"y": 10.57,
"drilldown": "Firefox"
},{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
},{
"name": "Safari",
"y": 5.58,
"drilldown": "Safari"
},{
"name": "Edge",
"y": 4.02,
"drilldown": "Edge"
},{
"name": "Opera",
"y": 1.92,
"drilldown": "Opera"
},{
"name": "Other",
"y": 7.62,
"drilldown": null
}]
}],
"drilldown": {
"series": [{
"name": "Chrome",
"id": "Chrome",
"data": [
["v65.0", 0.1], ["v64.0", 1.3], ["v63.0", 53.02], ["v62.0", 1.4], ["v61.0", 0.88], ["v60.0", 0.56], ["v59.0", 0.45], ["v58.0", 0.49], ["v57.0", 0.32], ["v56.0", 0.29], ["v55.0", 0.79], ["v54.0", 0.18], ["v51.0", 0.13], ["v49.0", 2.16], ["v48.0", 0.13], ["v47.0", 0.11], ["v43.0", 0.17], ["v29.0", 0.26]
]
},{
"name": "Firefox",
"id": "Firefox",
"data": [
["v58.0", 1.02], ["v57.0", 7.36], ["v56.0", 0.35], ["v55.0", 0.11], ["v54.0", 0.1], ["v52.0", 0.95], ["v51.0", 0.15], ["v50.0", 0.1], ["v48.0", 0.31], ["v47.0", 0.12]
]
},{
"name": "Internet Explorer",
"id": "Internet Explorer",
"data": [
["v11.0", 6.2], ["v10.0", 0.29], ["v9.0", 0.27], ["v8.0", 0.47]
]
},{
"name": "Safari",
"id": "Safari",
"data": [
["v11.0", 3.39], ["v10.1", 0.96], ["v10.0", 0.36], ["v9.1", 0.54], ["v9.0", 0.13], ["v5.1", 0.2]
]
},{
"name": "Edge",
"id": "Edge",
"data": [
["v16", 2.6], ["v15", 0.92], ["v14", 0.4], ["v13", 0.1]
]
},{
"name": "Opera",
"id": "Opera",
"data": [
["v50.0", 0.96], ["v49.0", 0.82], ["v12.1", 0.14]
]
}]
}
});
<div id="graph11"></div>
Highcharts.chart('graph11', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
},{
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
},{
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
},{
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
},{
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
| Jane | John | |
|---|---|---|
| Apples | 3 | 4 |
| Pears | 2 | 0 |
| Plums | 5 | 11 |
| Bananas | 1 | 1 |
| Oranges | 2 | 4 |
<div id="graph12"></div>
Highcharts.chart('graph12', {
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '' + this.series.name + '
' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
<div id="graph13"></div>
Highcharts.chart('graph13', {
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2017'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
format: '{y}°C'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3], [-8.6, 8.5], [-10.2, 11.8], [-1.7, 12.2], [-0.6, 23.1], [3.7, 25.4], [6.0, 26.2], [6.7, 21.4], [3.5, 19.5], [-1.3, 16.0], [-8.7, 9.4], [-9.0, 8.6]
]
}]
});