Show Sidebar Hide Sidebar

Make a Bubble Chart

A Step by Step Guide to Bubble Charts

Make a Bubble Chart

Life Expectancy v. Per Capita GDP, 2007

Step 1: Set up the grid

This is one way you could set up Plotly’s grid to make the graph above. Select the (T)ext column, (x) column, (y) column, and (S)ize as shown in the image for the different traces. The different colors represent different traces on the plot. Learn more about the grid here and copy the data here. Bubble chart grid
Select Bubble charts from the MAKE A PLOT menu. Note: choosing a plot type will update the available options in the grid. Bubble charts in make a plot menu
Click the Size by option in the sidebar, and the Text option. Bubble chart options
For every set of x and y coordinates you select, select a column of values (“Choose as S”) to set the size of the markers… How to make a bubble chart online
…and a column of text notations (“Choose as T”) for every marker, (text notations are not required to make a bubble chart.) How to make a bubble chart online
Click the blue plot button in the sidebar to create the chart. (For more help with the grid see: https://plot.ly/add-data-to-the-plotly-grid ) Blue plot button

Step 2: Sizing and Log Axis

Your plot should look something like this. Open the TRACES popover in the toolbar. Initial bubble chart How to make a bubble chart online
This is what the Style tab of the TRACES popover should look like for “All Traces (Scatter)”.We’ve set the Size field to scale the bubbles’ diameter, not area. And we’ve evened out the pixel-to-value ratio (the higher the value in the box, the smaller the bubbles will be). We’ve also increased the weight of the white bubble outlines. Style tab adjusted
Now, open the AXES popover in the toolbar. This is what the Range tab for the X Axis looks like. From looking at this y vs x bubble chart, it seems there could be an exponential relationship between y and x (y as a function of x). If that’s the case, then there is a linear relationship between y and log(x). Indeed, if you use a log scale for the X Axis, the bubbles appear more linear. Axes icon How to make a bubble chart online

Step 3: Style and annotate!

For more on bubble charts, check out our blog post

Your plot should now look something like this. In order to get the graph at the top of the chart, you’ll need to style it a little more. Log bubble chart
This is what the General and Margins tabs of the LAYOUT popover should look like. We’re giving our plot a grey background, and we’ve changed some of the font options. General layout options Layout margins
This is what the Lines tab of the AXES popover looks like. We’ve changed the grey grid to white, and increased the line weight. Grid lines
This is what the LEGEND popover looks like. We’ve set its background to grey, too. Legend background
We’ve titled our chart and axes. And we’re using markup to link to our source data using the NOTES popover. Select the Page option, and hide the arrow. Because our note has nothing to do with specific data points, we’re going to nestle it below the x-axis.Now drag it to the bottom corner of your plot. Add annotation New text
Once your note looks like you want it to, use the markdown <a> tag to link to the data source. Gapminder Source: GapMinder

Your finished chart should look something like this:

In order to get your graph looking like the one at the top of the tutorial, you’ll need to style it a little more. Finished bubble chart

For more on bubble charts, check out our blog post.

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.