Bootstrap and jQuery bar charts – jchart plugin

A lightweight Bootstrap and jQuery bar charts plugin, to render clean bar charts with raw data specified in JS arrays.

jQuery bar charts plugin

jQuery charting plugin – jchart – is a nice and easy to use bar chart solution for web. It works with Bootstrap 3 to provide tooltip support on mouse hover. Requires jQuery 1.9+ and Bootstrap 3.0.x.

The plugin will allows us to create a bar chart with raw data, either specified in a Javascript array, or in plain old HTML with some specific classes and attributes.

jchart - Bootstrap and jQuery bar charts samples
jchart – Bootstrap and jQuery bar charts samples


We can create a basic bar chart on an HTML element by calling .jChart() function, for example:

  name: "North American Regional Population Loss",
  headers: ["Arizona","Michigan","Ontario","NY","Texas"],
  values: [250000,478000,88000,429000,423000],
  footers: [100000,200000,300000,400000,500000],
  colors: ["#1000ff","#006eff","#00b6ff","#00fff6","#00ff90"]

We need the HTML element, to put the chart on it:

<div id="population_chart"></div>

There is another way to use this charting plugin. We can do it using HTML5 data attributes.

An example:

<div id="bar_of_pies" data-sort="true" data-width="300" 
  class="jChart chart-sm" name="My Favorite Pies">

  <div class="define-chart-row" data-color="red" 
  <div class="define-chart-row" data-color="gray" 
  <div class="define-chart-row" data-color="green" 
  <div class="define-chart-row" data-color="orange" 
  <div class="define-chart-row" data-color="black" 
  <div class="define-chart-row" data-color="blue" 

  <div class="define-chart-footer">10</div>
  <div class="define-chart-footer">20</div>
  <div class="define-chart-footer">30</div>

And then make a simple JavaScript call:


The detailed description of parameters you can find in plugin docs.

License: MIT

Demo and docs:


See also:

CanvasJS – HTML5 JavaScript charts – nice and responsive

Responsive charts jQuery plugin – Pizza JS

Chart.js – open source HTML5 Charts

Animated circular progress bars with jQuery