react-plot
    TypeScript icon, indicating that this package has built-in type declarations

    0.11.0 • Public • Published

    react-plot

    Library of React components to render SVG 2D plots.

    Zakodium logo

    Maintained by Zakodium

    NPM version npm download

    Storybook

    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]"
          displayGridLines={true}
          max={6.1 / factor}
          tickStyle={{ fontSize: '0.8rem' }}
        />
        <Axis
          id="y"
          position="left"
          label="Drain current [mA]"
          displayGridLines={true}
          labelSpace={50}
          max={6.1 * factor}
          tickStyle={{ fontSize: '0.8rem' }}
        />
        <Legend position="right" />
      </Plot>
    );

    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

    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

    Install

    npm i react-plot

    DownloadsWeekly Downloads

    172

    Version

    0.11.0

    License

    MIT

    Unpacked Size

    311 kB

    Total Files

    167

    Last publish

    Collaborators

    • stropitek
    • targos
    • lpatiny
    • zakodium-bot