Simple Elegant Bar Chart Library – Bar.js

Category: Chart & Graph , Javascript | March 14, 2018
Views Total:2,094 views
Official Page:Go to website
Last Update:March 14, 2018


Simple Elegant Bar Chart Library – Bar.js


A simple, lightweight JavaScript library to generate a canvas based, fully configurable bar chart (column chart) from an array of data objects defined in the JavaScript.

How to use it:

Create a placeholder element for the generated bar chart.

<div id="chart">This will be our bar chart</div>

Place the JavaScript file ‘bar.js’ at the bottom of the html page.

<script src="bar.js"></script>

Prepare your data to be presented in the bar chart.

var data = [
    {label: 'Jan', value: 1 },
    {label: 'Feb', value: 2},
    {label: 'March', value: 3},
    {label: 'April', value: 4},
    {label: 'May', value: 5},

Generate a bar chart in the placeholder element and done.

// Chart Specifications
var targetId = 'chart';
var canvasWidth = 600;
var canvasHeight = 450;
// Create Chart
var chart = new BarChart(targetId, canvasWidth, canvasHeight, data);

You Might Be Interested In:

Leave a Reply