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 3 points.

  1. var scatterChart = new Chart(ctx, {
  2. type: 'scatter',
  3. data: {
  4. datasets: [{
  5. label: 'Scatter Dataset',
  6. data: [{
  7. x: -10,
  8. y: 0
  9. }, {
  10. x: 0,
  11. y: 10
  12. }, {
  13. x: 10,
  14. y: 5
  15. }]
  16. }]
  17. },
  18. options: {
  19. scales: {
  20. xAxes: [{
  21. type: 'linear',
  22. position: 'bottom'
  23. }]
  24. }
  25. }
  26. });

Dataset Properties

The scatter chart supports all of the same properties as the line chart.

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. }]