Bar Customization

Loading

Options

Bar size

60%

Bar color

Mode

Color selection

Single colorGradient colorIndividual colors

Start color

End color

Source Code

(Live update based on the above Options change)

JavaScript

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

const options = {
    type: "bar",
    data: {
        labels: ["Bar 1", "Bar 2", "Bar 3", "Bar 4", "Bar 5", "Bar 6"],
        series: {
            points: [14, 9, 23, 18, 31, 27],
            barSize: "60%",
            barColor: "#340AFF, #50E3C2"
        }
    }
};

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

HTML

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