Maintained by Zakodium

react-plot


Library of React components to render SVG 2D plots.

Check our exhaustive documentation here.

Storybook

``tsx
const Example = () => (
width={550}
height={500}
margin={{ bottom: 50, left: 90, top: 50, right: 100 }}
>
title="Electrical characterization"
subtitle="current vs voltage"
/>
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}
/>
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"
/>
id="x"
position="bottom"
label="Drain voltage [V]"
displayPrimaryGridLines
max={6.1 / factor}
/>
id="y"
position="left"
label="Drain current [mA]"
displayPrimaryGridLines
max={6.1 * factor}
/>

);

`

This code will result in this example

!Plot Example

Installation

$ npm install --save react-plot

Debugging

For major React hooks debugging use @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