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.
npm install --save react-fast-chartsThe 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}
/>
);
};- id:
stringA unique id for the visualization. - vizType:
VizType | stringThe string name for the type of visualization being rendered. Can also export theVizTypeenum 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',
}- jsonToDownload (optional):
object[]Displays 'Download Data' button under the visualization and allows the user to download the given data as a CSV - enablePNGDownload (optional):
booleanDisplays 'Download PNG' button under the visualization and allows the user to download the given visualization as a PNG - enableSVGDownload (optional):
booleanDisplays 'Download SVG' button under the visualization and allows the user to download the given visualization as a SVG - triggerPNGDownload (optional):
(success: boolean) => voidIf a callback is provided, a PNG download will be triggered and then the callback will be fired. This will continue until the value isundefined. - triggerSVGDownload (optional):
(success: boolean) => voidIf a callback is provided, a SVG download will be triggered and then the callback will be fired. This will continue until the value isundefined. - chartTitle (optional):
stringThe 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):
stringPlaces a caption under the chart - rootStyles (optional):
React.CSSPropertiesDefine any custom style overrides for the root containing div of the visualization - height (optional):
number | stringDefine an optional height to override the default sizing of the chart (default: 450px) - labelFont (optional):
stringDefine an optional font for the labels on the chart - triggerGoogleAnalyticsEvent (optional):
(category: string, action: string, label (optional): string, value (optional): number) => voidOptionally trigger a GA Event every time a user clicks one of the optional download data/image buttons
- data:
ScatterPlotDatum[]- label:
string - x:
number - y:
number - fill (optional):
string - radius (optional):
number - tooltipContent (optional):
string - tooltipContentOnly (optional):
boolean - onClick (optional):
() => void - highlighted (optional):
boolean
- label:
- axisLabels (optional):
object- x (optional):
string - y (optional):
string
- x (optional):
- axisMinMax (optional):
object- minX (optional):
number - maxX (optional):
number - minY (optional):
number - maxY (optional):
number
- minX (optional):
- showAverageLines (optional):
boolean - averageLineText (optional):
object- x (optional):
string - y (optional):
string
- x (optional):
- averageLineValue (optional):
object- x (optional):
string - y (optional):
string
- x (optional):
- quadrantLabels (optional):
object- I (optional):
string - II (optional):
string - III (optional):
string - IV (optional):
string
- I (optional):
- data:
BarChartDatum[][]- x:
string - y:
number - fill (optional):
string - stroke (optional):
string - tooltipContent (optional):
string - tooltipContentOnly (optional):
boolean - onClick (optional):
() => void
- x:
- axisLabels (optional):
object- left (optional):
string - bottom (optional):
string
- left (optional):
- axisMinMax (optional):
object- minY (optional):
number - maxY (optional):
number
- minY (optional):
- hideAxis (optional):
object- left (optional):
boolean - bottom (optional):
boolean
- left (optional):
- averageLines (optional):
object[]- value:
number - label (optional):
string - labelPlacement (optional):
LabelPlacementenum can be exported from the module. Values areleftorright - strokeWidth (optional):
number - strokeDasharray (optional):
number - strokeColor (optional):
string
- value:
- data:
ClusterBarChartDatum[]- groupName:
string - x:
string - y:
number - fill (optional):
string - tooltipContent (optional):
string - tooltipContentOnly (optional):
boolean - onClick (optional):
() => void - onMouseMove (optional):
(d: Datum, coords: {x: number, y: number}) => voidif defined, the default tooltips will not be shown - onMouseLeave (optional):
(d: Datum, coords: {x: number, y: number}) => voidif defined, the default tooltips will not be shown
- groupName:
- axisLabels (optional):
object- left (optional):
string - bottom (optional):
string
- left (optional):
- axisMinMax (optional):
object- minY (optional):
number - maxY (optional):
number
- minY (optional):
- formatAxis (optional):
object- y (optional):
(n: number) => string
- y (optional):
- tickCount (optional):
object- x (optional):
number - y (optional):
number
- x (optional):
- animateAxis (optional):
object- animationDuration:
number - startMinY:
number - startMaxY:
number
- animationDuration:
- animateBars (optional):
number
- data:
RadarChartDatum[][] - color:
object- start:
string - end:
string
- start:
- maxValue:
number
- data:
ExtendedFeature<any, GeoJsonCustomProperties>: This is a standard GeoJson object but thepropertiesof each feature should include the following props:- percent:
number - tooltipContent (optional):
string - void (optional):
boolean
- percent:
- minColor:
string - maxColor:
string - voidColor (optional):
string
- data:
LineChartDatum[]- coords:
Coords[]eachCoordis an object of{x: number; y: number} - animationDuration (optional):
number - animationDirection (optional):
AnimationDirectionenum can be exported from the module. Values areforwardorbackward - animationStartIndex (optional):
numberthe index corresponding to thecoordat which to start the animation - label (optional):
string - labelColor (optional):
string - showLabelLine (optional):
boolean - labelPosition (optional):
LabelPositionenum can be exported from the module. Values aretop,centerorbottom - labelAnchor (optional):
LabelAnchorenum can be exported from the module. Values arestart,middleorend - labelDataIndex (optional):
numberthe index corresponding to thecoordat which to place the label - color (optional):
string - width (optional):
number - tooltipContent?:
string
- coords:
- axisLabels (optional):
object- left (optional):
string - bottom (optional):
string
- left (optional):
- axisMinMax (optional):
object- minX (optional):
number - maxX (optional):
number - minY (optional):
number - maxY (optional):
number
- minX (optional):
- showGridLines (optional):
object- xAxis (optional):
boolean - yAxis (optional):
boolean
- xAxis (optional):
- formatAxis (optional):
object- x (optional):
(n: number) => string - y (optional):
(n: number) => string
- x (optional):
- tickCount (optional):
object- x (optional):
number - y (optional):
number
- x (optional):
- animateAxis (optional):
object- animationDuration:
number - startMinX:
number - startMaxX:
number - startMinY:
number - startMaxY:
number
- animationDuration:
- data:
RootDatum[]- id:
string - label:
string - fill (optional):
string - children:
(LeafDatum | RootDatum)[]array ofRootDatumorLeafDatumelements, where aLeafDatumlooks like:- id:
string - label:
string - tooltipContent:
string - size:
number
- id:
- id:
- animateOn (optional):
boolean
- data:
RootDatum[]- id:
string - label:
string - fill (optional):
string - children:
(LeafDatum | RootDatum)[]array ofRootDatumorLeafDatumelements, where aLeafDatumlooks like:- id:
string - label:
string - tooltipContent:
string - size:
number
- id:
- id:
- animateOn (optional):
boolean - formatValue (optional):
(value: number) => stringFunction that formats how the raw value will be displayed in the chart
- config:
StackChartConfig- primaryKey:
stringthe name of the key to use for plotting the chart on the X axis - groups:
object[]- key:
string - label:
string - fill (optional):
string
- key:
- primaryKey:
- data:
StackChartDatum[]- [key: string]:
numberthe data can be any consistent combination of key/value pairs. One of the keys must match the primary key, and the other keys must match the key of a group defined in theconfigprop
- [key: string]:
- enableBrushZoom (optional):
booleanif true, users can click and drag to zoom into areas of the stack chart. Note that this will also disable tooltips.
- data:
ClusterChartDatum[]- name:
string - label:
string - value:
number - fill:
string - tooltipContent (optional):
string
- name:
- hideLabels (optional):
boolean - circleSpacing (optional):
number - max (optional):
number
- data:
BoxAndWhiskersChartDatum[]- category:
string - label:
string - value:
number - plotPoint:
boolean - primaryPoint:
boolean - fill (optional):
string
- category:
The error VizType is useful for quickly setting an error message in place of a visualization if needed.
- message:
string
react-fast-charts also exports a number of lightweight legend and scale components to quickly add context to a chart.
import {Legend} from 'react-fast-charts';
...
const App = () => {
return (
<Legend
legendList={[
{label: 'Imports', fill: 'red', stroke: undefined},
{label: 'Exports', fill: 'blue', stroke: undefined},
]}
/>
);
};The ColorScaleLegend will render a gradient legend. It must receive either a maxColor and minColor or a gradientString.
- title:
string - maxLabel:
string | number - minLabel:
string | number - rootStyles (optional):
React.CSSPropertiesdefine any custom style overrides for the root containing div - maxColor (optional):
stringmaximum color for a linear scale - minColor (optional):
stringminimum color for a linear scale - gradientString (optional):
stringcustom gradient css string
- legendList:
LegendDatum[]- label:
string - fill:
string | undefined - stroke:
string | undefined
- label:
- rootStyles (optional):
React.CSSPropertiesdefine any custom style overrides for the root containing div - itemStyles (optional):
React.CSSPropertiesdefine any custom style overrides for the containing div of each item - labelStyles (optional):
React.CSSPropertiesdefine any custom style overrides for each label
- items:
LegendItem[]- color:
string - label:
string
- color:
- highlighted (optional):
LegendItemoptionally add a highlighted value to distinguish it from the other values.
- legendList:
LegendDatum[]- label
string - fill
string | undefined - stroke
string | undefined
- label