Loading
Source Code
- JavaScript
- HTML
- data.js
import { Chart } from 'singledivui';
import 'singledivui/dist/singledivui.min.css';
import bubbleChartData from './data.js';
const options = {
type: "bubble",
data: {
series: {
points: bubbleChartData
}
}
};
new Chart('#chart-demo', options);
<div id="chart-demo"></div>
export default [{
"x": 2,
"y": 9,
"r": 5
}, {
"x": 6,
"y": 15,
"r": 8
}, {
"x": 5,
"y": 28,
"r": 14
}, {
"x": 8,
"y": 42,
"r": 18
}, {
"x": 15,
"y": 37,
"r": 10
}, {
"x": 15,
"y": 65,
"r": 30
}, {
"x": 18,
"y": 22,
"r": 12
}, {
"x": 25,
"y": 40,
"r": 14
}, {
"x": 30,
"y": 88,
"r": 36
}, {
"x": 35,
"y": 55,
"r": 22
}, {
"x": 42,
"y": 18,
"r": 9
}, {
"x": 42,
"y": 76,
"r": 22
}, {
"x": 48,
"y": 105,
"r": 18
}, {
"x": 60,
"y": 114,
"r": 10
}, {
"x": 50,
"y": 32,
"r": 14
}, {
"x": 58,
"y": 70,
"r": 52
}, {
"x": 65,
"y": 48,
"r": 22
}, {
"x": 68,
"y": 88,
"r": 30
}, {
"x": 78,
"y": 98,
"r": 12
}, {
"x": 75,
"y": 60,
"r": 11
}, {
"x": 85,
"y": 68,
"r": 24
}, {
"x": 80,
"y": 40,
"r": 18
}, {
"x": 88,
"y": 105,
"r": 10
}, {
"x": 95,
"y": 85,
"r": 14
}, {
"x": 98,
"y": 115,
"r": 7
}, {
"x": 81,
"y": 112,
"r": 10
}, {
"x": 95,
"y": 105,
"r": 4
}, {
"x": 92,
"y": 111,
"r": 6
}, {
"x": 98,
"y": 108,
"r": 2
}, {
"x": 86,
"y": 115,
"r": 5
}]