O'Reilly logo

Learning Highcharts by Joe Kuan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Combining scatter and area series

Highcharts also supports scatter charts that enable us to plot the data trend from a large set of data samples. In here we are going to use scatter series differently which makes our chart a bit like a poster chart.

First, we are going to use a subset of the 'Ages 0 to 14' data and set the series to the scatter type:

              name: 'Ages 0 to 14',
              type: 'scatter',
              data: [ [ 1982, 23 ], [ 1989, 19 ], 
                      [ 2007, 14 ], [ 2004, 14 ], 
                      [ 1997, 15 ], [ 2002, 14 ], 
                      [ 2009, 13 ], [ 2010, 13 ] ]

Then we will enable the data labels for the scatter series and make sure the marker shape is always 'circle', as follows:

          plotOptions: {
              scatter: {
                  marker: {
                      symbol: 'circle'
                  },
                  dataLabels: {
                      enabled: true
                  }
              }
          }

The preceding code snippet gives ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required