Tiny Animated Column Chart In Pure JavaScript – rbar.js

Category: Chart & Graph , Javascript | December 17, 2019
Author: Rabindra-pandey
Views Total: 1,417 views
Official Page: Go to website
Last Update: December 17, 2019
License: MIT


Tiny Animated Column Chart In Pure JavaScript – rbar.js


rbar.js is a tiny JavaScript bar chart plugin to render animated, highly customizable column chart with labels & scales using plain JavaScript and HTML5 canvas.

How to use it:

1. Import the rbar.js library into the document.

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

2. Create an HTML canvas on which you want to draw the column chart.

<canvas id="myCanvas">

3. Define your data in an array of JS objects containing key/value pairs.

var data = [
    {'Product 1': 90}, 
    {'Product 2': 80}, 
    {'Product 3': 65}, 
    {'Product 4': 110}, 
    {'Product 5': 55}

4. Set the background color for each column as follows. OPTIONAL.

var barcolor = ['#5c5fff', '#bb48e6', '#f12bc3', ...];

5. Render a basic column chart on the canvas element. That’s it.

  barId: 'myCanvas',
  barData: data,
  barColour: barcolor

6. Full options to customize the column chart.


  // canvas ID
  barId: 'rbar', 

  // chart data
  barData: data, 

  // background color
  barColour: '#020202',

  // stroke width
  barStroke: 50, 

  // space between columns
  barSpaces: 80,

  // column padding
  barInnerPadding: 80,

  // X-Axis division position from left side of the bar chart
  barDivisionPositionFromLineX: 20,

  // Y-Axis division position from bottom side of the bar chart
  barDivisionPositionFromLineY: 20, 

  // enable animation
  barAnimation: true,

  // animation speed
  barAnimationSpeed: 1, 

  // font property
  barTextFont: "14px Arial", 

  // division to the Y-Axis
  barDivision: 5,

  // scale division marking to the X-Axis
  barScaleDivisionReqX: true, 

  // scale division marking to the Y-Axis
  barScaleDivisionReqY: true,

  // manually setup the Y-Axis division upto the highest value of your array
  barScaleDivisionY: null

  // stroke of scale division
  barScaleDivisionStroke: 1, 

  // stroke colour of the scale division
  barScaleDivisionColour: '#333', 

  // stroke of the X & Y-Axis line
  barAxisLineStroke: 1, 

  // stroke colour of the X & Y-axis line
  barAxisLineColour: '#333', 

  // max height in pixels
  barMaxHeight: 120

You Might Be Interested In:

Leave a Reply