Scatter Chart

What is a Scatter Chart ?

  • Profile picture of Mcs
  • by Mcs July 1, 2025

A Scatter Chart (or Scatter Plot) is a type of chart that displays individual data points on a 2D grid, based on two variables — X and Y.

A scatter chart, also known as a scatter plot or scatter diagram, is a type of chart that displays values for typically two variables as a set of points on a two-dimensional coordinate system. The position of each point on the chart represents the values of the two variables for a single data point. Scatter charts are used to visualize relationships between variables and identify patterns, trends, or correlations.

Key Features:

  1. Each point shows a relationship between two values
  2. ood for finding correlations, trends, or clusters
  3. No bars or lines — just dots

Variables:

Scatter charts are used to analyze the relationship between two continuous numerical variables.

Axes:

One variable is plotted on the horizontal (x) axis, and the other is plotted on the vertical (y) axis.

Data Points:

Each data point on the chart represents a pair of values for the two variables.

Uses:

Scatter charts are widely used in various fields, including science, engineering, and business, to:

  1. Explore relationships between variables. 
  2. Identify potential cause-and-effect relationships. 
  3. Analyze trends and patterns in data. 
  4. Detect outliers and anomalies. 
  5. Test hypotheses about relationships between variables. 
  6. Visualize large datasets. 

Patterns and Relationships:

By examining the distribution of points, you can identify: 

  1. Positive Correlation: When one variable increases, the other tends to increase as well. 
  2. Negative Correlation: When one variable increases, the other tends to decrease. 
  3. No Correlation: The points are scattered randomly, with no discernible pattern. 
  4. Clusters: Groups of points that are close together, suggesting a subgroup within the data. 
  5. Outliers: Points that are far away from the main cluster of data, potentially indicating unusual or erroneous data. 

Scatter Chart Example

<canvas id="myScatterChart" width="400" height="300"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
 const ctx = document.getElementById('myScatterChart').getContext('2d');

 const myScatterChart = new Chart(ctx, {
   type: 'scatter',
   data: {
     datasets: [{
       label: 'Student Performance',
       data: [
         { x: 2, y: 40 },
         { x: 3, y: 50 },
         { x: 4, y: 60 },
         { x: 5, y: 75 },
         { x: 6, y: 85 }
       ],
       backgroundColor: 'rgba(75, 192, 192, 0.6)'
     }]
   },
   options: {
     responsive: true,
     scales: {
       x: {
         title: { display: true, text: 'Hours Studied' },
         beginAtZero: true
       },
       y: {
         title: { display: true, text: 'Test Score' },
         beginAtZero: true
       }
     }
   }
 });
</script>

Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol type start> <strong> <em> <code> <li>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.