react-svg-bar-chart
A lightweight responsive bar chart component for React using SVG
Getting started
You can download react-svg-bar-chart from the NPM registry via the npm or
yarn commands
yarn add react-svg-bar-chart
npm install react-svg-bar-chart --saveIf you don't use package manager and you want to include react-svg-bar-chart
directly in your html, you could get it from the UNPKG CDN
https://unpkg.com/react-svg-bar-chart/umd/react-svg-bar-chart.jsDemo
See Demo page
Usage
import React from "react"
import BarChart from "react-svg-bar-chart"
const data = []
for (let x = 1; x <= 30; x++) {
data.push({x: x, y: Math.floor(Math.random() * 100)})
}
const MyComponent = () => (
<BarChart data={data} onHover={this.handlePointHover} />
)Props
| 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 |
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests (
npm test).
See CONTRIBUTING.md guidelines
Changelog
See changelog
License
This project is licensed under the MIT License - see the LICENCE.md file for details