https://github.com/zakodium-oss/react-plot

Library of React components to render SVG 2D plots. You can check the story book https://react-plot.pages.dev/ or have a look to the extensive documentation
https://github.com/zakodium-oss/react-plot

charting-library d3 hacktoberfest plot react scientific-visualization

Last synced: 9 months ago
JSON representation

Library of React components to render SVG 2D plots. You can check the story book https://react-plot.pages.dev/ or have a look to the extensive documentation

• Host: GitHub
• URL: https://github.com/zakodium-oss/react-plot
• Owner: zakodium-oss
• License: mit
• Created: 2020-10-20T08:29:00.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-15T15:45:33.000Z (over 1 year ago)
• Last Synced: 2024-12-10T08:51:25.205Z (over 1 year ago)
• Topics: charting-library, d3, hacktoberfest, plot, react, scientific-visualization
• Language: TypeScript
• Homepage: https://react-plot.zakodium.com
• Size: 12.3 MB
• Stars: 12
• Watchers: 7
• Forks: 6
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  

    

  

  


    Maintained by Zakodium

  


# 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 = () => (

  

    

    

    

    

    

    

  

);

```

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)