Skip to main content

Label Customization

Loading
Options
X-Axis
Y-Axis
Label Font Size
Label Color
Label Distance

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

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

const options = {
    type: "bar",
    data: {
        labels: ["January", "February", "March", "April", "May", "June"],
        series: {
            points: [15, 9, 25, 18, 31, 25]
        }
    },
    graphSettings: {
        xAxis: {
            labelColor: "#3F51B5",
            labelFontSize: 13,
            labelDistance: 4
        },
        yAxis: {
            labelColor: "#888888",
            labelFontSize: 12,
            labelDistance: 15
        }
    }
};

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