# react-plot

> Library of React components to render SVG 2D plots.

Latest version **3.1.2** (published 2025-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-plot
pnpm add react-plot
yarn add react-plot
bun add react-plot
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2025-11-25 |
| First published | 2020-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 7 |
| Unpacked size | 561.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Miguel Asencio |
| Maintainers | stropitek, targos, lpatiny, zakodium-bot |
| Keywords | react, plot, d3-line, d3, d3-react |

## Links

- npm: https://www.npmjs.com/package/react-plot
- Repository: https://github.com/zakodium-oss/react-plot
- Homepage: https://github.com/zakodium-oss/react-plot#readme
- Issues: https://github.com/zakodium-oss/react-plot/issues
- npm.io page: https://npm.io/package/react-plot

## Dependencies (7)

- [immer](https://npm.io/package/immer.md) ^11.0.0
- [d3-array](https://npm.io/package/d3-array.md) ^3.2.4
- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [d3-shape](https://npm.io/package/d3-shape.md) ^3.2.0
- [react-d3-utils](https://npm.io/package/react-d3-utils.md) ^3.1.2
- [d3-scale-chromatic](https://npm.io/package/d3-scale-chromatic.md) ^3.1.0
- [ml-distance-euclidean](https://npm.io/package/ml-distance-euclidean.md) ^3.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.2 (latest) — 2025-11-25
- 3.1.1 — 2025-08-14
- 3.1.0 — 2025-06-11
- 3.0.0 — 2024-10-14
- 2.0.0 — 2024-07-30
- 1.4.2 — 2022-12-04
- 1.4.1 — 2022-12-04
- 1.4.0 — 2022-11-25
- 0.20.4 — 2022-11-01
- 0.20.3 — 2022-10-20
- 0.20.2 — 2022-09-09
- 0.20.1 — 2022-06-28
- 0.20.0 — 2022-06-23
- 0.19.1 — 2022-05-24
- 0.19.0 — 2022-05-17
- … 23 more at https://npm.io/package/react-plot/versions

## README

<h3 align="center">
  <a href="https://www.zakodium.com">
    <img src="https://www.zakodium.com/brand/zakodium-logo-white.svg" width="50" alt="Zakodium logo" />
  </a>
  <p>
    Maintained by <a href="https://www.zakodium.com">Zakodium</a>
  </p>
</h3>

# react-plot

[![NPM version](https://img.shields.io/npm/v/react-plot.svg)](https://www.npmjs.com/package/react-plot)
[![npm download](https://img.shields.io/npm/dm/react-plot.svg)](https://www.npmjs.com/package/react-plot)
[![license](https://img.shields.io/npm/l/react-plot.svg)](https://github.com/zakodium-oss/react-plot/blob/main/LICENSE)

Library of React components to render SVG 2D plots.

Check our exhaustive [documentation here](https://react-plot.zakodium.com/).

## [Storybook](https://react-plot.pages.dev/)

```tsx
const Example = () => (
  <Plot
    width={550}
    height={500}
    margin={{ bottom: 50, left: 90, top: 50, right: 100 }}
  >
    <Heading
      title="Electrical characterization"
      subtitle="current vs voltage"
    />
    <LineSeries
      data={[
        { x: 0, y: 0 },
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 3 },
        { x: 5, y: 3 },
      ]}
      xAxis="x"
      yAxis="y"
      lineStyle={{ strokeWidth: 3 }}
      label="Vg = 7V"
      displayMarker={false}
    />
    <LineSeries
      data={[
        { x: 0, y: 0 },
        { x: 1, y: 1 },
        { x: 2, y: 2 },
        { x: 3, y: 3 },
        { x: 4, y: 3 },
        { x: 5, y: 3 },
      ]}
      xAxis="x"
      yAxis="y"
      displayMarker={true}
      markerShape="circle"
      label="Vg = 3V"
    />
    <Axis
      id="x"
      position="bottom"
      label="Drain voltage [V]"
      displayPrimaryGridLines
      max={6.1 / factor}
    />
    <Axis
      id="y"
      position="left"
      label="Drain current [mA]"
      displayPrimaryGridLines
      max={6.1 * factor}
    />
    <Legend position="right" />
  </Plot>
);
```

This code will result in this example

![Plot Example](./PlotExample.png)

## Installation

`$ npm install --save react-plot`

## Debugging

For major React hooks debugging use [`@simbathesailor/use-what-changed`](https://github.com/simbathesailor/use-what-changed)

```tsx
import { useWhatChanged } from '@simbathesailor/use-what-changed';

function Example() {

  // useEffect, useCallback or useMemo
  useWhatChanged([a, b, c, d]); // debugs the below useEffect

  // displays names of variables instead of index
  // useWhatChanged([a, b, c, d], 'a, b, c, d', 'anysuffix-string');
  React.useEffect(() => {
    // console.log("some thing changed , need to figure out")
  }, [a, b, c, d]);
```

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/react-plot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._