In this chapter, we will examine the area, scatter, and bubble chart types; their configuration options and their use cases. We will cover the following:
- Creating area and area-spline charts
- Formatting the tooltip in a simpler manner
- Creating scatter charts with single and multiple series
- Creating bubble charts
Area charts are similar to line charts but are slightly different in the way that they show colors below the lines. This color-filled area displays quantitative data in a more distinguished manner. Area charts are typically useful for displaying multiple series with large sets of data points.
Consider the following example showing the net income of Microsoft from 2005 to 2013. Due to the relatively large number of data points (that is, 10), it's more appropriate to visualize this data by an area chart instead of a column or bar chart.
(function() {
$( '#chart_container' ).highcharts({
chart: {
type: 'area'
},
title: {
text: 'Yearly Net Income of Microsoft'
},
subtitle: {
text: 'Source: Microsoft'
},
xAxis: {
categories: [2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013]
},
yAxis: {
title: {
text: 'Revenue in billion USD'
}
},
series: [{
name: 'Microsoft',
data: [12.25, 12.6, 14.07, 17.68, 14.57, 18.76, 23.15, 16.98, 21.86]
}]
});
})();We rendered an area chart by setting the type property of the chart to area. The following is the screenshot of the resulting chart:
If you have a keen eye, you might have noticed that the tick marks on the x axis do not appear at the center of each category but rather they appear between the categories, as shown in the following screenshot:
We can correct this issue by passing the tickmarkPlacement property of the xAxis component with the value on:
xAxis: {
tickmarkPlacement: 'on',
categories: [2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013]
}The tick marks will now appear at the center of each category corresponding to the data points, as shown in the following screenshot:
Note
Eager to learn more about the tickmarkPlacement property? Visit the official documentation at http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement.
Area charts come in handy when we have data comprising multiple series. By plotting the multiple series data with an area chart, it becomes simple to compare each data point of a series with that of another series while also observing the trend that's being shown by the data.
Configure the chart from the previous example to include another series showing the net income of Apple so we can compare it with Microsoft:
series: [{
name: 'Microsoft',
data: [12.25, 12.6, 14.07, 17.68, 14.57, 18.76, 23.15, 16.98, 21.86]
}, {
name: 'Apple',
data: [1.33, 1.99, 3.5, 6.12, 8.24, 14.01, 25.92, 41.73, 37.04]
}]The following screenshot shows the area chart with two series for Microsoft and Apple that will be rendered with the preceding code:
Highcharts shows multiple series in an area chart with semitransparent colors. This makes it easy to view data points behind other series that would be hidden otherwise.
Suppose that at one point in the Apple series we are not provided with data values. In that case, we can pass null in place of missing values and Highcharts will automatically adjust the chart:
{
name: 'Apple',
data: [1.33, 1.99, 3.5, null, null, 14.01, 25.92, 41.73, 37.04]
}This will break the series where null is provided.
Sharing the tooltip between data points of multiple series makes it convenient when comparing large amount of data. It enables us to compare a data point of a series with corresponding data points of other series by simply hovering over a single data point.
We can enable the shared tooltip in the chart from the previous example by modifying the tooltip component, as shown in the following code:
tooltip: {
shared: true
}Hover over any data point and a tooltip will appear showing the values of the corresponding data points of other series, as shown in the following screenshot:
At this point, this tooltip adds even more to the user experience and interactivity by incorporating the crosshair tooltip that follows the cursor parallel to the y axis, as someone hovers over the data points:
tooltip: {
shared: true,
crosshairs: {
width: 1,
color: '#333333',
dashStyle: 'shortdot'
}
}The crosshair tooltip will look like the following: