Scatter Plot

Explore relationships between two variables

Beginner

Perfect For

Analyzing correlation between height and weight
Comparing price vs quality ratings
Examining study hours vs test scores

Chart Details

Category: Relationship

Complexity: Beginner

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: 'scatter',
  data: {
    datasets: [{
      label: 'Team A',
      data: [
        {x: 85, y: 78},
        {x: 92, y: 85},
        {x: 88, y: 82},
        {x: 75, y: 70},
        {x: 95, y: 90}
      ],
      backgroundColor: '#8b5cf6',
      borderColor: '#8b5cf6'
    }, {
      label: 'Team B',
      data: [
        {x: 70, y: 65},
        {x: 80, y: 75},
        {x: 65, y: 60},
        {x: 90, y: 88},
        {x: 78, y: 72}
      ],
      backgroundColor: '#06b6d4',
      borderColor: '#06b6d4'
    }, {
      label: 'Team C',
      data: [
        {x: 82, y: 79},
        {x: 76, y: 68},
        {x: 89, y: 86},
        {x: 93, y: 92},
        {x: 87, y: 81}
      ],
      backgroundColor: '#f59e0b',
      borderColor: '#f59e0b'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Performance vs Satisfaction Analysis'
      },
      legend: {
        position: 'top'
      }
    },
    scales: {
      x: {
        type: 'linear',
        position: 'bottom',
        title: {
          display: true,
          text: 'Performance Score'
        },
        min: 60,
        max: 100
      },
      y: {
        title: {
          display: true,
          text: 'Satisfaction Score'
        },
        min: 50,
        max: 100
      }
    },
    elements: {
      point: {
        radius: 6,
        hoverRadius: 8
      }
    }
  }
};

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