Chart.js Scatter Chart

A scatter chart is made up of multiple coordinate points formed by two sets of data. By examining the distribution of the coordinate points, it determines whether there is some correlation between the two variables or summarizes the distribution pattern of the coordinate points.

Data structure:

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

Scatter CharttypeThe attribute isscatter。

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

Next, let's create a simple scatter chart:

Example

const ctx = document.getElementById('myChart');
const data = {
  datasets: [{
    label: 'Scatter Chart 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,// Keep the chart's original aspect ratio
    scales: {
      x: {
        type: 'linear',
        position: 'bottom'
      }
    }
  }
};
const myChart = new Chart(ctx, config);

Try it »

The output result of the above example is:

Other Extensions