Demo
Docs
Theme Editor
API
More Samples
Download
Report Author Guide
Report Items
Data Regions
Chart
Plot
Scatter and Bubble
v2.1.0
v2.1.0v2.0.0v1.2.0

Scatter and Bubble Plots

Scatter and Bubble plots are suitable to visualize relationships between data values. Both plots arrange data values along the horizontal and vertical axes and display points called Symbols on the intersections. The Bubble plot encodes an additional data value into the size of a symbol.

Simple Scatter plot

In its simplest form, a scatter plot visualizes relationships between two variables. For instance, the simple scatter demo displays the correlation between the GDP per capita and life expectancy.

Simple Bubble plot

A bubble plot adds the third variable into visualization by encoding it into the size of displayed symbols. For instance, the simple bubble demo displays the correlation between the diameter of a tree, its height and its volume.

Multi-category Scatter and Bubble plots

You can configure Scatter and Bubble plots to split data values into categories and visualize them using symbols' colors, shapes, or both. For instance, the multi-category scatter demo displays the correlation between the GDP per capita and life expectancy categorized by the continent.

You can configure all these types using the Scatter and Bubble plot templates and their properties described in the following sections.

You can use the following demos to explore plot properties - open a link, toggle the Report explorer, select the Plot - Plot 1 node and use the Properties panel to modify the configuration.

You could also download the report files listed below and open them in the Standalone Report Designer.

Data Values

The Values collection of Scatter and Bubble plots determines the data values whose relationships you want to visualize. The collection items include the the Value property that should be a pair of bound field references or more advanced expressions. Values of the first expression are arranged along the horizontal axis, values of the second expression - along the vertical axis.

For instance, the Simple Scatter Plot Demo has the {gdpPercap}, {lifeExp} Data Value.

Color Encoding

The Color Encoding enables the color legend and includes the Color expression and the optional Color Aggregate function that reduces many Color values into a single one.

Scatter and Bubble plots calculate distinct Color Encoding results for items produced by the Data Values collections, convert them to fill color of corresponding data points, and displays the match between colors and encoding results in the legend. Colors come from the Chart Palette.

For instance, the Multi-category Scatter Plot Demo uses the {continent} expression for the Color Encoding. Consequently, the report output shows the color legend that matches continents with the corresponding data points' fill color.

Note: The Color property is the collection, but the Scatter and Bubble plots take the first item only.

Shape Encoding

The Shape Encoding enables the shape legend and includes the Shape expression and the optional Shape Aggregate function that reduces many Shape values into a single one.

Scatter and Bubble plot calculate distinct Shape Encoding results for items produced by the Data Values collections, convert them to the symbol of corresponding data points, and displays the match between symbols and encoding results in the legend. Supported shapes are Dot, Box, Diamond, Triangle, Cross, Dash, Plus.

For instance, the Multi-category Scatter Plot Demo uses the {continent} expression for the Shape Encoding. Consequently, the report output shows the shape legend that matches continents with the corresponding data points' symbols.

Note: The Shape property is the collection, but the Scatter and Bubble plots take the first item only.

If the Color Encoding and the Shape Encoding use the same value, then the shape legend and the color legend are merged into the single one, as in the Multi-category Scatter Plot Demo.

Size Encoding

The Size Encoding of a Bubble plot enables the size legend and includes the Size expression and the optional Size Aggregate function that reduces many Size values into a single one. The Size Encoding works only with numeric values and breaks them down into ranges that determine the size of symbols. It allows you to encode additional information in a bubble plot.

For instance, the Simple Bubble Plot Demo has the size encoding is set to {Volume} expression. Thus, the plot uses the range of symbol sizes derived from distinct values of the Volume field.

Note: The Size property is the collection, but the Bubble plot takes the first item only.

Symbols look-and-feel

The following properties allow you to fine-tune the outfit of symbols that form Scatter and Bubble plots. You can see their effect in action by modifying the configuration of any demos referenced above.

The Symbol Opacity is a number in percentage that determines the opacity of symbols. 100% means they are opaque, and 0% means that they are entirely transparent.

The line properties, the Background Color expression, and the Symbol Shape allow you to set up the appearance of symbols. If the Symbol Shape is Auto, then the plot either picks the default value or applies the Shape Encoding that we described earlier.

Tooltip and Labels Template

The data point symbols can display tooltips and labels with the following content that you can set up using the Tooltip Template and Label Text Template expressions, respectively.

You can choose one of the following values in the drop-down list.

  • Value Field Name usually means the field name to which the second item of the Data Value is bound.
  • Value Field Value means the current value of the second item of the Data Value.
  • Color Field Name usually means the field name to which the Color Encoding is bound.
  • Color Field Value means the current Color Encoding value.
  • Shape Field Name usually means the field name to which the Shape Encoding is bound.
  • Shape Field Value means the current Shape Encoding value.
  • Size Field Name usually means the field name to which the Size Encoding is bound.
  • Size Field Value means the current Size Encoding value.

Also, you could use the template's Expression Editor to set the formatting for these values using the interpolation syntax and supported formatted strings. For instance, you can set the Label Text Template to {valueField.value:f0} in the Simple Scatter Plot Demo to display life expectancy values without decimal digits.

Labels Appearance

A subset of text properties in the Label Text section and the line properties in the Label Border section allow you to set up the corresponding visual parameters of the plot labels.

The Label Position and an optional Offset in pixels determine the location of labels relative to a parent data point symbol:

  • Inside - inside
  • Outside - on the top
  • Center - on the center
  • Auto - equals to Outside

The Overlapping Labels property indicates the handling of overlapping labels. Possible values are:

  • Auto - hides some labels to prevent the overlapping
  • Show - shows all labels even if the overlapping persists

The line properties in the Label Line section allow you to add the connecting lines between labels and their parent data points. The Label Line Position determines the connection point of a label's bounding box and the line:

  • Auto - selected automatically
  • Center - on the center of the bounding box side

Action

This properties determine the Interactive Action when a report reader clicks a data point symbol. You can use bound field references to pass parameters in a drill-through report or configure a dynamic bookmark or URL. The field value is evaluated in the scope of the current data value. Visit the Drill-Through Reports Walkthrough for more information. It explains how to set up the drill-through column plot, but the same technique applies to a scatter or bubble plot.