@junipero/react-d3-plugin

@junipero/react-d3-plugin

Simple and beautiful Charts using React, Junipero & D3

Installation

yarn add @junipero/react junipero/react-d3-plugin d3

Usage

import { Chart, Curve } from '@junipero/react-d3-plugin';
import * as d3 from 'd3';

export default () => (
  <Chart
    axis={[{
      type: d3.axisBottom,
      scale: d3.scaleTime,
      data: [new Date(2023, 0, 1), new Date(2023, 0, 2), new Date(2023, 0, 3)],
    }, {
      type: d3.axisLeft,
      scale: d3.scaleLinear,
      data: [10, 20, 30],
      grid: true,
    }]}
  >
    <Curve
      type="area"
      xAxisIndex={0}
      yAxisIndex={1}
    />
  </Chart>
);

Don't forget to add our default theme to your app using @junipero/theme, or create your own theme.

Dependencies

These libraries are not bundled with this package and required at runtime:

• react
• react-dom
• d3
• @junipero/react

Documentation

https://junipero.design/components

Contributing

Please check the CONTRIBUTING.md doc for contribution guidelines.

License

This software is licensed under MIT.