Simple Elegant Bar Chart Library – Bar.js

Preview:

Description:

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);