Chapter 4. Area, Scatter, and Bubble Charts

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

Introducing area 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:...

Stacking charts with multiple series

By stacking the area charts, one can easily compare the series in a proportional or total format. Stacking can be applied to all or some of the series in the charts.

Consider the following data of the past 4 years showing the production of iron ore by major mining countries:

(function() {
  $( '#chart_container' ).highcharts({
    chart: {
      type: 'area'
    },
    title: {
      text: 'Iron Ore Production'
    },
    xAxis: {
      tickmarkPlacement: 'on',
      categories: [2010, 2011, 2012, 2013]
    },
    yAxis: {
      title: {
        text: 'in million metric tons'
      }
    },
    series: [{
      name: 'China',
      data: [1070, 1330, 1310, 1320]
    }, {
      name: 'Australia',
      data: [433, 488, 521, 530]
    }, {
      name: 'Brazil',
      data: [370, 373, 398, 398]
    }, {
      name: 'India',
      data: [230, 240, 144, 150]
    }, {
      name: 'Russia',
      data: [101, 100, 105, 102]
    }]
  });
})();

This code will produce...

Area charts with percentage values

With percentage stacking, an area chart fills all of the vertical space available with its series sized in a proportional manner. Area charts with percentage stacking can be configured by setting stacking to percent in the plotOptions component:

plotOptions: {
  area: {
    stacking: 'percent'
  }
}

This code will produce the following proportional-stacked area chart:

Area-spline charts

Area-spline charts are similar to area charts; however, as the name suggests, they are based on spline charts. Since all the configuration options for area-spline charts are identical to that of area charts, we can easily interchange the two chart types.

Consider the code from the very first example in this chapter, where we visualized the net income of Microsoft and Apple, and change the chart's type parameter from area to areaspline:

chart: {
  type: 'areaspline'
}

This will change the chart to area-spline:

Introducing scatter charts

Scatter charts are different from line and area charts in the way that they don't require sorting. This means that data can be provided in the series with each data point as an array of coordinates, including the values of the x and y axes in any order.

Consider the following scatter showing the relation between magnitude and depth of earthquakes in Calexico, California during the year 2010:

$( '#chart_container' ).highcharts({
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Earthquake Statistics'
  },
  subtitle: {
    text: 'Data Source: <a href="http://www.scsn.org/2010sierraelmayor.html">SCSN</a>'
  },
  xAxis: {
    title: {
      text: 'Depth'
    }
  },
  yAxis: {
    title: {
      text: 'Magnitude'
    },
    min: 3
  },
  tooltip: {
    pointFormat: 'Depth: <strong>{point.x} Km</strong> <br/>Magnitude: <strong>{point.y}</strong>'
  },
  series: [{
    name: 'Calexico',
    data: [[10, 4.8], [22.6, 4.2...

Scatter charts with multiple series

Just as with any other chart type you have learned so far, scatter charts can also be plotted with multiple series.

Copy the code from the previous example and add another series for earthquake data for Ocotillo, California:

{
  name: 'Ocotillo',
  data: [[0.1, 5.0], [4.6, 4.6], [4.4, 4.6], [2.3, 4.5], [10, 4.4], [10, 4.2], [4.9, 4.0], [0.4, 4.5], [13.6, 4.9], [14.4, 4.8], [0, 4.7], [3, 4.6], [6, 4.6], [1.2, 4.5], [6.8, 4.5], [12.6, 4.4], [5.6, 4.4], [10, 4.2], [1, 4.1], [0.5, 4.0], [14.1, 4.0]]
}

The series for Ocotillo will be added to the previous chart.

Creating bubble charts

The difference between bubble charts and all the other chart types we have been through is that a bubble chart uses three dimensional data to plot its data point. Hence, instead of providing values for just the x and y axes, we also provide the z axis value as the third variable. Thus, bubble charts can be used for visualizing 3D data where three variables are correlated.

Note

For the following code to work, you need to include Highcharts-4.x.x/js/highcharts-more.js in your page.

Consider the following example in which we plot a bubble chart to show the correlation between life expectancy, fertility rate, and population of selected countries of the world:

$( '#chart_container' ).highcharts({
  chart: {
    type: 'bubble'
  },
  title: {
    text: 'Life Expectancy, Fertility Rate and Population'
  },
  xAxis: {
    title: {
      text: 'Life Expectancy'
    }
  },
  yAxis: {
    title: {
      text: 'Fertility Rate'
    }
  },
  tooltip: {
    headerFormat: '<b>{point...

Summary

In this chapter, you learned about area charts, stacking them, and plotting with percentage values to get a proportional overview of the plotted data. You also learned about sharing tooltips between multiple series so as to view the current point data with just a single hover. Then, we moved on to area-spline charts that are based on spline charts that have similar configuration options to those of area charts. Next, we began exploring the scatter chart and looked at yet another technique to modify tooltips with minimal programming needed. You also learned about using custom data marker symbols. In the last part, we used a bubble chart to plot 3D data.

In the next chapter, you will learn about pie, polar, and spider web charts and their combinations with other chart types, along with their various configuration options and how we can use them to maximize the readability of our raw data.