Skip to main content

Graph Customization

Tip

Please refer the Graph samples for more Graph related customizations.

Loading

Source Code

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

const options = {
    type: "line",
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        series: {
            points: [15, 9, 25, 18, 31, 25],
            pointStyle: "circle",
            pointInnerColor: "white",
            pointRadius: 7
        }
    },
    graphSettings: {
        labelFontSize: "15px",
        labelFontFamily: "cursive, Verdana, Arial, sans-serif",
        labelColor: "#000",
        yAxis: {
            axisLineColor: "#ddd",
            labelDistance: 20,
            gridLineSize: 0,
            axisLineSize: 0
        }
    }
};

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