Highcharts - pie charts
<div id="graph1"></div>
Highcharts.chart('graph1', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
<div id="graph2"></div>
Highcharts.chart('graph2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
<div id="graph3"></div>
var colors = Highcharts.getOptions().colors,
categories = ["Chrome", "Firefox", "Internet Explorer", "Safari", "Edge", "Opera", "Other"],
data = [{
"y": 62.74,
"color": colors[2],
"drilldown": {
"name": "Chrome",
"categories": ["Chrome v65.0", "Chrome v64.0", "Chrome v63.0", "Chrome v62.0", "Chrome v61.0", "Chrome v60.0", "Chrome v59.0", "Chrome v58.0", "Chrome v57.0", "Chrome v56.0", "Chrome v55.0", "Chrome v54.0", "Chrome v51.0", "Chrome v49.0", "Chrome v48.0", "Chrome v47.0", "Chrome v43.0", "Chrome v29.0"],
"data": [0.1, 1.3, 53.02, 1.4, 0.88, 0.56, 0.45, 0.49, 0.32, 0.29, 0.79, 0.18, 0.13, 2.16, 0.13, 0.11, 0.17, 0.26]
}
},{
"y": 10.57,
"color": colors[1],
"drilldown": {
"name": "Firefox",
"categories": ["Firefox v58.0", "Firefox v57.0", "Firefox v56.0", "Firefox v55.0", "Firefox v54.0", "Firefox v52.0", "Firefox v51.0", "Firefox v50.0", "Firefox v48.0", "Firefox v47.0"],
"data": [1.02, 7.36, 0.35, 0.11, 0.1, 0.95, 0.15, 0.1, 0.31, 0.12]
}
},{
"y": 7.23,
"color": colors[0],
"drilldown": {
"name": "Internet Explorer",
"categories": ["Internet Explorer v11.0", "Internet Explorer v10.0", "Internet Explorer v9.0", "Internet Explorer v8.0"],
"data": [6.2, 0.29, 0.27, 0.47]
}
},{
"y": 5.58,
"color": colors[3],
"drilldown": {
"name": "Safari",
"categories": ["Safari v11.0", "Safari v10.1", "Safari v10.0", "Safari v9.1", "Safari v9.0", "Safari v5.1"],
"data": [3.39, 0.96, 0.36, 0.54, 0.13, 0.2]
}
},{
"y": 4.02,
"color": colors[5],
"drilldown": {
"name": "Edge",
"categories": ["Edge v16", "Edge v15", "Edge v14", "Edge v13"],
"data": [2.6, 0.92, 0.4, 0.1]
}
},{
"y": 1.92,
"color": colors[4],
"drilldown": {
"name": "Opera",
"categories": ["Opera v50.0", "Opera v49.0", "Opera v12.1"],
"data": [0.96, 0.82, 0.14]
}
},{
"y": 7.62,
"color": colors[6],
"drilldown": {
"name": 'Other',
"categories": ['Other'],
"data": [7.62]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
Highcharts.chart('graph3', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2018'
},
subtitle: {
text: 'Source: statcounter.com'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '' + this.point.name + ': ' +
this.y + '%' : null;
}
},
id: 'versions'
}],
responsive: {
rules: [{
condition: {
maxWidth: 400
},
chartOptions: {
series: [{
id: 'versions',
dataLabels: {
enabled: false
}
}]
}
}]
}
});
<div id="graph4"></div>
Highcharts.chart('graph4', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser
shares
2017',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Chrome', 58.9],
['Firefox', 13.29],
['Internet Explorer', 13],
['Edge', 3.78],
['Safari', 3.42],
{
name: 'Other',
y: 7.61,
dataLabels: {
enabled: false
}
}
]
}]
});
<div id="graph5"></div>
Highcharts.chart('graph5', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the slices to view versions. Source: statcounter.com'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {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="graph6"></div>
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
]
};
})
});
// Build the chart
Highcharts.chart('graph6', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
name: 'Share',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Internet Explorer', y: 11.84 },
{ name: 'Firefox', y: 10.85 },
{ name: 'Edge', y: 4.67 },
{ name: 'Safari', y: 4.18 },
{ name: 'Other', y: 7.05 }
]
}]
});
<div id="graph7"></div>
// Make monochrome colors
var pieColors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
// Build the chart
Highcharts.chart('graph7', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
colors: pieColors,
dataLabels: {
enabled: true,
format: '{point.name}
{point.percentage:.1f} %',
distance: -50,
filter: {
property: 'percentage',
operator: '>',
value: 4
}
}
}
},
series: [{
name: 'Share',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Internet Explorer', y: 11.84 },
{ name: 'Firefox', y: 10.85 },
{ name: 'Edge', y: 4.67 },
{ name: 'Safari', y: 4.18 },
{ name: 'Other', y: 7.05 }
]
}]
});
<div id="graph8"></div>
Highcharts.chart('graph8', {
chart: {type: 'variablepie'},
title: {text: 'Countries compared by population density and total area.'},
tooltip: {
headerFormat: '',
pointFormat: '\u25CF {point.name}
' +
'Area (square km): {point.y}
' +
'Population density (people per square km): {point.z}
'
},
series: [{
minPointSize: 10,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: [{
name: 'Spain',
y: 505370,
z: 92.9
}, {
name: 'France',
y: 551500,
z: 118.7
}, {
name: 'Poland',
y: 312685,
z: 124.6
}, {
name: 'Czech Republic',
y: 78867,
z: 137.5
}, {
name: 'Italy',
y: 301340,
z: 201.8
}, {
name: 'Switzerland',
y: 41277,
z: 214.5
}, {
name: 'Germany',
y: 357022,
z: 235.6
}]
}]
});