react-comparison-bar-chart
v1.2.2
Published
Vertical comparison bar chart component for comparing the difference in values between two datasets.
Downloads
20
Readme
react-comparison-bar-chart
by the Growth Lab at Harvard's Center for International Development
Vertical comparison bar chart component for comparing the difference in values between two datasets.
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-comparison-bar-chart
Usage
import React from 'react'
import ComparisonBarChart from 'react-comparison-bar-chart';
const App = () => {
...
return (
<ComparisonBarChart
primaryData={primaryDataset}
secondaryData={secondaryDataset}
nValuesToShow={10}
/>
)
}
export default App
Props
The ComparisonBarChart component takes the following props:
- primaryData:
BarDatum[]
- secondaryData:
BarDatum[]
- nValuesToShow:
number
- formatValue (optional):
(value: number, direction: Direction) => string | number | React.ReactNode
- titles (optional):
- primary:
string
\ - secondary:
string
\ - secondary (optional):
(label: string, count: number, max: number) => string
\
- primary:
- expandCollapseText (optional): { toExpand:
string
, toCollapse:string
} - axisLabel (optional):
string
- onRowHover (optional):
(event: RowHoverEvent) => void
- hideExpandCollapseButton (optional):
boolean
- initialExpanded (optional):
boolean
- layout (optional):
Layout
- highlighted (optional):
string
- onExpandCollapseButtonHover (optional):
(event: React.MouseEvent<HTMLElement>) => void
- onHighlightError (optional):
(value: string) => void
- numberOfXAxisTicks (optional):
number
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
}
Layout
The Layout type is an enum with the following values:
- Layout.Left =
left
- Layout.Right =
right