mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
73 lines
1.5 KiB
Markdown
73 lines
1.5 KiB
Markdown
# 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.
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const data = {
|
|
datasets: [{
|
|
label: 'Scatter Dataset',
|
|
data: [{
|
|
x: -10,
|
|
y: 0
|
|
}, {
|
|
x: 0,
|
|
y: 10
|
|
}, {
|
|
x: 10,
|
|
y: 5
|
|
}, {
|
|
x: 0.5,
|
|
y: 5.5
|
|
}],
|
|
backgroundColor: 'rgb(255, 99, 132)'
|
|
}],
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'scatter',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
type: 'linear',
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
## Dataset Properties
|
|
|
|
The scatter chart supports all of the same properties as the [line chart](./charts/line.md#dataset-properties).
|
|
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.
|
|
|
|
```javascript
|
|
data: [{
|
|
x: 10,
|
|
y: 20
|
|
}, {
|
|
x: 15,
|
|
y: 10
|
|
}]
|
|
```
|
|
|
|
## Internal data format
|
|
|
|
`{x, y}`
|