<h2>When to use</h2>
<p>Use a bubble chart to compare data having three discrete values. </p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Bubble chart</td>
<td>Your data has three discrete values.</td>
</tr>
<tr>
<td><a href="/data-visualization/line-chart/">Line chart</a></td>
<td>You&#39;re plotting discrete and categorical data.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"the ten elements of a bubble chart","caption":"Bubble charts contain these nine elements:\n\n1. **Header**: includes the chart’s title and optional subtitle. Use subtitles when additional context is necessary.\n2. **Y-axis label**: represents a category.\n3. **Y-axis value**: represents a numeric or sub categorical value. This, combined with the x-axis value, will determine the placement of each bubble.\n4. **Legend**: uses color to define the property of each bubble. \n5. **X-axis label**: represents a category.\n6. **Bubble**: represents a numeric value illustrated by the bubble’s size.\n7. **X-axis value**: represents a numeric or sub categorical value. This, combined with the y-axis value, will determine the placement of each bubble.\n8. **Plot area**: shown as a grid within the bar chart, where data is displayed.\n9. **Zoom tool**: allows user to zoom in or out on a particular area of the container.\n10. **Container**: houses the chart and all elements including the legend. The container aligns to the grid to determine the chart’s size.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/anatomy--3-.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Read blog","path":"https://www.atlassian.com/data/charts/bubble-chart-complete-guide?utm_source=pocket_list","type":"External"},"title":"Atlassian","description":"A complete guide to bubble charts","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

## Usage

Bubble chart is a comparison chart type used to show the relationships among three discrete values. This means that in one chart you can compare three different pairs of values: X to Y, Y to Z, and X to Z, as well as a three-way comparison of X to Y to Z. Bubble charts are unique in this ability, as it would take multiple two-variable charts to get the same results.

The x- and y-value dictate the position of each bubble, while the z-value determines the size of the bubble. 

<details data-name='image-block' data-images='[{"alt":"a bubble chart","caption":"The bubble chart plots three discrete variables.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/2-1---990x495.png"}]' data-numberofcolumns='1'></details>

## Color

### Single data series

Bubble charts with a single data series use a single color, so no legend is needed.

<details data-name='image-block' data-images='[{"alt":"","caption":"In a bubble chart with a single data series, all bubbles share a color.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/color3--1-.png"}]' data-numberofcolumns='1'></details>

### Multiple data series

A bubble’s color should match the color of a legend marker, indicating a shared category. In bubble charts, color has no inherent meaning or intent other than to keep data organized and easy to interpret. For this reason, avoid using stoplight colors (red, yellow, green) to show that data has a positive or negative value.

Categorical colors are provided in sequence to optimize contrast for accessibility and should not be reordered at implementation.

See [Foundations](/foundations/color/) page for more information on color palettes.

<details data-name='image-block' data-images='[{"alt":"","caption":"In bubble charts with multiple data series, the color of a bubble aligns to a category marker in the legend.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/color3--2-.png"}]' data-numberofcolumns='1'></details>

## Size

The size of a bubble is dictated by its associated z-value. Larger values mean larger bubbles. Smaller values mean smaller bubbles.

There are five available sizes for bubbles. When choosing bubble size, use the same size for similar value ranges. Bubbles with similar values but different sizes make the chart difficult to read.

## Layout

### **Density**

Bubbles with similar x- and y-values may overlap. However, avoid adding more than four categories to the legend, as this will increase the number of bubbles in the chart and increase overlapping. Too many bubbles in the plot area may increase the chart's cognitive load and lead to poor readability.  

### **Alignment**

The grid for a bubble chart will always show horizontal lines by default. Vertical lines can be configured if needed.

In bubble charts with multiple data series, the legend will always appear at the bottom left of the container.

### **Responsive**

Avoid placing too many bubbles in your chart. On smaller screens this may cause readability and accessibility issues.

### **Specifications**

All bubble chart specifications are built into the component. This ensures consistency across products, ease of use, and accessibility.

Altering the component specifications could have negative effects, so this is not recommended.

Bubble size is not fixed, but it should be relative to the z-value. Bubbles with similar values, but different sizes, could result in misunderstanding the data.

<details data-name='image-block' data-images='[{"alt":"Bubble chart specifications","caption":"","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/specs2.png"}]' data-numberofcolumns='1'></details>

## Interaction

#### **Zoom tool**

The zoom tool is useful when trying to discern the values of overlapping or small bubbles. It has a maximum and a minimum expansion, notifying the user when either is reached.

<details data-name='image-block' data-images='[{"alt":"","caption":"Small or overlapping bubbles can obscure data.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/group-3466349.png"},{"alt":"","caption":"Zooming in on small or overlapping bubbles can clarify their data.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/dds2---bubble-chart--1-.png"}]' data-numberofcolumns='2'></details>

#### **Tooltip**

On hover, an expanded data visualization (DV) tooltip appears, showing all three values (x-value, y- value, and z-value) of a bubble.

<details data-name='image-block' data-images='[{"alt":"expanded DV tooltip on bubble chart","caption":" The expanded DV tooltip shows all three values of a bubble.","url":"https://dds.dell.com/site/v2/data-visualization/bubble-chart/group-13471.png"}]' data-numberofcolumns='1'></details>

## Standards

**Text Alternatives**: Provide a text alternative for the bubble chart. This can be a short description in the `alt` attribute and a more detailed description elsewhere on the page. [The detailed description should convey the essential information and relationships depicted in the chart](https://www.w3.org/WAI/tutorials/images/complex/)[1](https://www.w3.org/WAI/tutorials/images/complex/).

**Color Contrast**: Ensure that the colors used in the bubble chart have sufficient contrast. [WCAG 2.2 requires a contrast ratio of at least 4.5:1 for text and images of text](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)[2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html). This helps users with visual impairments distinguish between different elements.

**Use of Color**: Do not rely solely on color to convey information. [Use patterns, shapes, or labels in addition to color to differentiate between data points](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)[2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html).

**Keyboard Accessibility**: Make sure that all interactive elements of the chart, such as tooltips or data points, are accessible via keyboard navigation. [This ensures that users who cannot use a mouse can still interact with the chart](https://www.w3.org/WAI/standards-guidelines/wcag/)[3](https://www.w3.org/WAI/standards-guidelines/wcag/).

**Descriptive Labels**: Provide clear and descriptive labels for all axes, legends, and data points. [This helps users understand the data being presented without needing to interpret the visual elements](https://www.w3.org/WAI/tutorials/images/complex/)[1](https://www.w3.org/WAI/tutorials/images/complex/).

**Responsive Design**: Ensure the chart is responsive and can be easily viewed on different devices and screen sizes. [This includes making sure that text and interactive elements are readable and usable on smaller screens](https://www.w3.org/WAI/standards-guidelines/wcag/)

This demo lets you interact with the bubble chart and view the code. To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla-dv.delldesignsystem.com/?path=/docs/components-bubble--docs)

<details data-name='iframe-doc' data-link='https://vanilla-dv.delldesignsystem.com/iframe.html?args=&id=components-bubble--docs&viewMode=docs&websiteFrame=true'></details>

Bubble Chart