h2d3.js

Bar chart library based on d3.js

View the example page

Features

• Horizontal and vertical bar charts
• Interactive
• Multiple series
• Long labels (auto-adjusting margin)
• Stacked mode
• Percent stacked mode
• Hide/Show series
• Tooltips (use d3.tip)

Installation

• Include d3.min.js
• For tooltips, include d3.tip.js
• Include h2d3.min.js and add a link to h2d3.min.css

Usage

Create a chart function

var chart = h2d3.chart()
          .width(800).height(400)
          .vertical()//horizontal by default       
          .percentMode(false)//disable percent mode

Assign a element and some data to the chart

chart('#myDiv',data)

Data format

h2d3.js read its data as a list of series

[
  {
    key: "Serie1",
    values: [
      {label:"Group A","value":87},
      {label:"Group B","value":9}
    ]},
  {
    key: "Serie2",
    values: [
      {label:"Group A","value":30},
      {label:"Group B","value":75}
    ]}]

Todolist

• Sort bars based on a serie value