React-fast-charts NPM

react-fast-charts

by the Growth Lab at Harvard's Center for International Development

react-fast-charts utilizes the power of D3 to quickly create powerful, customizable charts in React. It is an opinionated library that was built for the Harvard Growth Lab Digital Hub in order to build reusable data visualizations across a broad spectrum of use cases.

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 The Viz Hub at growthlab.app. To learn more about our research, please visit Harvard Growth Lab’s home page.

View live examples ↗

Install

npm install --save react-fast-charts

Usage

Data Visualizations

The primary component exported is the DataViz component. It is a single component that takes a number of configurable props to create any of the visualizations supported in this library. All DataViz components takes in a 2 required props and a handful of optional props. Additionally, depending on the vizType specified, a number of other optional and required props will be taken.

import DataViz, {VizType} from 'react-fast-charts';

...

const App = () => {
  return (
    <DataViz
      id={'example-data-viz'}
      vizType={VizType.LineChart}
      data={data}
    />
  );
};

Required base properties:

id: string A unique id for the visualization.
vizType: VizType | string The string name for the type of visualization being rendered. Can also export the VizType enum from the module from proper type restrictions of available visualization types

enum VizType {
  ScatterPlot = 'ScatterPlot',
  BarChart = 'BarChart',
  ClusterBarChart = 'ClusterBarChart',
  RadarChart = 'RadarChart',
  GeoMap = 'GeoMap',
  LineChart = 'LineChart',
  TreeMap = 'TreeMap',
  StackChart = 'StackChart',
  ClusterChart = 'ClusterChart',
  BoxAndWhiskersChart = 'BoxAndWhiskersChart',
  Error = 'Error',
}

Optional base properties:

jsonToDownload (optional): object[] Displays 'Download Data' button under the visualization and allows the user to download the given data as a CSV
enablePNGDownload (optional): boolean Displays 'Download PNG' button under the visualization and allows the user to download the given visualization as a PNG
enableSVGDownload (optional): boolean Displays 'Download SVG' button under the visualization and allows the user to download the given visualization as a SVG
triggerPNGDownload (optional): (success: boolean) => void If a callback is provided, a PNG download will be triggered and then the callback will be fired. This will continue until the value is undefined.
triggerSVGDownload (optional): (success: boolean) => void If a callback is provided, a SVG download will be triggered and then the callback will be fired. This will continue until the value is undefined.
chartTitle (optional): string The optional chart title is used only if one of the above download features is enabled. The chart title replaces the generic text used for the file name if the user downloads an image or csv.
chartCaption (optional): string Places a caption under the chart
rootStyles (optional): React.CSSProperties Define any custom style overrides for the root containing div of the visualization
height (optional): number | string Define an optional height to override the default sizing of the chart (default: 450px)
labelFont (optional): string Define an optional font for the labels on the chart
triggerGoogleAnalyticsEvent (optional): (category: string, action: string, label (optional): string, value (optional): number) => void Optionally trigger a GA Event every time a user clicks one of the optional download data/image buttons