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.
npm install --save react-comparison-bar-chartimport React from 'react'
import ComparisonBarChart from 'react-comparison-bar-chart';
const App = () => {
...
return (
<ComparisonBarChart
primaryData={primaryDataset}
secondaryData={secondaryDataset}
nValuesToShow={10}
/>
)
}
export default AppThe 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
The BarDatum type is an interface of the following values:
- id:
string - title:
string - value:
number - color:
string
The RowHoverEvent type is an interface of the following values:
- datum:
BarDatum[]|undefined - mouseCoords: {x:
number, y:number}
The Layout type is an enum with the following values:
- Layout.Left =
left - Layout.Right =
right