React Mini Chart Components

A collection of light-weight mini chart components, built with SVG - with no dependencies.

Installation

This package is pre-release and is yet to be published to NPM. To install, install from this repository.

npm install --save https://github.com/mrmckeb/react-mini-chart-components

Setup

Note: The below is in ES2015, and can be transpiled with Babel or TypeScript.

You can import the whole library, or just the parts you want.

import ReactMiniChartComponents from 'react-mini-chart-components';
const Gauge = ReactMiniChartComponents.Gauge;

Or, import just the chart(s) you want.

import {Gauge} from 'react-mini-chart-components';

Gauge

The Gauge component has the following configuration. All are optional.

| Property | Type | Description | Default | | ------------- | ------------- | ------------- | ------------- | | type | string | 'full-gauge' for a full-circle gauge (default).'half-gauge' for a half-circle gauge. | 'full-gauge' | | value | number | Can be any number between 0 and 100. | 50 | | color | string | Can be any valid CSS color. For example, '#ccc' or 'rgb(150, 0, 150)'. | 'Orange' | | width | string | Can be any valid CSS width. For example, '5em' or '15px'. | '2em' |

Below is a 'half-gauge', with a value of 15, colored 'LimeGreen' and with a width of '5em'.

<Gauge type='half-gauge' value={15} color='LimeGreen' width='5em' />

Example

To see these components in use, you can view app.jsx.