Still have questions?
Contact support
You are looking at an outdated 7.3.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Bubble Chart

Overview

A Bubble chart is a variation of a Scatter chart in which the data points are replaced with bubbles.


Bubble charts are often used to present financial data. Use a Bubble chart when you want specific values to be more visually represented in your chart by different bubble sizes.


Bubble charts are popular tools for identifying and illustrating industry clusters. Essentially, these charts allow four different variables to be plotted within the same graph, making it easy to assess relative economic performance. Because they allow visual comparisons of well-understood measures, bubble charts are often used for pinpointing priority industries that should receive attention from a state economic development agency.

Chart

Depending on data model and the visualization purpose the bar chart may contain single series or multi series. As bubble chart need 3 values to show bubbles - you need to pass this data to chart:

When using Bubble chart on a scatter plot:

[10, 63, 20]

When using Bubble chart on a categorized plot:

['December', 6, 17]

Single Series

Let's see single series bubble chart created using the sample data - ACME Corp. sales data for the three different products, we will compare a number of units sold and profit using a bubble chart:

ProductUnitsProfit
Product A 637$6
Product B 72$14
Product C 48$10

Now we need to convert this data table into acceptable format, this format will be accepted by AnyChart. In terms of AnyChart data model we have one series of data (Sales) with categories that hold Product names. Each point in series represents product, units sold and a profit amount. Converted data looks like:

chart.bubble([
        ['Product A', 637, 6],
        ['Product B', 472, 14],
        ['Product C', 48, 10]
]).minimumSize(2).maximumSize(40);

As you can see, we've categoriesed chart at bubble() method, set parameters that defines bar category into first and second columns and parameter that defines bubble size into third one.

Here it is - AnyChart can now visualize your data. You can launch it in playground and modify it.

JsFiddle Playground

Multi-series

To compare two or more data rows you have to use multi-series bar charts as it shown in the sample below.

Let's compare year 2003 sales to year 2004 product sales:







YearYear 2003 SalesYear 2004 Sales
ProductUnitsProfitUnitsProfit
Product A637$6630$12
Product B72$1432$10
Product C48$1048$20

As we do in single-series bubble sample above we need to convert this table into acceptable format, the only difference between these two samples is the fact that now we have bigger data and we have to MapAs() it.

var dataSet = anychart.data.set([
        ['Product A', 637, 6, 630, 12],
        ['Product B', 72, 14, 32, 10],
        ['Product C', 48, 10, 48, 20]
]);
var seriesData_1 = dataSet.mapAs({x: [0], value: [1], size:[2]});
var seriesData_2 = dataSet.mapAs({x: [0], value: [3], size:[4]});

JsFiddle Playground

Size

Bubbles minimum and maximum size can be controlled using .maximumSize() and .minimumSize() parameters. Both of them can be set in percents of a lesser dataplot side (this can be width or height) and in pixels:

chart.maximumSize(25).minimumSize(1);

When you set .maximumSize('20%') - AnyChart will make diameters of bubble(s) with a biggest size equal to 20% the lesser of two: width or the height of data plot.


Here is the sample when bubbles are size in percents, as specified above:

JsFiddle Playground

And in this sample when bubbles are sized in pixels:

chart.maximumSize(100).minimumSize(10);
Note again, that setting size in pixels may lead to the nasty results when chart is resized.

JsFiddle Playground

Axes

In AnyChart axis is an object that allows you to configure chart grid, axis line along with tick marks and labels, axis scale and settings and many more. All axis features are described in Axes Basics tutorial.

In this section we will quickly demonstrate how axis orientation can be adjusted, how axis scale can be inverted and how minimum and maximum values can be controlled.

Orientation

With AnyChart you can place axes to any side if the chart, all you need to do is to adjust .orientation() parameter of .yAxis() or .xAxis() methods.

Positioning depends on plot type and inversion of axes, you will find list of all possible orientation and inversion settings in Axis Orientation tutorial.

chart.xAxis(0).orientation('top');
chart.yAxis(0).orientation('right');

And here is the demonstration of this feature on the Single-series sample:

JsFiddle Playground

Inversion

AnyChart allows to invert any axis: Y, X or any extra axis. Inversion is controlled by axis :

chart.yScale().inverted(true);

And here is the demonstration of Y Axis inversion on the Single-series sample:

JsFiddle Playground

Minimum and Maximum

