Author: | Rabindra-pandey |
---|---|
Views Total: | 2,460 views |
Official Page: | Go to website |
Last Update: | December 17, 2019 |
License: | MIT |
Preview:

Description:
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"> </canvas>
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.
generateBarGraph({ barId: 'myCanvas', barData: data, barColour: barcolor });
6. Full options to customize the column chart.
generateBarGraph({ // 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 });