0.2.1 • Published 5 years ago
stonks v0.2.1
stonks
Small form-factor line chart for React.
Installation
npm install stonksNote: 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 git@github.com:curtisupshall/stonks.git
cd stonks
npm install
npm run demo-serverThen 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.