React Bumps Chart

React Bumps Chart is a library for drawing rowing bumps charts.

Install

npm install --save react-bumps-chart

How to use

import 'react-bumps-chart/dist/index.css';

import { BumpsChart, BumpsChartMultiYear, type Event } from 'react-bumps-chart';

const Example = ({ data }: { data: Event }) => <BumpsChart data={data} blades />;

const History = ({ data }: { data: Event[] }) => (
  <BumpsChartMultiYear data={data} />
);

PDF export

PDF versions of both charts are available from react-bumps-chart/pdf. They need @react-pdf/renderer, which you install yourself:

npm install --save @react-pdf/renderer

import { PDFDownloadLink } from '@react-pdf/renderer';
import { BumpsChart, type Event } from 'react-bumps-chart/pdf';

const Download = ({ data }: { data: Event }) => (
  <PDFDownloadLink document={<BumpsChart data={data} />} fileName="bumps.pdf">
    Download PDF
  </PDFDownloadLink>
);

Each PDF component renders a complete <Document>, so it can also be passed to renderToFile or pdf() on the server.

Development

If you want to develop a component

• npm i

• npm run storybook

If you want to build

• npm run build-storybook

Documentation

See https://react-bumps-chart.mulberryhousesoftware.com/