Whatever message this page gives is out now! Go check it out!

Create a bubble chart in ColdFusion

Last update:
May 18, 2026
A bubble chart is a type of data visualization that displays three dimensions of data using bubbles of different sizes. Each bubble represents a data point, with its position on the x-axis and y-axis representing two variables, and the size of the bubble representing a third variable. Sometimes, additional dimensions can be represented by the color or movement of the bubbles.
For example, in a sales analysis, a bubble chart can show market share on the x-axis, sales volume on the y-axis, and year-over-year sales growth as the size of the bubbles. This allows for a visual comparison of multiple variables at once, making it easier to identify patterns and relationships in the data.

Create a bubble chart

<cfchart format="html" type="bubble" showLegend="FALSE" width="800" height="600" title="Bubble chart">
     <cfchartseries>
        <cfchartdata item = "2015" value = 20 >
        <cfchartdata item = "2016" value = 27 >
        <cfchartdata item = "2017" value = 19 >
        <cfchartdata item = "2018" value = 80 >
        <cfchartdata item = "2019" value = 56 >
        <cfchartdata item = "2020" value = 39 >
        <cfchartdata item = "2021" value = 91 >
        <cfchartdata item = "2022" value = 71 >
        <cfchartdata item = "2023" value = 28 >
    </cfchartseries>
</cfchart>
Output
Figure: Bubble chart
Bubble chart
In a bubble chart, you can specify the size of a bubble using the zValue attribute. The value represents a third dimension of data plotted alongside the x and y axis values; the larger the z value, the bigger the bubble will appear on the chart
The default value is 2.
Example
<cfchart format="html" type="bubble" showLegend="FALSE" width="800" height="600" 
title="Bubble chart">
     <cfchartseries>
        <cfchartdata item = "2015" value = 20 zValue=3>
        <cfchartdata item = "2016" value = 27 >
        <cfchartdata item = "2017" value = 19 >
        <cfchartdata item = "2018" value = 80 zValue=4>
        <cfchartdata item = "2019" value = 56 >
        <cfchartdata item = "2020" value = 39 >
        <cfchartdata item = "2021" value = 91 >
        <cfchartdata item = "2022" value = 71 zValue=5>
        <cfchartdata item = "2023" value = 28 zValue=4>
    </cfchartseries>
</cfchart>
Output

Share this page

Was this page helpful?
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Thank you for your feedback. Your response will help improve this page.

On this page