React-mini-chart-components NPM

React Mini Chart Components

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

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

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';

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' />

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

8 years ago