Loading
Source Code
- JavaScript
- HTML
- data.js
import { Chart } from 'singledivui';
import 'singledivui/dist/singledivui.min.css';
import scatterChartData from './data.js';
const options = {
type: "scatter",
data: {
series: {
points: scatterChartData
}
}
};
new Chart('#chart-demo', options);
<div id="chart-demo"></div>
export default [{
"x": 4,
"y": 8
}, {
"x": 8,
"y": 20
}, {
"x": 4,
"y": 18
}, {
"x": 7,
"y": 10
}, {
"x": 9,
"y": 26
}, {
"x": 12,
"y": 14
}, {
"x": 14,
"y": 32
}, {
"x": 18,
"y": 48
}, {
"x": 20,
"y": 30
}, {
"x": 22,
"y": 58
}, {
"x": 24,
"y": 40
}, {
"x": 26,
"y": 66
}, {
"x": 28,
"y": 52
}, {
"x": 30,
"y": 42
}, {
"x": 31,
"y": 68
}, {
"x": 32,
"y": 38
}, {
"x": 33,
"y": 74
}, {
"x": 34,
"y": 72
}, {
"x": 35,
"y": 58
}, {
"x": 36,
"y": 50
}, {
"x": 37,
"y": 86
}, {
"x": 38,
"y": 84
}, {
"x": 39,
"y": 64
}, {
"x": 40,
"y": 60
}, {
"x": 41,
"y": 92
}, {
"x": 42,
"y": 95
}, {
"x": 43,
"y": 56
}, {
"x": 44,
"y": 46
}, {
"x": 45,
"y": 88
}, {
"x": 46,
"y": 78
}, {
"x": 47,
"y": 70
}, {
"x": 48,
"y": 98
}, {
"x": 49,
"y": 62
}, {
"x": 48,
"y": 40
}, {
"x": 51,
"y": 82
}, {
"x": 52,
"y": 88
}, {
"x": 53,
"y": 54
}, {
"x": 54,
"y": 62
}, {
"x": 55,
"y": 102
}, {
"x": 56,
"y": 72
}, {
"x": 57,
"y": 94
}, {
"x": 58,
"y": 44
}, {
"x": 62,
"y": 82
}, {
"x": 64,
"y": 68
}, {
"x": 66,
"y": 110
}, {
"x": 68,
"y": 90
}, {
"x": 70,
"y": 56
}, {
"x": 74,
"y": 120
}, {
"x": 76,
"y": 72
}, {
"x": 78,
"y": 96
}, {
"x": 82,
"y": 112
}, {
"x": 86,
"y": 92
}, {
"x": 83,
"y": 126
}, {
"x": 90,
"y": 78
}, {
"x": 92,
"y": 118
}, {
"x": 95,
"y": 100
}, {
"x": 98,
"y": 130
}, {
"x": 33,
"y": 92
}, {
"x": 37,
"y": 44
}, {
"x": 41,
"y": 78
}, {
"x": 45,
"y": 58
}, {
"x": 49,
"y": 96
}, {
"x": 53,
"y": 36
}, {
"x": 57,
"y": 88
}, {
"x": 61,
"y": 52
}, {
"x": 65,
"y": 102
}, {
"x": 69,
"y": 74
}, {
"x": 73,
"y": 118
}, {
"x": 77,
"y": 64
}, {
"x": 83,
"y": 96
}, {
"x": 87,
"y": 128
}]