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: "bar",
    data: {
        labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
        series: {
            points: [3, 8, 14, 20, 25, 28, 27, 23, 17, 10, 6]
        }
    },
    graphSettings: {
        labelFontSize: "15px",
        labelFontFamily: "cursive, Verdana, Arial, sans-serif",
        labelColor: "#000",
        xAxis: {
            verticalLabel: true
        },
        yAxis: {
            labelDistance: 14,
            gridLineSize: 0,
            axisLineSize: 0
        }
    }
};

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