Consider the following example that shows the sales of smartphones to end users in each quarter of the year 2013. For the sake of simplicity, only three leading vendors have been included:
(function() { $( '#chart_container' ).highcharts({ title: { text: 'Global Smartphone Sales in 2013' }, subtitle: { text: 'Source: Gartner' }, xAxis: { categories: ["Q1'13", "Q2'13", "Q3'13"] }, yAxis: { title: { text: 'Units (in millions)' } }, series: [{ name: 'Android', type: 'column', data: [156.19, 177.9, 205.02] }, { name: 'iOS', type: 'column', data: [38.33, 31.9, 30.33] }, { name: 'Microsoft', type: 'column', data: [5.99, 7.41, 8.91] }] }); })();
This code generates a column chart that consists of three series for Android, iOS, and Microsoft with the numbers of their units sold in millions:
We can easily introduce another series with type
as line
to show the total number of sales made in that quarter:
{ name: 'Total', type: 'line', data: [200.51, 217.21, 244.26] }
The additional series of type line is now inserted in the following chart showing the total number of sales in each quarter: