d3-axis-for-react

Using d3 to build charts in React is mostly a wonderful experience. But it's hard to use d3-axis with React: it internally uses d3's selection system, so if you're creating your charts in React with JSX, you can't.

This is d3-axis, but for React. As direct a port as you can get. You can essentially read the API Reference for d3-axis, and translate it directly to this component: for every d3-style setter function, use a prop. The scale argument that you provide to the axis method is a scale prop.

• Tiny: No dependencies. React is a peerDependency and this package does not depend on d3.
• No new opinions: Same API as d3, just with props instead of methods.
• No animation: d3's axis system supports transitioning. This does not: that's out of scope.
• No canvas: d3-axis is compatible with Canvas thanks to d3's selection/context system. This component only targets SVG.
• TypeScript included: written in TypeScript, includes types.
• Compatible with server-side rendering: this doesn't use useEffect or any hooks: instead of using d3 to create DOM, this uses React.

Installation

This is the d3-axis-for-react package on NPM, so:

$ yarn add d3-axis-for-react
# or
$ npm install d3-axis-for-react

Translation example:

Traditional d3 style:

d3.axisBottom(x)
  .ticks(d3.timeMonth.every(3))
  .tickFormat(d => d <= d3.timeYear(d) ? d.getFullYear() : null)

With d3-axis-for-react

<Axis
  scale={x}
  ticks={d3.timeMonth.every(3)}
  tickFormat={d => d <= d3.timeYear(d) ? d.getFullYear() : null} />

Examples

• Line chart
• Index chart
• Bar chart

📚 API documentation

Development supported by Earthrise Media. Adapted from d3-axis, written by Mike Bostock, licensed MIT.