Chart.js Scatter Plot

A scatter plot is composed of multiple coordinate points formed by two sets of data. It examines the distribution of these points to determine if there is any correlation between the two variables or to summarize the pattern of the point distribution.

Data Structure:

data: [{
        x: 10,
        y: 20
    }, {
        x: 15,
        y: 10
    }]

The scatter plot type property is scatter.

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};

Next, we will create a simple scatter plot:

Example

const ctx = document.getElementById('myChart');
const data = {
  datasets: [{
    label: 'Scatter Plot Example',
    data: [{
      x: -10,
      y: 0
    }, {
      x: 0,
      y: 10
    }, {
      x: 10,
      y: 5
    }, {
      x: 0.5,
      y: 5.5
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true, // Set the chart to be responsive, changing according to the screen window
    maintainAspectRatio: false, // Maintain the original aspect ratio of the chart
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};
const myChart = new Chart(ctx, config);

The above example outputs the following result: