Awesome

d-grouped-barchart

Derby grouped bar chart component using d3 and d3-tip.

Features

Grouping key as a setting
Negative values
Custom on click and on hover tooltips
Legend based on the grouping key
Title and subtitles parameters
Fullscreen mode on double click
Legend and colors customization
Setting space between bars

Usage

Install

npm install d-grouped-barchart

Add component into derby application

app.component require('d-grouped-barchart')

Styles

@import '/node_modules/d-grouped-barchart/styles/index.styl'

Data format

data = [
  {
    "role": "Vet",
    "Pre": 3.7857142857,
    "Post": 4.2857142857
  },
  {
    "role": "Engineer",
    "Pre": -4.7142857143,
    "Post": 4.2142857143
  },
  {
    "role": "Mother",
    "Pre": 5.7142857143,
    "Post": 4.7857142857
  }
  ...
]

Within template

view(name='d-grouped-barchart', data='{{_page.data}}', groupByKey='role', width='500', height='200')

Additional parameters to the component

colors - array, defines color of each bar in group, e.g. ['#4f81bd', '#c0504d']
axisHeaders - array, defines x and y axis header respectively, e.g. ["Groups", "Value"]
header - string, sets a text on top of the chart
subheader - string, defines a text below the header
tipContentClick - callback, returns a string html contents which will be displayed in an onclick tooltip. The tooltips won't work unless the parameter is specified.
tipContentHover - callback, returns a string html contents displayed as an onhover tooltip
innerPadding - space between bars within a group
outerPadding - space between groups of bars
xRange - override X scale's range

Gallery

Alt text