@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" | :x: | data | Array | | :white_check_mark: | handleMouseLeave | Function | | :x: | handleMouseMove | Function | | :x: | height | Number | | :white_check_mark: | margin | Shape | { top: 10, left: 55, right: 10, bottom: 30 } | :x: | margin.bottom | Number | | :x: | margin.left | Number | | :x: | margin.right | Number | | :x: | margin.top | Number | | :x: | numTicksY | Union<Number \| Function> | 5 | :x: | 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 | | :white_check_mark: | x | Function | | :white_check_mark: | Accessor function for x axis values xAxisLabel | String | | :x: | xFormat | Function | | :x: | Formatting function for x axis tick labels y | Function | | :white_check_mark: | Accessor function for y axis values yAxisLabel | String | | :x: | yFormat | Function | | :x: | 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) | | :x: | 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 | | :white_check_mark: | 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) | | :x: | 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%" | :x: | 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 | | :x: | 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 | | :x: | A function that returns a component for the chart's legend. This is rendered as a div above the chart's svg. renderTooltip | Function | | :x: | 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" | :x: | data | Array | | :white_check_mark: | handleMouseLeave | Function | | :x: | handleMouseMove | Function | | :x: | height | Number | | :white_check_mark: | margin | Shape | { top: 10, left: 50, right: 10, bottom: 20 } | :x: | margin.bottom | Number | | :x: | margin.left | Number | | :x: | margin.right | Number | | :x: | margin.top | Number | | :x: | numTicksX | Union<Number \| Function> | 6 | :x: | width | Number | | :white_check_mark: | x | Function | | :white_check_mark: | xAxisLabel | String | | :x: | xFormat | Function | | :x: | y | Function | | :white_check_mark: | yAxisLabel | String | | :x: | yFormat | Function | | :x: | yLabelOffset | String | "-0.5em" | :x: |

HorizontalStackedBar

From ./src/HorizontalStackedBar/index.js

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

Line

From ./src/Line/index.js

prop | type | default | required | description ---- | :----: | :-------: | :--------: | ----------- data | Array | | :white_check_mark: | handleMouseLeave | Function | | :x: | handleMouseMove | Function | | :x: | height | Number | | :white_check_mark: | margin | Shape | { top: 10, left: 55, bottom: 30, right: 10 } | :x: | margin.bottom | Number | | :x: | margin.left | Number | | :x: | margin.right | Number | | :x: | margin.top | Number | | :x: | numTicksX | Union<Number \| Function> | 10 | :x: | 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 | :x: | 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" | :x: | strokeWidth | Number | 2 | :x: | tooltipOpen | Boolean | | :x: | width | Number | | :white_check_mark: | x | Function | | :white_check_mark: | xAxisLabel | String | | :x: | xFormat | Function | | :x: | y | Function | | :white_check_mark: | yAxisLabel | String | | :x: | yFormat | Function | | :x: |

Scatterplot

From ./src/Scatterplot/index.js

prop | type | default | required | description ---- | :----: | :-------: | :--------: | ----------- circleFill | Union<String \| Function> | "rgba(76,129,219, 0.4)" | :x: | A string for each circle's fill, or a function that will receive that circle's datum circleRadius | Union<Number \| Function> | 5 | :x: | 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" | :x: | A string for each circle's stroke, or a function that will receive that circle's datum data | Array | | :white_check_mark: | handleMouseLeave | Function | | :x: | handleMouseMove | Function | | :x: | height | Number | | :white_check_mark: | margin | Shape | { top: 10, bottom: 50, left: 55, right: 10 } | :x: | margin.bottom | Number | | :x: | margin.left | Number | | :x: | margin.right | Number | | :x: | margin.top | Number | | :x: | numTicksX | Union<Number \| Function> | 5 | :x: | 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 | :x: | 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 | | :white_check_mark: | x | Function | | :white_check_mark: | Accessor function for x axis values xAxisLabel | String | | :x: | xFormat | Function | | :x: | Formatting function for x axis tick labels y | Function | | :white_check_mark: | Accessor function for y axis values yAxisLabel | String | | :x: | yFormat | Function | | :x: | Formatting function for y axis tick labels

VerticalGroupedBar

From ./src/VerticalGroupedBar/index.js

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