Interactive Bar/Column Chart Plugin With jQuery And D3.js

An animated, interactive, dynamic, configurable, fully responsive bar/column chart plugin built using jQuery and D3.js.

More features:

• Dynamic data rendering.
• Shows/hides legends.
• Shows/hides grid lines.
• Custom number format.
• Filterable data.
• Shows details on hover.
• Smooth transitions.
• Supports both horizontal and vertical bars.

How to use it:

1. Include the latest version of jQuery and D3 libraries on the page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/d3.min.js"></script>

2. Include the jQuery Animated Bar Chart plugin files from the dist folder.

<link rel="stylesheet" href="/dist/bar.chart.min.css" />
<script src="/dist/jquery.bar.chart.min.js"></script>

3. Create a container in which the chart will be rendered.

<div id="chtAnimatedBarChart" class="example"></div>

4. Define your chart data in an array of JS objects as follows:

const myData = [
      { "group_name": "Google", "name": "Jan", "value": 38367 },
      { "group_name": "Apple", "name": "Jan", "value": 28827 },
      { "group_name": "Microsoft", "name": "Jan", "value": 38674 },
      { "group_name": "Samsung", "name": "Jan", "value": 40110 }
]

5. Initialize the plugin to generate a default bar/column chart.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData
});

6. Customize the columns from the data array for rendering the chart.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,
  params: {
    group_name: 'group_name', // title for group name to be shown in legend
    name: 'name', // name for xaxis
    value: 'value' // value for yaxis
   }
});

7. Customize the appearance of the chart.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,

  // default chart height in px
  chart_height: 400, 

  // enables horizontal bars 
  horizontal_bars: false,

  // colors for chart
  colors: null, 

  // show chart legend
  show_legend: true, 

  // show x grid lines
  x_grid_lines: true, 

  // show y grid lines
  y_grid_lines: true, 

  // speed for tranistions
  tweenDuration: 300, 

  // default bar settings
  bars: { 
    padding: 0.075, // padding between bars
    opacity: 0.7, // default bar opacity
    opacity_hover: 0.45, // default bar opacity on mouse hover
    disable_hover: false, // disable animation and legend on hover
    hover_name_text: 'name', // text for name column for label displayed on bar hover
    hover_value_text: 'value', // text for value column for label displayed on bar hover
  },

  // margins for chart rendering
  margin: { 
    top: 0, // top margin
    right: 35, // right margin
    bottom: 20, // bottom margin
    left: 70 // left margin
  },

  // rotate xaxis label params
  rotate_x_axis_labels: { 
    process: true, // process xaxis label rotation
    minimun_resolution: 720, // minimun_resolution for label rotating
    bottom_margin: 15, // bottom margin for label rotation
    rotating_angle: 90, // angle for rotation,
    x_position: 9, // label x position after rotation
    y_position: -3 // label y position after rotation
  }
  
});

8. Customize the number format.

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,

  number_format: {
    format: ',.2f', // default number format
    decimal: '.', // decimal symbol
    thousands : ',', // thousand separator symbol
    grouping: [3], // thousand separator grouping
    currency: ['$'] // currency symbol
   }

});

9. Customize the legends

$('#chtAnimatedBarChart').animatedBarChart({ 
  data: myData,

  legend: {
    position: LegendPosition.bottom, // legend position (bottom/top/right/left)
    width: 200 // legend width in pixels for left/right
  }
});

10. Update the chart with new data.

instance.updateChart({ 
  data: new_chart_data 
});

Changelog:

v1.2 (2019-04-04)

• Set legend position (option: legend: { position: LegendPosition.right, width: 200 }), look at right legend example (examples/right_legend_example.html),
• Add resposive styles for the legend,
• Bug Fixes.

2019-04-02

• Added horizontal bar

---

This awesome jQuery plugin is developed by vnidev. For more Advanced Usages, please check the demo page or visit the official website.