Skip to main content

Axis & Grid Lines Customization

Loading
Options
X-Axis
Y-Axis
Axis Line size
Axis Line Color
Grid Line size
Grid Line Color

Source Code
(Live update based on the above Options change)

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

const options = {
    type: "line",
    data: {
        labels: ["January", "February", "March", "April", "May", "June"],
        series: {
            points: [15, 9, 25, 18, 31, 25]
        }
    },
    graphSettings: {
        xAxis: {
            axisLineSize: 3,
            gridLineSize: 1,
            axisLineColor: "#ccc",
            gridLineColor: "#ddd"
        },
        yAxis: {
            axisLineSize: 0,
            gridLineSize: 0,
            axisLineColor: "#ccc",
            gridLineColor: "#ddd"
        }
    }
};

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