Skip to content

dmapper/d-grouped-barchart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d-grouped-barchart

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

NPM

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 Alt text

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published