mpkelly / react-svg-bar-chart

A lightweight responsive bar chart component for React using SVG

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 --save

If 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.js

Demo

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