@newamerica/charts

A collection of reusable, fully responsive charting components for data visualization.

Installation

npm install @newamerica/charts --save

Usage Example

import { Chart, Bar } from "@newamerica/charts";
import "@newamerica/charts/dist/styles.css";

const MyChart = () => (
  <Chart
    maxWidth="100%"
    height={400}
    renderTooltip={({ datum }) => <div>{datum.value}</div>}
  >
    {({ width, height, handleMouseMove, handleMouseLeave }) => (
      <Bar
        data={data}
        width={width}
        height={height}
        x={d => d.x}
        y={d => +d.y}
        handleMouseMove={handleMouseMove}
        handleMouseLeave={handleMouseLeave}
      />
    )}
  </Chart>
);

While not required, the base Chart component is helpful, because it creates a fully responsive svg container for your chart (it uses a polyfilled version of the Intersection Observer API to watch for debounced changes in screen size and resizes the svg accordingly). It can also optionally take care of rendering chart tooltips.

Children must be passed in via a render prop, and automatically receive the current width and height of the chart's svg. If the renderTooltip prop is defined, children will also receive the handleMouseMove and handleMouseLeave functions for calling tooltips.

⚠️ If you choose not to use the Chart component, be aware that all other chart types will return an svg g element, so you'd have to render those inside of an svg on your own.

Components

• Bar
• Chart
• HorizontalBar
• HorizontalStackedBar
• Line
• Scatterplot
• VerticalGroupedBar

API

Bar

From ./src/Bar/index.js

prop	type	default	required	description
color	String	"#22C8A3"	❌
data	Array		✅
handleMouseLeave	Function		❌
handleMouseMove	Function		❌
height	Number		✅
margin	Shape	{ top: 10, left: 55, right: 10, bottom: 30 }	❌
margin.bottom	Number		❌
margin.left	Number		❌
margin.right	Number		❌
margin.top	Number		❌
numTicksY	Union<Number | Function>	5	❌	You can specify the number of y axis ticks directly, or pass in a function which will receive the chart's computed height as an argument.
width	Number		✅
x	Function		✅	Accessor function for x axis values
xAxisLabel	String		❌
xFormat	Function		❌	Formatting function for x axis tick labels
y	Function		✅	Accessor function for y axis values
yAxisLabel	String		❌
yFormat	Function		❌	Formatting function for y axis tick labels

Chart

From ./src/Chart/index.js

The base Chart component for all charts and maps. This takes care of creating a responsive svg and rendering tooltips.

prop	type	default	required	description
aspectRatio	(custom validator)		❌	The aspectRatio of the chart. This is a number that is multiplied by the chart's computed width to calculate the chart's height. The chart MUST receive either a height or and aspectRatio prop.
children	Function		✅	A function that is passed the caculated width and height of the chart, as well as tooltip functions (if the renderTooltip prop is defined)
height	(custom validator)		❌	The height of the chart. Can either be a string (i.e. 100% or 8rem) or a number representing a pixel value. The chart MUST receive either a height or and aspectRatio prop.
maxWidth	Union<String | Number>	"100%"	❌	The max width of the chart. Can either be a string (i.e. 100% or 8rem) or a number representing a pixel value.
renderAnnotation	Function		❌	A function that returns a component for an annotation, which is rendered at the very bottom of the svg. It receive's the chart's current width and height (which are helpful to have for annotation positioning).
renderLegend	Function		❌	A function that returns a component for the chart's legend. This is rendered as a div above the chart's svg.
renderTooltip	Function		❌	A function that returns a component for the chart's tooltip. It receives event, datum, and any other arguments passed into the handleMouseMove function.

HorizontalBar

From ./src/HorizontalBar/index.js

prop	type	default	required	description
color	String	"#22C8A3"	❌
data	Array		✅
handleMouseLeave	Function		❌
handleMouseMove	Function		❌
height	Number		✅
margin	Shape	{ top: 10, left: 50, right: 10, bottom: 20 }	❌
margin.bottom	Number		❌
margin.left	Number		❌
margin.right	Number		❌
margin.top	Number		❌
numTicksX	Union<Number | Function>	6	❌
width	Number		✅
x	Function		✅
xAxisLabel	String		❌
xFormat	Function		❌
y	Function		✅
yAxisLabel	String		❌
yFormat	Function		❌
yLabelOffset	String	"-0.5em"	❌

