Scatter and Bubble Series
Scatter charts use two axes to plot
(x,y) pairs of numeric variables as points at the intersection
Scatter plots are great for identifying the relationship between plotted values, as well as outliers and gaps in the data.
Here's a simple scatter chart that plots the mean sea level measured over a few years. The measurements may have a certain degree of variability and error to them, but the overall trend is clear — the sea level is rising.
A bubble chart is simply a scatter plot where each point has another associated variable that determines the size of a bubble. Instead of having pairs of variables, we now have triples.
To turn a scatter plot into a bubble chart you must provide the
that will be used to fetch the value that will determine the size of each bubble.
For the example below we are using the following key configs:
Another config we should provide is the
size of the marker.
sizeKey is specified, the value of
config takes on a different meaning — instead of determining the actual
marker size, the
size config now determines the maximum marker
size. The marker also has the
minSize config, which only applies
sizeKey is set.
So for example, if the
sizeKey data ranges from
200, the above config means that
-100 will correspond
to marker of size
200 to a marker of size
size), and any value between
200 will be interpolated to
a value between
Finally, the bubble chart is so called because the circle is the most common marker type used for this kind of scatter plot, but with ag-Charts any other marker shape can be used as well.
The example below uses both
to represent the age of females and males respectively. We provide the names of all keys to get nice looking
tooltips and the
title of the series to have it reflected in the legend. The series title is shown
in the tooltips as well.
|The key to use to retrieve x-values from the data.|
|A human-readable description of the x-values.|
|The key to use to retrieve y-values from the data.|
|A human-readable description of the y-values.|
|The key to use to retrieve size values from the data, used to control the size of the markers in bubble charts.|
|A human-readable description of the size values.|
|The key to use to retrieve values from the data to use as labels for the markers.|
|A human-readable description of the label values.|
|The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.|
|Whether or not to display the series.|
|Whether or not to include the series in the legend.|
|Whether or not to show tooltips when the series are hovered over.|
|Function used to create the content for tooltips.|
|The title to use for the series. Defaults to |
|The colour of the fill for the markers.|
|The opacity of the fill for the markers.|
|The colour of the stroke for the markers.|
|The opacity of the stroke for the markers.|
|The width in pixels of the stroke for the markers.|
|Configuration for the markers used in the series. See marker for more details about this configuration object.|
|Configuration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object.|
|A map of event names to event listeners. See listeners for more details about this configuration object.|
Configuration for the markers used in the series.
|Whether or not to show markers.|
|The shape to use for the markers. You can also supply a custom marker by providing a |
|The size in pixels of the markers.|
|For series where the size of the marker is determined by the data, this determines the smallest size a marker can be in pixels.|
|The colour to use for marker fills. If this is not specified, the markers will take their fill from the series.|
|The colour to use for marker strokes. If this is not specified, the markers will take their stroke from the series.|
|The width in pixels of the marker stroke. If this is not specified, the markers will take their stroke width from the series.|
|Function used to return formatting for individual markers, based on the supplied information. If the current marker is highlighted, the |
Configuration for the highlighting used when the markers are hovered over.
|The fill colour of the markers when hovered over.|
|The colour of the stroke around the markers when hovered over.|
A map of event names to event listeners.
|The listener to call when a scatter series node (marker) is clicked.|
Continue to the next section to learn about pie and doughnut series.