- Notifications
You must be signed in to change notification settings - Fork3
A lightweight responsive bar chart component for React using SVG
License
NotificationsYou must be signed in to change notification settings
cedricdelpoux/react-svg-bar-chart
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A lightweight responsive bar chart component for React using SVG
You can downloadreact-svg-bar-chart from the NPM registry via thenpm oryarn commands
yarn add react-svg-bar-chartnpm install react-svg-bar-chart --save
If you don't use package manager and you want to includereact-svg-bar-chartdirectly in your html, you could get it from the UNPKG CDN
https://unpkg.com/react-svg-bar-chart/umd/react-svg-bar-chart.js
SeeDemo page
importReactfrom"react"importBarChartfrom"react-svg-bar-chart"constdata=[]for(letx=1;x<=30;x++){data.push({x:x,y:Math.floor(Math.random()*100)})}constMyComponent=()=>(<BarChartdata={data}onHover={this.handlePointHover}/>)
| Name | PropType | Description | Default |
|---|---|---|---|
| areaColor | String | Area color (hex, rgb...) | "#34495e" |
| areaOpacity | Number | Area opacity | .5 |
| areaVisible | Boolean | Area visibility | false |
| axisColor | Number | Axis color | "#34495e" |
| axisOpacity | Number | Axis opacity | .5 |
| axisVisible | Boolean | Axis visibility | true |
| axisWidth | Number | Axis width | 1 |
| barsColor | String | Bars color | "#34495e" |
| barsOpacity | Number | Bars opacity | 1 |
| barsMargin | Number | Bars margin left and right (> 0 && <= 0.5) | 0.1 |
| data | Array of data Objects | data is {x: number, y: number, active: bool}) | [] |
| gridColor | String | Grid color | "#34495e" |
| gridOpacity | Number | Grid color | .5 |
| gridVisible | Boolean | Grid visibility | true |
| gridWidth | Number | Grid width | 1 |
| labelsCharacterWidth | Number | Labels character with (depending on your font) to calculate the width of Y labels | 10 |
| labelsColor | String | Labels color | "#34495e" |
| labelsCountY | Number | Y labels count | 5 |
| labelsFormatX | Function | Custom X labels | x => x |
| labelsFormatY | Function | Custom Y labels | y => y |
| labelsHeightX | Number | X labels height (depending on your font) | 12 |
| labelsOffsetX | Number | X labels offset | 15 |
| labelsOffsetY | Number | Y labels offset | 15 |
| labelsStepX | Number | X labels step | 1 |
| labelsVisible | Number | Labels visibility | true |
| pathWidth | Number | Path width | 1 |
| pointsColor | String | Points color | "#fff" |
| pointsIsHoverOnZone | Boolean | onHover function callback called on zone hover instead of points hover | false |
| onClick | Function | Callback when one bar is click | (point, event) => {} |
| onHover | Function | Callback when one point is hovered | (point, event) => {} |
| pointsRadius | Number | Points radius | 4 |
| pointsStrokeColor | String | Points stroke color | "#34495e" |
| pointsStrokeWidth | Number | Points stroke width | 2 |
| pointsVisible | Boolean | Points visibility | false |
| viewBoxHeight | Number | SVG viewport height | 300 |
| viewBoxWidth | Number | SVG viewport width | 800 |
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, pleasecreate an issue.
- Pull requests must be accompanied by passing automated tests (
npm test).
SeeCONTRIBUTING.md guidelines
Seechangelog
This project is licensed under the MIT License - see theLICENCE.md file for details
About
A lightweight responsive bar chart component for React using SVG
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.