ReactCake

A headless chart framework for React inspired by Layercake.

Installation

npm install --save reactcake

Usage

import { ReactCake, Html, Svg } from "reactcake";
import { scaleLinear, scaleBand } from "d3-scale"

// Chart components live in your project
import { xScale, yScale, Bars } from "./lib";

const data = [
  {year: 2024, value: 32},
  {year: 2025, value: 15},
  {year: 2026, value: 52}
];

const xKey = "date";
const yKey = "value";
const xScale = scaleTime();
const xScale = scaleBand();

return (
  <ReactCake data={data} x="year" y="value" xScale={xScale} yScale={yScale}>
    <Html>
      <AxisX />
      <AxisY />
    </Html>
    <Svg>
      <Bars/>
    </Svg>
  </ReactCake>
);

Concepts

ReactCake provides useful context for drawing data-driven charts, like a coordinate system, data extents and shared margins. Components that draw actual chart elements, like bars and lines, live in your project (or maybe a local component library), ReactCake is completely agnostic to what you render with it.

It provides sensible defaults and infers as much information as possible from your data, but also exposes fine-grained props to configure things yourself.

ReactCake is built on D3.

Relationship to Layercake

This project is an attempt to translate the overall approach and development ergonomics of the Layercake framework from Svelte to React. It does not aim for feature parity or identical API surfaces.

Prior work