Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmapper/d-grouped-barchart
https://github.com/dmapper/d-grouped-barchart
Last synced: about 8 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/dmapper/d-grouped-barchart
- Owner: dmapper
- Created: 2014-08-14T13:46:33.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-03-28T09:12:46.000Z (over 8 years ago)
- Last Synced: 2024-09-18T14:51:27.246Z (about 2 months ago)
- Language: JavaScript
- Size: 164 KB
- Stars: 5
- Watchers: 13
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-derby - d-grouped-barchart - Derby grouped bar chart component using d3 and d3-tip. (Components)
README
d-grouped-barchart
==================
Derby grouped bar chart component using d3 and d3-tip.
[](https://nodei.co/npm/d-grouped-barchart/)
## 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
```coffee
app.component require('d-grouped-barchart')
```
#### Styles
```
@import '/node_modules/d-grouped-barchart/styles/index.styl'
```
#### Data format
```coffee
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
```jade
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
