Scatter Customization

Loading

Options

Scatter radius

8

Scatter color

---

Scatter shape

Source Code

(Live update based on the above Options change)

JavaScript

import { Chart } from 'singledivui';
import 'singledivui/dist/singledivui.min.css';
import scatterChartData from './data.js';

const options = {
    type: "scatter",
    data: {
        series: {
            points: scatterChartData,
            scatterColor: "#43a047",
            scatterRadius: 8,
            scatterShape: "triangle"
        }
    }
};

new Chart('#chart-demo', options);

HTML

<div id="chart-demo"></div>

data.js

 export default [{
    "x": 4,
    "y": 18
}, {
    "x": 7,
    "y": 10
}, {
    "x": 10,
    "y": 24
}, {
    "x": 13,
    "y": 16
}, {
    "x": 16,
    "y": 30
}, {
    "x": 20,
    "y": 48
}, {
    "x": 23,
    "y": 36
}, {
    "x": 26,
    "y": 58
}, {
    "x": 29,
    "y": 44
}, {
    "x": 33,
    "y": 72
}, {
    "x": 36,
    "y": 52
}, {
    "x": 39,
    "y": 84
}, {
    "x": 42,
    "y": 60
}, {
    "x": 45,
    "y": 92
}, {
    "x": 49,
    "y": 48
}, {
    "x": 52,
    "y": 102
}, {
    "x": 55,
    "y": 66
}, {
    "x": 58,
    "y": 88
}, {
    "x": 62,
    "y": 74
}, {
    "x": 66,
    "y": 112
}, {
    "x": 70,
    "y": 58
}, {
    "x": 74,
    "y": 120
}, {
    "x": 78,
    "y": 82
}, {
    "x": 82,
    "y": 96
}, {
    "x": 86,
    "y": 72
}, {
    "x": 90,
    "y": 126
}, {
    "x": 94,
    "y": 104
}, {
    "x": 98,
    "y": 118
}]