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], [6, 4.3], [10, 4.2], [10, 4.0], [5.6, 4.0], [10, 4.0], [10, 4.0], [10, 7.2], [10, 5.5], [10, 5.4], [10, 5.4], [10, 5.3], [10, 4.8], [10, 4.7], [10, 4.7], [6, 4.6], [10, 4.6], [10, 4.5], [10, 4.5], [10, 4.5]]
}]
});Notice the way in which data points have been provided in the form of arrays with the x value representing the depth and the y value representing the magnitude of the earthquake.
The previous code will produce the following scatter chart:
Notice the way in which data is scattered on the whole chart in all directions.
In Chapter 3, Line and Spline Charts, we learned about formatting the tooltip using the formatter() method. Although the formatter() method is really powerful in modifying tooltips with custom markup, there's actually an easy way too: using the pointFormat property.
The pointFormat property comes in handy when just a little customization is required for the point line. Currently, the tooltip looks like this:
Insert the code for the tooltip component as follows:
tooltip: {
pointFormat: 'Depth: <strong>{point.x} Km</strong> <br />Magnitude: <strong>{point.y}</strong>'
}The available properties inside pointFormat are point.x, point.y, series.name, and series.color. These properties are enclosed by curly braces.
The preceding code will produce the following customized tooltip:
The customized tooltip shows the Depth and Magnitude values.