Minimal Canvas Based Column Chart Library – bar-js

Preview:

Description:

A simple, elegant, customizable chart library that helps you dynamically render canvas based column/bar charts on the page.

How to use it:

Create a container element for the bar chart.

<div id="chart" bar chart here</div>

Place the JavaScript file bar.js right before the closing body tag.

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

Define the chart data in the JavaScript.

// Chart Data
var data = [
    {label: 'Jan', value: 1},
    {label: 'Feb', value: 2},
    {label: 'March', value: 3},
    {label: 'April', value: 4},
    {label: 'May', value: 5)}
];

Config the bar chart.

var targetId = 'chart';
var canvasWidth = 600;
var canvasHeight = 450;

Render the bar chart on your web page.

var chart = new BarChart(targetId, canvasWidth, canvasHeight, data);