Bubblechart Tutorials

Step by step tutorial

The user story

I’m a HR manager in a company and I want to better understand absenteism per gender groups.

I want to know whether the women, men or non-binairy follow the same pattern in terms of absenteism.

Is the frequency the same ? Is the gravity the same ? How many employees belong to the different gender groups ?

My intuition is that women tend to be more often on leave to take care of the kids, but men are leaving for longer periods of time. Let’s do a bublechart to check it out !

Remember that the bubblechart is perfect for benchmarking across 3 dimensions. It allows you to connect three indicators, to illustrate correlations. It is perfect and adapted to compare complex sets.


Before you start!

Make sure you added your datasource to your application. Once you’re done create a new story.

Pick some data

To create a nice bubblechart, the chart needs to understand what is the value for the absciss, what is the value for the ordinate and the value for the bubble size also. And, a column containing the names of the bubbles of course :)

So your data should reflect this structure in some way.

Employees Gravity Frequency Gender
1123 2 0.2 Woman
1369 5 0.05 Man
209 8 0.14 Non-binairy

You need :

  • a Employees column: contains the r value. This will define the size of the bubble. It is the radius of the circle.

  • a Gravity column: contains the x value. This will define where the bubble should be located horizontally in the chart

  • a Frequency column: contains the y value. This will define where the bubble should be located vertically in the chart

  • a Gender column: contains the label. what are the names of my bubbles ? What I am looking at ?

    In our case my gender groups.

If your data is alredy in this format, move on to the next step.

Also, remember that you can create fake data fitting the bubblechart format with our awesome fake data generator Fakir directly from the story :)

This is how my query should look like in the Dataset Editor.

See on the left side how the data has been formatted!

bubble dataset
bubble chart

Add units to your columns to contextualize the information and give meaning to your story.

Chart Parameters

Once my data has been setup I can now choose to configure a bubblechart.

I just need to follow the steps, and in 3 clicks I’m done!

bubble parameters
bubble chart

bubble chart

Add a line

Sometimes, it could be nice to also have the bubbles repartition around a line (that can be an average, a revenue…). So let’s move to our next tutorial and see how to set it up !

The line has its own dataset. In our example, it is my_dataset_1

In the chart parameters menu, I open the optional parameters and configure the line options.

bubble line
bubble line preview

Add a bisector

It could also be nice to have a bisector in order to see the bubbles repartition at a glance. Are my products above or under the objective ?

How to do that ?

In the chart parameters menu, I open the optional parameters and configure the bisector options.

bubble bisector

You can either choose to add a hardcoded bisector or to add a bisector based on a dataset like in our example.

Add quadrant

Sometimes, you may want to add quadrants instead of a line or bisector in order to analyze your products the BCG matrix way. You can either choose to add a hardcoded quadrant, a dynamic quadrant from a dataset, or a quadrant from decile.

  • Hardcoded quadrant : I fill in values to statically position my quadrant
  • Dynamic quadrant from a dataset : I choose values from one of my dataset to dynamically position my quadrant (it can be the one used for the chart but also another one)
  • Quadrant from decile : I choose a number between 1 and 10 and Toucan automatically divides the chart (each decile represents 1/10 of the sample or population)

How to do that ?

In the chart parameters menu, I open the optional parameters and configure the quadrant options. In our example I choose to add a hardcoded quadrant.

bubble quadrant

You also have the ability to add color coding and a quadrant legend.

Other configuration examples

Ex1: Simple Bubblechart with filter

Dataset and chart configuration

Here is a sample of rows of the dataset (i.e. domain) used:

Employees Gravity Frequency Gender Country
1123 2 0.2 Woman France
1369 5 0.05 Man France
209 8 0.14 Non-binairy France
2502 4 0.6 Woman US
2330 4 0.07 Man US
357 3 0.3 Non-binairy US
chart ex0

chart ex0

  • Set up the filter on the Country column
chart ex01

chart ex01

Zoom on the precision and units set-up

  • Units for the Gravity Column chart ex02
  • Precision for the Frequency Column chart ex03
Ex2: Bubblechart with drill


chart ex2

chart ex2

Let’s set up a more advanced bubble chart, with drill and quadrant. This Bubblechart could help directors to takes financial decisions about budget balance. Ready? Go!


Here is a sample of rows of the dataset (i.e. domain) used:

Group Budget Consumed Budget Evolution Budget Weight Label Level
Financial Direction 50 50 98 Accounting Department sub
Financial Direction 21 18 74 Billing Department sub
Financial Direction 43 12 33 Analytics Department sub
HR Direction 79 -93 66 Talents Department sub
HR Direction -14 20 1 Hiring Department sub
HR Direction 91 -53 61 Branding Department sub
Marketing Direction -29 -82 13 Strategy Department sub
Marketing Direction -65 -69 4 Events Department sub
IT Direction 33 -21 62 Infrastructure Department sub
IT Direction 26 92 32 Data Department sub
IT Direction 53 1 63 Web Department sub
Financial Direction 48 49 56 Financial Direction main
HR Direction 56 -85 71 HR Direction main
Marketing Direction -56 -72 73 Marketing Direction main
IT Direction 58 88 98 IT Direction main

Chart basis configuration

chart ex21

chart ex21

Drill configuration

chart ex22

chart ex22

Bubble Size Configuration

chart ex22

chart ex22

Quadrant configuration

chart ex22

chart ex22

Narrative and Tip conf

chart ex22

chart ex22

Final chart

chart ex23

chart ex23