An awesome jQuery plugin to create animated bar chart based on SVG and D3.js
library. The plugin offers to create responsive, cross browser and attractive bar charts.
Plugin Preview
How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
Plugin Overview
Plugin: | Animated bar chart |
Author: | NiDev |
Licence: | MIT Licence |
Published: | January 18, 2024 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 2.3.1 or Latest version and D3.js |
File Type: | zip archive (HTML, CSS, JavaScript, Images & MD File) |
Package Size: | 146 KB |
How to Use Animated Bar Chart:
1. To getting started with jquery animated bar chart, first of all, load the jQuery (JavaScript library) and D3 Js
into HTML document.
<!-- jQuery --> <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script> <!-- D3 Js --> <script src='https://d3js.org/d3.v4.min.js'></script>
2. After that, include the animated bar chart’s CSS and JavaScript files into your page.
<!-- Chart CSS --> <link rel="stylesheet" href="dist/bar.chart.min.css" /> <!-- Chart Js --> <script src="dist/jquery.bar.chart.min.js"></script>
3. Now, create a div
element in which you want to load / build chart.
<div id="chtAnimatedBarChart" class="bcBar"></div>
4. Then, create data for chart in JavaScript’s objects like below and store them in an array.
var chart_data = [ { "group_name": "Google", "name": "Jan", "value": 26037 }, { "group_name": "Google", "name": "Feb", "value": 8597 }, { "group_name": "Apple", "name": "Jan", "value": 33102 }, { "group_name": "Apple", "name": "Feb", "value": 43426 }, ... ]
5. Now its time to initialize the plugin in jQuery document ready function / anonymous function.
$(function() { var chart_data = [ { "group_name": "Google", "name": "Jan", "value": 26037 }, { "group_name": "Google", "name": "Feb", "value": 8597 }, { "group_name": "Apple", "name": "Jan", "value": 33102 }, { "group_name": "Apple", "name": "Feb", "value": 43426 }, ... ] $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data }); });
Advance Configuration Options for Animated Bar Chart
The following are some advance configuration options to create / customize animated bar chart.
chart_height |
Define the height of the chart in pixels. Default: 400, type: number
$('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, chart_height: 300 }); |
colors |
This option define the colors for bars of the chart. 10+ colors are predefined in CSS that are used for different groups. You can override this setting by defining your own colors. Default: null, type: array. $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, colors: ['red', 'blue', 'lime', ...] or ['#f44242', '#0048ff', '#04ff00', ...] }); |
show_legend |
Show / hide Chart legend that automatically generated below chart with your group_name values. Default: true, type: bool $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, show_legend: false }); |
x_grid_lines |
Show / hide horizontal grid lines. Default: true, type: bool $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, x_grid_lines: false }); |
y_grid_lines |
Show / hide vertical grid lines. Default: true, type: bool $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, y_grid_lines: false }); |
tweenDuration |
Speed of bar animation in milliseconds. Default: 300, type: int $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, tweenDuration: 500 }); |
bars |
This is an object option that contains properties for bars. $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, bars: { padding: 0.075, //efault bar group padding - type: number opacity: 0.7, //default bar opacity - type: number opacity_hover: 0.45, //default bar opacity on mouse hover - type: number disable_hover: false, //disable details on mouse hover - type: bool hover_name_text: 'name', //text for x axis value in details - type: string hover_value_text: 'value' //text for y axis value in details - type: string } }); |
number_format |
This is an object option that contains properties for numbers. $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, number_format: { format: ',.2f', // default chart number format - type: string decimal: '.', // default symbol for the decimal separator - type: number thousands: ',', // default symbol for the thousands separator - type: number grouping: [3], // default character grouping - type: object currency: ['$'] // default currency symbol - type: object } }); |
margin |
This is an object option that contains properties for chart margin. $('#chtAnimatedBarChart').animatedBarChart({ data: chart_data, margin: { top: 0, // default chart top margin - type: number right: 35, // default chart right margin - type: number bottom: 30, // default chart bottom margin - type: number left: 70 // default chart left margin - type: number } }); |
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.