react-comparison-bar-chart

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

License

MIT © The President and Fellows of Harvard College