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

Namespaces:

  • data.datasets[index] - options for this dataset only
  • options.datasets.scatter - options for all scatter datasets
  • options.elements.line - options for all line elements
  • options.elements.point - options for all point elements
  • options - options for the whole chart

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}