Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
By Sarah Gooding - Feb 12, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-fast-charts
Advanced tools
react-fast-charts
Quickly create a variety of data visualizations in React using D3.
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:
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',
}
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):
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
VizType.ScatterPlot
- 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):
VizType.BarChart
- 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:
VizType.ClusterBarChart
- 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
VizType.RadarChart
- data:
RadarChartDatum[][] - color:
object- start:
string - end:
string
- start:
- maxValue:
number
VizType.GeoMap
- 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
VizType.LineChart
- 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:
VizType.TreeMap
- 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
VizType.DifferenceTreeMap
- 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
VizType.StackChart
- 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.
VizType.ClusterChart
- data:
ClusterChartDatum[]- name:
string - label:
string - value:
number - fill:
string - tooltipContent (optional):
string
- name:
- hideLabels (optional):
boolean - circleSpacing (optional):
number - max (optional):
number
VizType.BoxAndWhiskersChart
- data:
BoxAndWhiskersChartDatum[]- category:
string - label:
string - value:
number - plotPoint:
boolean - primaryPoint:
boolean - fill (optional):
string
- category:
VizType.Error
The error VizType is useful for quickly setting an error message in place of a visualization if needed.
- message:
string
Legends and Scales
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},
]}
/>
);
};
ColorScaleLegend
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
HorizontalLegend
- 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
HowToReadDots
- items:
LegendItem[]- color:
string - label:
string
- color:
- highlighted (optional):
LegendItemoptionally add a highlighted value to distinguish it from the other values.
Legend
- legendList:
LegendDatum[]- label
string - fill
string | undefined - stroke
string | undefined
- label
License
FAQs
Quickly create a variety of data visualizations in React using D3.
We found that react-fast-charts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 07 Jun 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
By Sarah Gooding - Feb 11, 2025
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025