d-grouped-barchart v1.0.7
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
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago