Bubble Chart

Three-dimensional scatter plot with size encoding

Intermediate

Perfect For

Market analysis with multiple variables
Portfolio risk vs return visualization
Multi-dimensional data exploration

Chart Details

Category: Relationship

Complexity: Intermediate

Best Practice: Use clear labels and appropriate colors

Interactive Chart Preview

Chart.js Implementation

Interactive JavaScript charting library with great performance

Live Preview

Implementation Code

Chart.js Code ExampleSynced

Chart.js

Auto-sync

const config = {
  type: 'bubble',
  data: {
    datasets: [{
      label: 'Technology Companies',
      data: [
        { x: 20, y: 30, r: 15, company: 'Company A' },
        { x: 40, y: 10, r: 10, company: 'Company B' },
        { x: 30, y: 40, r: 20, company: 'Company C' },
        { x: 60, y: 35, r: 12, company: 'Company D' },
        { x: 50, y: 25, r: 18, company: 'Company E' },
        { x: 35, y: 15, r: 8, company: 'Company F' },
        { x: 25, y: 50, r: 22, company: 'Company G' }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 205, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(199, 199, 199, 0.6)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 205, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
        'rgba(199, 199, 199, 1)'
      ],
      borderWidth: 2
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Company Performance Analysis'
      },
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${context.raw.company}: Revenue $${context.parsed.x}B, Growth ${context.parsed.y}%, Employees ${context.raw.r * 1000}`;
          }
        }
      }
    },
    scales: {
      x: {
        display: true,
        title: {
          display: true,
          text: 'Revenue (Billions $)'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Growth Rate (%)'
        }
      }
    }
  }
};

The code example is automatically synced with the selected visualization library above. You can still manually select different code examples using the buttons.