react-vertical-bar-chart
by the Growth Lab at Harvard's Center for International Development
Vertical scrolling bar chart for React.
This package is part of Harvard Growth Lab’s portfolio of software packages, digital products and interactive data visualizations. To browse our entire portfolio, please visit growthlab.app. To learn more about our research, please visit Harvard Growth Lab’s home page.
View live example ↗
Install
npm install --save react-vertical-bar-chartUsage
import React from 'react'
import VerticalBarChart from 'react-vertical-bar-chart';
const App = () => {
...
return (
<VerticalBarChart
data={data}
/>
)
}
export default AppProps
The VerticalBarChart component takes the following props:
-
data:
BarDatum[] -
formatValue (optional):
(value: number) => string | number | React.ReactElement -
axisLabel (optional):
React.ReactElement<any> | string | undefined | null -
onRowHover (optional):
(event: RowHoverEvent) => void -
highlighted (optional):
string -
onHighlightError (optional):
(value: string) => void -
numberOfXAxisTicks (optional):
number -
centerLineValue:
number -
centerLineLabel:
string | number | React.ReactElement -
overMideLineLabel:
string -
underMideLineLabel:
string -
scrollDownText:
string
BarDatum
The BarDatum type is an interface of the following values:
-
id:
string -
title:
string -
value:
number -
color:
string
RowHoverEvent
The RowHoverEvent type is an interface of the following values:
-
datum:
BarDatum[]|undefined -
mouseCoords: {x:
number, y:number}