ChartForge

ChartForge

Charts
Theme
Log in Register

Bubble Chart

Three-dimensional scatter plots where bubble size represents the third dimension

3D Visualization Correlation Analysis Portfolio Analysis

Interactive Bubble Chart Demo

Explore Bubble chart features with live customization

5px 8px 20px
30px 50px 80px
30% 70% 100%
Syncs with app theme
500ms 1500ms 3000ms

Key Features

Three-Dimensional Data

Visualize X, Y, and Z variables where bubble size represents the third dimension

Customizable Design

Choose from default, modern, minimalistic, cyberpunk, professional, or custom designs; when using custom design, configure background color, text color, grid color, border color, font family, font weight, font size, border radius, shadow blur, and shadow offset

Multi-Series Support

Display multiple data series with distinct colors and legends

Interactive Tooltips

Hover over bubbles for detailed X, Y, and Z information

Dark Mode Support

Seamlessly toggle between light and dark themes

Perfect For

Portfolio Analysis

Risk vs Return vs Volume analysis for investment portfolios

Market Research

Price vs Quality vs Market Share comparisons

Performance Metrics

Employee performance: productivity vs experience vs team size

Scientific Data

Multi-variable scientific research and correlation studies

Configuration Options

Option Type Default Description
design string default Chart design preset ('default', 'modern', 'minimalistic', 'cyberpunk', 'professional', 'custom')
background string transparent Background color or gradient when design is custom (e.g., #hex, transparent, linear-gradient(...))
textColor string #111827 Text color when design is custom (e.g., #hex)
gridColor string #E5E7EB Grid line color when design is custom (e.g., #hex)
borderColor string #D1D5DB Border color when design is custom (e.g., #hex)
borderRadius number 8 Border radius in pixels when design is custom (0-20)
shadowBlur number 10 Shadow blur radius in pixels when design is custom (0-30)
shadowOffset number 2 Shadow offset in pixels when design is custom (0-10)
fontSize number 12 Font size in pixels when design is custom (8-18)
fontFamily string Inter, system-ui, sans-serif Font family when design is custom (e.g., Inter, system-ui, sans-serif)
fontWeight string normal Font weight when design is custom (normal, 500, 600, bold)
customColor boolean false Enable custom colors for bubbles (specified in data objects)
minBubbleRadius number 8 Minimum bubble radius in pixels (5-20)
maxBubbleRadius number 50 Maximum bubble radius in pixels (30-80)
bubbleOpacity number 0.7 Bubble transparency (0.3-1.0)
showGrid boolean true Show background grid lines
showLabels boolean true Show axis labels and titles
showTooltip boolean true Show tooltips on hover
multiSeries boolean false Enable multiple data series for bubbles
animations boolean true Enable bubble animations
animationDuration number 1500 Animation duration in milliseconds (500-3000)
glowEffect boolean false Enable glow effect on bubbles

Data Format

Single Series

bubbleChart.setData([
                    { x: 8.5, y: 12.3, z: 85, name: 'Stock A', color: '#8B5CF6' },
                    { x: 5.2, y: 8.1, z: 120, name: 'Stock B', color: '#10B981' },
                    { x: 2.8, y: 4.5, z: 210, name: 'Stock C', color: '#F59E0B' },
                    { x: 12.1, y: 18.7, z: 45, name: 'Stock D', color: '#EF4444' }
                ]);

Multi-Series

bubbleChart.setData([
                    {
                        name: 'Tech Sector',
                        color: '#8B5CF6',
                        data: [
                            { x: 85, y: 120, z: 250, name: 'TechCorp' },
                            { x: 90, y: 150, z: 180, name: 'InnovateTech' },
                            { x: 78, y: 140, z: 320, name: 'DataSoft' }
                        ]
                    },
                    {
                        name: 'Healthcare',
                        color: '#10B981',
                        data: [
                            { x: 70, y: 110, z: 200, name: 'MedLife' },
                            { x: 82, y: 130, z: 150, name: 'HealthPlus' },
                            { x: 75, y: 125, z: 280, name: 'BioCare' }
                        ]
                    }
                ]);

Data Structure

Single series requires x, y, and z for each bubble, with optional name and color when customColor: true. Multi-series (when multiSeries: true) groups data by series with a name and color.

Ready to Visualize Multi-Dimensional Data?

Download ChartForge and start creating beautiful bubble charts

Download Full Library 200KB

Or download individual components:

Core Library Bubble Component

📊 Perfect for: Portfolio analysis, market research, performance metrics, and scientific data visualization

Previous: Candlestick Chart Next: Treemap Chart