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-chart

Usage

import React from 'react'
import VerticalBarChart from 'react-vertical-bar-chart';

const App = () => {

  ...

  return (
    <VerticalBarChart
      data={data}
    />
  )
}

export default App

Props

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}

License

MIT © The President and Fellows of Harvard College