By default AnyChart calculates axis minimum and maximum automatically, you can see this on the scale positioning chart sample above: minimal value on the Y Axis is 0, and maximum is 1000. You can control these values by setting ** .maximum() and .minimum() parameters of .yScale()** method. As far as you want to adjusted the scale, it's desirable to set .ticks().interval() as well, in case default interval is twisted:

chart.yScale().minimum('-100').maximum('1000').ticks().interval(100);

And here is the demonstration of maximum and minimum values on the Single-series sample:

JsFiddle Playground

Visualization

In this section we will describe main parts of bubble chart visualization and ways to adjust it. Visual appearance of bubbles is defined using certain methods. For bubble chart the main thing is .fill() parameter.

Basic Sample

Now, let's look how to change the look of an Area. Here is a basic sample:

.fill('gold')
.hatchFill('diagonalbrick', 'gray')
.hoverHatchFill('diagonalbrick', 'darkred')
.stroke("Rgb(86,86,26)", 4)
.hoverStroke("darkred", 6);

Using such settings we've created a style that defines bubbles of Gold color, rather thick border, hatch filled with DiagonalBrick and a couple of effects. Also, we've defined that when user will move cursor over an element it will be highlighted with a darkred thick border and hatch fill colored darkened too.

Now we will apply this style to the chart

JsFiddle Playground

Labels and Tooltips

In this section we will explain how to add and configure data labels and tooltips. Full explanation of formatting and tuning visual appearance for them can be found in Labels and Tooltips.


If you want to configure data labels and tooltips for all series - you should do that in .labels() and **.tooltip ()** methods. You can tune their visual appearance, positioning and format.


When formatting data labels text we will use .textFormatter to show Y axes value. Otherwise X axes will be displayed here.

JsFiddle Playground
Related Help Topics:

Learn more about labels and tooltips in Labels and tooltips Full Keywords reference and formatting guide:Labels and tooltips Full reference of data labels settings can be found in XML Reference, particularly style> and settings> nodes. to top –>

Markers

Marker is an object with a specified shape, size, and color or an image used to mark and to identify chart elements. AnyChart allows to add markers to any data element including bubbles.


In the sample below we will take single-series data described above and mark the biggest bubble in series with a "Star5" of the "Gold" color.


To make marker visually appealing we will create a style, that will tell AnyChart to set marker size to 12 pixels in normal state, and make it bigger (22 pixels) when user moves cursor over an element.

        {x: "Product B", y: 172, size: 14, marker: {
            enabled: true, 
            type: 'star5', 
            fill: 'gold', 
            position: 'centerTop', 
            size: 10
        }, hoverMarker: {
            size: 18
        }},

And here is a result - the best product for ACME Corp. is Product B and we show this on the chart:

JsFiddle Playground

You can read more about working with markers in Markers tutorial. Full reference of marker style can be found in XML Reference, particularly node. to top –>

Colors

AnyChart uses default color palette to colorize data elements of chart automatically even if you have not define special colors. But you can apply the color to exact data series or data point.

Colorizing Elements

Let's demonstrate how to apply different colors to different data series. To apply the color to the exact series we need to set color(). In the sample below we have 5 series with sample data and we'll color each series into different color. Here is the sample:

JsFiddle Playground

In the sample below we will see how we can colorize individual points. We have chart with one series and predefined color for all elements. We will set "Rgb(180,77,77)" color for minimum point and "Rgb(77,180,77)" for the maximum one. As you see it is very easy to do by setting .fill() parameter for point.

JsFiddle Playground

Important Note: AnyChart takes care of visualization and users convenience seriously - that is why we have a number of ways to set colors, for example, instead of "Rgb(180,77,77)" you can set "HSV(?,?,?)" or "HTMLConstant" or "#HEXCode"- and the color will be the same. Depending on your system/site/application design you may need - and use - any of this color setting methods.

Different ways of setting colors of elements Advanced coloring techniques in Styles tutorial –>

Hatch Fills

AnyChart technology allows printing of charts. Some color printers print colors unpredictable and very often it is hard to identify similar colors. Also it is impossible to identify colors on prints of b/w (monochrome) printers. AnyChart has very useful feature - hatch fills, ideal for differentiating elements for black and white display or for those who are color blind. Hatch fill is fully-independent structure, it doesn't rely on color fill and it has own settings and palettes. To see whole range of available hatch types see Hatch tutorial.

To demonstrate hatch fill feature we've prepared the following sample. As you see it is completely monochrome. We have chart with 5 series with 3 data points in each. For every series we've applied different hatch fills by setting .hatchFill() parameter.

JsFiddle Playground