HorizontalStackedBar

From ./src/HorizontalStackedBar/index.js

prop	type	default	required	description
colors	Array		✅
data	Array		✅
handleMouseLeave	Function		❌
handleMouseMove	Function		❌
height	Number		✅
keys	Array		✅	An array of strings with the column keys of each bar
margin	Shape	{ top: 10, left: 60, right: 40, bottom: 40 }	❌
margin.bottom	Number		❌
margin.left	Number		❌
margin.right	Number		❌
margin.top	Number		❌
numTicksX	Union<Number | Function>		❌
width	Number		✅
xAxisLabel	String		❌
xFormat	Function		❌
y	Function		✅	Accessor function for y axis values
yAxisLabel	String		❌
yFormat	Function		❌

Line

From ./src/Line/index.js

prop	type	default	required	description
data	Array		✅
handleMouseLeave	Function		❌
handleMouseMove	Function		❌
height	Number		✅
margin	Shape	{ top: 10, left: 55, bottom: 30, right: 10 }	❌
margin.bottom	Number		❌
margin.left	Number		❌
margin.right	Number		❌
margin.top	Number		❌
numTicksX	Union<Number | Function>	10	❌	You can specify the number of x axis ticks directly, or pass in a function which will receive the chart's computed width as an argument.
numTicksY	Union<Number | Function>	5	❌	You can specify the number of y axis ticks directly, or pass in a function which will receive the chart's computed height as an argument.
stroke	String	"#22C8A3"	❌
strokeWidth	Number	2	❌
tooltipOpen	Boolean		❌
width	Number		✅
x	Function		✅
xAxisLabel	String		❌
xFormat	Function		❌
y	Function		✅
yAxisLabel	String		❌
yFormat	Function		❌

Scatterplot

From ./src/Scatterplot/index.js

prop	type	default	required	description
circleFill	Union<String | Function>	"rgba(76,129,219, 0.4)"	❌	A string for each circle's fill, or a function that will receive that circle's datum
circleRadius	Union<Number | Function>	5	❌	A number for the circle's radius, or a function that will receive that circle's datum for radius scaling.
circleStroke	Union<String | Function>	"#4C81DB"	❌	A string for each circle's stroke, or a function that will receive that circle's datum
data	Array		✅
handleMouseLeave	Function		❌
handleMouseMove	Function		❌
height	Number		✅
margin	Shape	{ top: 10, bottom: 50, left: 55, right: 10 }	❌
margin.bottom	Number		❌
margin.left	Number		❌
margin.right	Number		❌
margin.top	Number		❌
numTicksX	Union<Number | Function>	5	❌	You can specify the number of x axis ticks directly, or pass in a function which will receive the chart's computed width as an argument.
numTicksY	Union<Number | Function>	5	❌	You can specify the number of y axis ticks directly, or pass in a function which will receive the chart's computed height as an argument.
width	Number		✅
x	Function		✅	Accessor function for x axis values
xAxisLabel	String		❌
xFormat	Function		❌	Formatting function for x axis tick labels
y	Function		✅	Accessor function for y axis values
yAxisLabel	String		❌
yFormat	Function		❌	Formatting function for y axis tick labels

VerticalGroupedBar

From ./src/VerticalGroupedBar/index.js

prop	type	default	required	description
colors	Array		✅
data	Array		✅
handleMouseLeave	Function		❌
handleMouseMove	Function		❌
height	Number		✅
keys	Array		✅	An array of strings with the keys for each bar
margin	Shape	{ top: 40, left: 40, right: 40, bottom: 40 }	❌
margin.bottom	Number		❌
margin.left	Number		❌
margin.right	Number		❌
margin.top	Number		❌
numTicksY	Union<Number | Function>	5	❌
tooltipOpen	Boolean		❌
width	Number		✅
x	Function		✅	Accessor function for x axis values
xAxisLabel	String		❌
xFormat	Function		❌
yAxisLabel	String		❌
yFormat	Function		❌