react-mini-chart-components

0.1.1 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i react-mini-chart-components

Weekly Downloads

1

Version

0.1.1

License

GPL-3.0

Last publish

Collaborators

  • mrmckeb