stonks

Small form-factor line chart for React.

Installation

npm install stonks

Note: If using Typescript, npm install @types/stonks

Basic Usage

import * as React from 'react';
import Stonk from 'stonks';

const StonksDemo = () => {
    const data = [50, 35, 20, 21, 36, 51, 55, 61, 70, 60, 55, 60];
    return (
        <div>
            <Stonk data={data} />
        </div>
    );
}

Demo

To try out the component in a demo:

git clone [email protected]:curtisupshall/stonks.git
cd stonks
npm install
npm run demo-server

Then visit localhost:8080 in your browser.

Theming

The theme for each graph can be customized. Children passed to a <Stonk> instance will be passed to the SVG's <defs> element. The following <linearGradient> IDs are used:

|id|Description| |--|-----------| |positive-gradient|The background gradient for positive graphs |negative-gradient|The background gradient for negative graphs |positive-line|The stroke line gradient for positive graphs |negative-line|The stroke line gradient for negative graphs |baseline|The stroke line gradient for the graph's baseline

Props

|Name|Type|Default|Description |----|----|-------|----------- |data|number[]|- |The data for the line plot |className|string|'stonk'|Optional className attribute |granularity|number|10|The number of plots on the graph |height|number|100|The height of the graph (pixels) |isPositive|boolean|-|Overrides the styling for whether the net change of the graph is positive or negative |showBaseline|boolean|-|Override whether or not the zero line is visible. By default, the line isn't shown unless the data prop contains negative values |width|number|200|The width of the graph (pixels)

Note: In the case when granularity is smaller than the data points provided, a select number of plots are shown. In the case that granularity is larger than the data provided, the graph is pushed to the right.