Scatter Chart

Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.

Scatter Chart - 图1

config setup

  1. const config = {
  2.   type: 'scatter',
  3.   data: data,
  4.   options: {
  5.     scales: {
  6.       x: {
  7.         type: 'linear',
  8.         position: 'bottom'
  9.       }
  10.     }
  11.   }
  12. };
  1. const data = {
  2.   datasets: [{
  3.     label: 'Scatter Dataset',
  4.     data: [{
  5.       x: -10,
  6.       y: 0
  7.     }, {
  8.       x: 0,
  9.       y: 10
  10.     }, {
  11.       x: 10,
  12.       y: 5
  13.     }, {
  14.       x: 0.5,
  15.       y: 5.5
  16.     }],
  17.     backgroundColor: 'rgb(255, 99, 132)'
  18.   }],
  19. };

Dataset Properties

The scatter chart supports all of the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.

The index scale is of the type linear. This means if you are using the labels array the values have to be numbers or parsable to numbers, the same applies to the object format for the keys.

Data Structure

Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.

  1. data: [{
  2.         x: 10,
  3.         y: 20
  4.     }, {
  5.         x: 15,
  6.         y: 10
  7.     }]

Internal data format

{x, y}