1.1.0 • Public • Published


npm package Travis Codecov Module formats

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


See Demo page


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


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, please create an issue.
  • Pull requests must be accompanied by passing automated tests (npm test).

See guidelines


See changelog


This project is licensed under the MIT License - see the file for details

Package Sidebar


npm i react-svg-bar-chart

Weekly Downloads






Unpacked Size

205 kB

Total Files


Last publish


  • cedricdelpoux