Highcharts reference: Chart Types
I recently began using a powerful JavaScript charting library called Highcharts, and while the docs and API reference on their developer page are extensive, one thing I found I was missing was a quick reference to each of the chart types, and the type of data they expect.
Whether or not you are building your charts in Javascript, or using the Gem version of the library, the syntax remains the same. The chart type can be declared in the ‘chart’ option in your chart object:
chart: {
type: 'area'
}There are many chart types, and in the docs, it’s difficult to quickly look through all the options and decide which is best for your needs, so I compiled a quick list of these for myself, and I decided to share it here! Let’s dive in:
- ‘area’
The area chart is helpful for visualizing sets of volumes, and expects series data in the form of arrays of numbers:
series: [{
name: 'Data 1',
data: [6, 11, 32, 110, 235]
}, {
name: 'Data 2',
data: [5, 25, 50, 120, 150]
}]2. ‘arearange’
Area Range is great for visualizing two values whose difference changes over time, such as temperature. For the data points, it expects to receive an array of arrays that each have a UTC timecode, datapoint 1, and datapoint 2:
series: [{
name: 'Datapoints',
data: [
[1483232400000, 1.4, 4.7],
[1483318800000, -1.3, 1.9],
[1483405200000, -0.7, 4.3]
]
}3. ‘areaspline’
Similar to the area chart, the areaspline by default displays the data points in its series, and smooths out the connecting lines to make the display more visually pleasing. It expects the same data as an areachart, and in this example, the x-axis is set explicitly with the days of the week. The data in each series should match the number of items in the categories array.
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]4. ‘bar’
A traditional bar chart makes it easy to visualize sets of similar data over different years, for example. In this case, the xAxis options correlate to to the data in each series.
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
},
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]
}]5. ‘bellcurve’
The bellcurve will automatically extrapolate and overlay a bell chart based on an array of numbers as a series. The object should be set up with two axis titles, one for the bell curve series and one for the scatter plot series.
xAxis: [{
title: {
text: 'Data'
},
alignTicks: false
}, {
title: {
text: 'Bell curve'
},
alignTicks: false,
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: [3.5, 3, 3.2, 3.1, 3.6]
}]6. ‘boxplot’
The boxplot chart is great for organizing observational data into individual sets, such as experiments. Each dataset outputs 5 points to create the box dimensions:
- Maximum
- Upper Quartile
- Median
- Lower Quartile
- Minimum
A second series could be created for outlier data outside the standard dataset.
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
series: [
{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
]
},{
name: 'Outliers',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
]
}
]7. ‘bubble’
The bubble chart is great at simply showing 3 dimensional data without rendering 3d images. We also see how the data objects passed in to the series can be referenced in the rest of the chart object with {}. In this example, the tooltip (info shown when hovering over a point in the graph) uses the info from the data object.
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat:
'<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France'}
]
}]
8. ‘bullet’
Great for comparing a value to a target value. This example shows three separate charts being rendered, each with their own data and targets. With the y-axis plotBands option, we can set ranges on the charts as well.
yAxis: {
plotBands: [{
from: 0,
to: 1400,
color: '#666'
}, {
from: 1400,
to: 2000,
color: '#999'
}, {
from: 2000,
to: 9e9,
color: '#bbb'
}]
},
series: [{
data: [{
y: 1650,
target: 2100
}]
}]9. ‘column’
The basic column chart is great for comparing sets of data over several categories. You can set the categories in the x-axis options, and the data series need a name and an array of numbers to plot over each category.
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
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]
}]10. ‘columnpyramid’
Similar to the column chart, but shows the data as pyramids. This example has some custom colors set and the datapoints labelled in the series object.
colors: ['#C79D6D', '#B5927B', '#CE9B84', '#B7A58C', '#C7A58C'],
series: [{
name: 'Height',
colorByPoint: true,
data: [
['Pyramid of Khufu', 138.8],
['Pyramid of Khafre', 136.4],
['Red Pyramid', 104],
['Bent Pyramid', 101.1],
['Pyramid of the Sun', 75]
]
}]11. ‘columnrange’
The column range chart is great for showing the range between 2 data points over a few categories, like the months of the year. The series data consists of an array of arrays that have 2 data points each to build the range.
xAxis: {
categories: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
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]
]
}]12. ‘cylinder’
Similar to a column chart, the 3d cylinder chart visualizes datapoints over categories in colored cylinders. The series only needs an array of numbers as a dataset.
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: 'Cylinders',
}]13. ‘dependencywheel’
The dependency wheel displays weighted relationships between several datapoints. This display is interesting and interactive, and deceptively simple to set up. We set up a series with a key property, and feed it an array of ‘to’, ‘from’, and ‘weight’ datapoints
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['USA', 'England', 5],
['Portugal', 'Angola', 2],
['France', 'South Africa', 1],
['Spain', 'Senegal', 1],
['Japan', 'Brazil', 1]
],
type: 'dependencywheel',
name: 'Dependency wheel series'
}]14. ‘dumbbell’
A basic dumbbell chart is great for visualizing a minimum and maximum value over several categories. The series only requires an array of arrays that contain a category name, a min value and a max value.
series: [{
name: 'Life expectancy change',
data: [
{
name: 'Austria',
low: 69,
high: 82
}, {
name: 'Belgium',
low: 70,
high: 81
}, {
name: 'Bulgaria',
low: 69,
high: 75
}
]
}]15. ‘errorbar’
Error bars are a great way to display uncertainty in data, by the margin of error shown. This example also shows how we can mix chart types by series and over lay them. Here we have a column chart and a spline chart, along with their error bars explicitly defined in their own series.
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
series: [
{
name: 'Rainfall',
type: 'column',
yAxis: 1,
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: 'Rainfall error',
type: 'errorbar',
yAxis: 1,
data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]]
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
}, {
name: 'Temperature error',
type: 'errorbar',
data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
}
}]16. ‘funnel’
The funnel can make bottlenecks in data very clear, and can be adjusted using the plotOptions setting. This setting sets master parameters for all series of a chart.
plotOptions: {
series: {
center: ['40%', '50%'],
neckWidth: '30%',
neckHeight: '25%',
width: '80%'
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}],Setting the chart type to ‘funnel3d’ converts the chart to a 3d representation:
17. ‘guage’
The gauge chart is highly customizable, so I won’t dive too deep in to the details, however, the data that sets the needle position can be dynamically updated with javascript. Below is an example of a random value being set to the gauge every few seconds.
series: [{
name: 'Speed',
data: [80],
}]
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20); newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
We also have the 'solidgauge' chart type, that displays a different style of gauge.
18. ‘heatmap’
The heatmap chart uses color ranges to visualize data over categories. We can set up the axes with arrays of strings holding the category names, and give it a dataset with an array of arrays with an x-axis value, a y-axis value, and a datapoint for the cell.
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
},
series: [{
name: 'Sales per employee',
data: [
[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]
]
}]19. ‘histogram’
The histogram chart can take in a dataset and automatically generate a histogram from the data. In this example, we can also see a scatter plot of the same data.
series: [{
name: 'Histogram',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4],
id: 's1',
marker: {
radius: 1.5
}
}]20. ‘item’
The Item chart is a powerful entry, with lots of possible customization. This ‘Parliament’ version is used to show the breakdown of chairs in German Parliament, which you’ll notice has more parties than 2.
legend: {
labelFormat: '{name} <span style="opacity: 0.4">{y}</span>'
},
series: [{
name: 'Representatives',
keys: ['name', 'y', 'color', 'label'],
data: [
['The Left', 69, '#BE3075', 'DIE LINKE'],
['Social Democratic Party', 153, '#EB001F', 'SPD'],
['Alliance 90/The Greens', 67, '#64A12D', 'GRÜNE'],
['Free Democratic Party', 80, '#FFED00', 'FDP'],
['Christian Democratic Union', 200, '#000000', 'CDU'],
['Christian Social Union in Bavaria', 46, '#008AC5', 'CSU'],
['Alternative for Germany', 94, '#009EE0', 'AfD']
],
dataLabels: {
enabled: true,
format: '{point.label}'
},
center: ['50%', '88%'],
size: '170%',
startAngle: -100,
endAngle: 100
}]Leaving off the center, size, startAngle and sendAngle properties will display a rectangular item chart.
Infographics can also be quickly made using the item chart using a simplified series.
series: [{
name: 'Representatives',
layout: 'horizontal',
data: [{
name: 'Male',
y: 43,
marker: {
symbol: // fill in a URL
},
color: '#2D5FF3'
}, {
name: 'Female',
y: 57,
marker: {
symbol: // fill in a URL
},
color: '#F23A2F'
}]
}]21. ‘line’
Your classic line chart simply shows multiple data sets over time or categories. By declaring the names of the categories in our series object, we can display and separate each of the datasets.
plotOptions: {
pointStart: 2010
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]22. ‘lollipop’
Similar to a column chart, the lollipop chart displays categories of data with a point and a line. We only need to feed an array of objects with a category name and a datapoint.
series: [{
name: 'Population',
data: [{
name: 'China',
low: 1427647786
}, {
name: 'India',
low: 1352642280
}, {
name: 'United States',
low: 327096265
}]
}]23. Network Graph
The network graph is a powerful tool in the Highcharts toolkit. With the global plotOptions parameter, we say that we are passing in data of arrays with a ‘to’ string and a ‘from’ string. We can build a tree data structure that Highcharts will automatically display as the full network graph.
plotOptions: {
networkgraph: {
keys: ['from', 'to']
}
},
series: [{
dataLabels: {
enabled: true,
linkFormat: ''
},
id: 'lang-tree',
data: [
['Proto Indo-European', 'Balto-Slavic'],
['Proto Indo-European', 'Germanic'],
['Indo-Iranian', 'Iranian'],
['Iranian', 'Old Persian'],
['Old Persian', 'Middle Persian'],
['Indic', 'Sanskrit'],
['Italic', 'Osco-Umbrian'],
['North Germanic', 'Old Danish'],
['West Germanic', 'Old English'],
['West Germanic', 'Old Frisian'],
['West Germanic', 'Old Dutch'],
['West Germanic', 'Old Low German'],
['West Germanic', 'Old High German'],
['Old Norse', 'Old Icelandic'],
['Old Norse', 'Old Norwegian'],
['Old Norwegian', 'Middle Norwegian']
]
}]24. ‘organization’
The organization chart is another highly customizable chart type that’s great for showing parent/child relationships in a group. The series objects are more complicated for this chart, explicitly declaring the position titles and relationships, and customizing the labeling. Check out the docs for more examples of advanced customizations for organization charts.
series: [{
type: 'organization',
name: 'Highsoft',
keys: ['from', 'to'],
data: [
['Shareholders', 'Board'],
['Board', 'CEO'],
['CEO', 'CTO'],
['CEO', 'CPO'],
['CEO', 'CSO'],
['CEO', 'HR']
],
levels: [{
level: 0,
color: 'silver'
}, {
level: 1,
color: 'silver'
}],
nodes: [{
id: 'Shareholders'
}, {
id: 'Board'
}, {
id: 'CEO',
title: 'CEO',
name: 'Grethe Hjetland',
image: url
}, {
id: 'Product',
name: 'Product developers'
}, {
id: 'Web',
name: 'Web devs, sys admin'
}, {
id: 'Sales',
name: 'Sales team'
}, {
id: 'Market',
name: 'Marketing team',
column: 5
}]
}25. ‘packedbubble’
This fun animated chart is great at displaying visual data over several categories. The physics of the chart can be adjusted using the plotOptions object and we can categorize the groups by colors, like countries by continent in this example.
series: [{
name: 'Europe',
data: [{
name: 'Germany',
value: 767.1
}, {
name: 'Croatia',
value: 20.7
},
{
name: "Belgium",
value: 97.2
},
{
name: "Cyprus",
value: 7.2
}]
}, {
name: 'Africa',
data: [{
name: "Senegal",
value: 8.2
},
{
name: "Cameroon",
value: 9.2
},
name: "Algeria",
value: 141.5
}]
}, {
name: 'North America',
data: [{
name: "Costa Rica",
value: 7.6
}, {
name: "USA",
value: 5334.5
}, {
name: "Canada",
value: 566
}, {
name: "Mexico",
value: 456.3
}]
}]26. ‘pareto’
The Pareto principle is based on an 80/20 correlation that can be applied to analysis of different statistics. A Pareto chart can be used to pinpoint priorities for businesses. In this example, the blue line tells us that the first three complaint categories account for 80% of the total complaints, giving clear feedback as to where improvements can be made. This example uses a simple column chart, with a Pareto as a second series.
series: [{
type: 'pareto',
name: 'Pareto',
yAxis: 1,
zIndex: 10,
baseSeries: 1
}, {
name: 'Complaints',
type: 'column',
zIndex: 2,
data: [755, 222, 151, 86, 72, 51, 36, 10]
}]27. ‘pie’
A simple pie chart is great for displaying a breakdown of data into categories. We can set up a simple series with each of the datapoints and the chart will automatically generate.
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
}]
}]28. ‘polygon’
Building a polygon series to overlay on another series, such as a scatter series, we can visualize datapoints that fall within a goal range. Both sets of data can be fed in as arrays of x,y coordinate pairs.
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70], [180, 60], [173, 52], [166, 45]]
}, {
name: 'Observations',
type: 'scatter',
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
]
}]29. ‘pyramid’
Pyramid charts are great for showing a hierarchical data set, and takes a simple series to create.
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}]The pyramid also has a 3d version, by using 'pyramid3d' for the chart type.
30. ‘sankey’
For visualizing linear flow between different nodes, the sankey chart is a useful chart type. Similar to the dependency wheel, we set up our data in arrays and declare the types in our series. We can then set up ‘to’, ‘from’, and ‘weight’ properties to build the chart.
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Portugal', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['Mexico', 'France', 1],
['Mexico', 'Spain', 5],
['Mexico', 'England', 1]
],
type: 'sankey',
name: 'Sankey demo series'
}]31. ‘scatter’
A simple scatter chart is great for showing 2 dimensional data over categories. In this example, we have 2 series, each taking in arrays of x,y coordinates.
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]
]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [
[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8]
]
}]Add a third coordinate to each of the data points, and use 'scatter3d' as the chart type and we can generate a 3d version of the scatter chart.
32. ‘spline’
An advanced line chart that’s great for charting information over time. We can set the x-axis to datetime and then pass in the date for each datapoint in the data array of the series.
xAxis: {
type: 'datetime',
title: {
text: 'Date'
}
},
series: [{
name: "Winter 2014-2015",
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41]
]
}, {
name: "Winter 2015-2016",
data: [
[Date.UTC(1970, 10, 9), 0],
[Date.UTC(1970, 10, 15), 0.23],
[Date.UTC(1970, 10, 20), 0.25]
]
}, {
name: "Winter 2016-2017",
data: [
[Date.UTC(1970, 9, 15), 0],
[Date.UTC(1970, 9, 31), 0.09],
[Date.UTC(1970, 10, 7), 0.17]
]
}],33. ‘streamgraph’
This interesting chart style is essentially several area graphs running together over time or categories. The series data itself is simple enough, only needing to feed in a name and a array of numbers for each data set, and the x-axis sets the timing or categories for the data.
xAxis: {
type: 'category',
categories: [
'',
'1924 Chamonix',
'1928 St. Moritz',
'1932 Lake Placid',
'1936 Garmisch-Partenkirchen'
]},
series: [{
name: "Finland",
data: [
0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5
]
}, {
name: "Austria",
data: [
0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17
]
}, {
name: "Sweden",
data: [
0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15
]
]}
34. ‘sunburst’
The sunburst chart is a complex but powerful addition to the library. Using a parent/child data structure, this chart can be set up with automatic drill-down to explore the data. Here are some of the basic of setup. We organize our datapoints into nodes, and connect them with a parent property. We then can adjust colors and other settings in the series object.
var data = [{
id: '0.0',
parent: '',
name: 'The World'
}, {
id: '1.3',
parent: '0.0',
name: 'Asia'
}, {
id: '1.1',
parent: '0.0',
name: 'Africa'
}, {
id: '1.2',
parent: '0.0',
name: 'America'
}, {
id: '1.4',
parent: '0.0',
name: 'Europe'
}, {
id: '1.5',
parent: '0.0',
name: 'Oceanic'
},/* Africa */
{
id: '2.1',
parent: '1.1',
name: 'Eastern Africa'
},{
id: '3.1',
parent: '2.1',
name: 'Ethiopia',
value: 104957438
}, {
id: '3.2',
parent: '2.1',
name: 'Tanzania',
value: 57310019
}, {
id: '3.3',
parent: '2.1',
name: 'Kenya',
value: 49699863/***********//* America */
{
id: '2.9',
parent: '1.2',
name: 'South America'
},{
id: '3.98',
parent: '2.9',
name: 'Brazil',
value: 209288278
}, {
id: '3.99',
parent: '2.9',
name: 'Colombia',
value: 49065615
}, {
id: '3.100',
parent: '2.9',
name: 'Argentina',
value: 44271041
},{
id: '2.8',
parent: '1.2',
name: 'Northern America'
},{
id: '3.93',
parent: '2.8',
name: 'United States',
value: 324459463
}, {
id: '3.94',
parent: '2.8',
name: 'Canada',
value: 36624199
}
]series: [{
type: 'sunburst',
data: data,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
},
rotationMode: 'circular'
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}]
}]
35. ‘tilemap’
The tilemap chart has many variations and customizable parameters. We can set the position of each datapoint with x,y coordinates, and control overarching categories with color zones.
colorAxis: {
dataClasses: [{
from: 0,
to: 1000000,
color: '#F9EDB3',
name: '< 1M'
}, {
from: 1000000,
to: 5000000,
color: '#FFC428',
name: '1M - 5M'
}, {
from: 5000000,
to: 20000000,
color: '#FF7987',
name: '5M - 20M'
}, {
from: 20000000,
color: '#FF2371',
name: '> 20M'
}]
},
series: [{
name: '',
data: [{
'hc-a2': 'AL',
name: 'Alabama',
region: 'South',
x: 6,
y: 7,
value: 4849377
}, {
'hc-a2': 'AK',
name: 'Alaska',
region: 'West',
x: 0,
y: 0,
value: 737732
}, {
'hc-a2': 'AZ',
name: 'Arizona',
region: 'West',
x: 5,
y: 3,
value: 6745408
}]
}]Setting the 'tileshape' option in the series to ‘circle’ or ‘diamond’ gives us some variation in display.
36. ‘timeline’
A simple timeline chart is great for showing a progression of events with a simple series.
series: [{
data: [{
name: 'First dogs',
label: '1951: First dogs in space',
description: '22 July 1951 First dogs in space (Dezik and Tsygan) '
}, {
name: 'Sputnik 1',
label: '1957: First artificial satellite',
description: '4 October 1957 First artificial satellite. First signals from space.'
}, {
name: 'First human spaceflight',
label: '1961: First human spaceflight (Yuri Gagarin)',
description: 'First human spaceflight (Yuri Gagarin), and the first human-crewed orbital flight'
}, {
name: 'First human on the Moon',
label: '1969: First human on the Moon',
description: 'First human on the Moon, and first space launch from a celestial body other than the Earth. First sample return from the Moon'
}]
}]37. ‘treemap’
Another powerful chart type option, the tree map is great for retrieving large amounts of related data and visualizing it with automatic drill down functionality. The series is relatively straight forward, but retrieving and parsing JSON data from an API can be the more complicated task.
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}]After parsing, objects like this are sent to the chart to be built.
[
{
id: "id_0_0",
name: "Afghanistan",
parent: "id_0"
}, {
id: "id_0_0_0",
name: "Communicable diseases",
parent: "id_0_0",
value: 103
}, {
id: "id_0_0_1",
name: "Injuries",
parent: "id_0_0",
value: 47
}, {
id: "id_0_0_2",
name: "Non-communicable diseases",
parent: "id_0_0",
value: 110
}
]38. ‘variable pie’
With the variable pie chart, we can add a z coordinate to size the sections differently.
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
}]
}]39. ‘variwide’
Adding another component to the column chart, we can display another piece of data. In this case the y-axis represents the labor cost, and the width of the bar represents the GDP of the country.
series: [{
name: 'Labor Costs',
data: [
['Norway', 50.2, 335504],
['Denmark', 42, 277339],
['Belgium', 39.2, 421611],
['Sweden', 38, 462057],
['France', 35.6, 2228857],
['Netherlands', 34.3, 702641],
['Finland', 33.2, 215615],
['Germany', 33.0, 3144050],
['Austria', 32.7, 349344],
['Ireland', 30.4, 275567],
['Italy', 27.8, 1672438],
['United Kingdom', 26.7, 2366911],
['Spain', 21.3, 1113851],
['Greece', 14.2, 175887],
['Portugal', 13.7, 184933],
['Czech Republic', 10.2, 176564],
['Poland', 8.6, 424269],
['Romania', 5.5, 169578]
]
}]40. ‘vector’
The vector chart makes it easy to visualize vector data. Each datapoint consists of an array with 4 numbers, [x, y, length, angle]
series: [{
type: 'vector',
name: 'Sample vector field',
data: [
[5, 5, 190, 18],
[5, 10, 185, 27],
[5, 15, 180, 36],
[5, 20, 175, 45],
[5, 25, 170, 54],
[5, 30, 165, 63],
[5, 35, 160, 72],
[5, 40, 155, 81],
[5, 45, 150, 90],
[95, 95, 10, 342]
]
}]41. ‘venn’
Venn diagrams are great for displaying overlaps in categories of information. With the 'sets' property, we can decide which categories the datapoints will be placed into.
series: [{
type: 'venn',
name: 'The Unattainable Triangle',
data: [{
sets: ['Good'],
value: 2
}, {
sets: ['Fast'],
value: 2
}, {
sets: ['Cheap'],
value: 2
}, {
sets: ['Good', 'Fast'],
value: 1,
name: 'More expensive'
}, {
sets: ['Good', 'Cheap'],
value: 1,
name: 'Will take time to deliver'
}, {
sets: ['Fast', 'Cheap'],
value: 1,
name: 'Not the best quality'
}, {
sets: ['Fast', 'Cheap', 'Good'],
value: 1,
name: 'They\'re dreaming'
}]
}]42. ‘waterfall’
Waterfall charts are designed to show multiple datapoints that combine to a total over a progression. We build our data in sequence, and add intermediate sums along the way, ending with a final sum.
series: [{
data: [{
name: 'Start',
y: 120000
}, {
name: 'Product Revenue',
y: 569000
}, {
name: 'Service Revenue',
y: 231000
}, {
name: 'Positive Balance',
isIntermediateSum: true
}, {
name: 'Fixed Costs',
y: -342000
}, {
name: 'Variable Costs',
y: -233000
}, {
name: 'Balance',
isSum: true
}]
}]43. ‘windbarb’
A niche chart for visualizing wind speed and direction over time. Typically, we overlay a different type of chart for display.
series: [{
type: 'windbarb',
data: [
[9.8, 177.9],
[10.1, 177.2],
[11.3, 179.7],
[10.9, 175.5]
],
name: 'Wind',
}, {
type: 'area',
keys: ['y', 'rotation'], // rotation is not used here
data: [
[9.8, 177.9],
[10.1, 177.2],
[11.3, 179.7],
[10.9, 175.5]
]
}]44. ‘wordcloud’
A fun visualizer that sizes words based on their frequency in a paragraph or input text. You need to write your own parsing function to export this data, but this is what your series object eventually looks like.
series: [{
type: 'wordcloud',
data: [{
name: "Lorem",
weight: 1
}, {
name: "ipsum",
weight: 1
}, {
name: "dolor",
weight: 1
}, {
name: "sit",
weight: 1
}]
}]45. ‘xrange’
X-range charts are perfect for displaying the overlap of data over a timeperiod. This would be useful for scheduling or visualizing lifecycles of projects. We can declare the categories on the y-axis, and pass in a start time, end time, and y-index, along with a partial fill value.
yAxis: {
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}]
}]Conclusion:
There are examples of each of these in the documentation for Highcharts, and with the expanded set of add-ons, we can create some really amazing responsive and visually pleasing charts right in our JS files. These are only the chart styles for the basic Highcharts library, but there are extensions to explore that include Highcharts Stock and Highcharts Maps. I hope this fleshing out of my notes as reference helped you out as well!
