stonks

Small form-factor line chart for React.

!Screenshot

Installation

``bash
npm install stonks
`

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

Basic Usage

`javascript
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 (

);
}
`

Demo

To try out the component in a demo:

`bash
git clone git@github.com: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 instance will be passed to the SVG's element. The following 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.