Minimal Bar/Columns Chart With JavaScript And Canvas – bar-js

Preview:

Description:

bar-js is a small, flexible, dynamic JavaScript chart plugin to draw minimal clean bar & column charts on a canvas element.

How to use it:

Create a DIV container to hold the chart.

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

Download and insert the JavaScript bar.js into the document.

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

Define the data to be plotted in the bar chart.

var data = [
    {label: 'JavaScript', value: 89},
    {label: 'HTML5', value: 95},
    {label: 'CSS/CSS3', value: 90},
    {label: 'Angular', value: 85},
    {label: 'React', value: 30}
];

Render a bar/column chart on the page.

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