React Simple Charts

A collection of lightweight, easy to use React Components to display charts and numbers using plain SVG.

Fork me on GitHub


npm install --save react-simple-charts

import {Area, CirclePie, BarMetric} from 'react-simple-charts'


A pure React/SVG charting library.

Input data

Data input is specified as follow: [{time: Unix MS timestamp, value: yValue, label: Text shown for this value}]

Default Props

            width: 640,
            height: 320,
            border: 'none',
            strokeWidth: 2,
            useDynamicYMin: false,
            strokeColor: '#408AE5',
            pointsRadius: 5,
            tipsWidth: 240,
            tipsHeight: 22,
            tipsPadding: 10,
            tipStrokeWidth: 1,
            tipStrokeColor: '#BBBBBB',
            tipsFill: 'white',
            gridColor: 'rgba(230,230,230,.5)',
            labelFontSize: 12,
            labelTextShadow: '1px 1px #fff',
            labelColor: '#555',
            fillColor: 'rgba(191, 216, 246, 0.3)',
            maxOverflow: 20,
            yLabelsOutside: false,
            yLabelsPosition: 'left',
            yPadding: 10,
            data: [],

Sample use:

import Area from 'react-area-chart'

        let data = [
            {time:1422766800000, value: 0, label: "active users"},
            {time:1422853200000, value: 10, label: "active users"},
            {time:1422939600000, value: 5, label: "active users"}
        <Area width={900} height={300} data={data}/>

Bar Metric

A micro bar metric component.

Default Props

            metricName: 'points',
            value: 0,
            percent: 100,
            label: 'N/A'

Sample use:

import BarMetric from 'react-bar-metric'

        <BarMetric label="Share of IE" percent={5} metricName="Nearing Zero"/>

Circle Pie

A micro component for rendering a percentage value as an SVG circle.

Default Props

            width: 150,
            height: 150,
            border: 'none',
            strokeWidth: 10,
            labelColor: '#111111',
            labelFontSize: '18px',
            strokeColor: '#408AE5',
            railColor: '#f5f5f5',
            fillColor: 'none',
            percent: 70,
            padding: 0,

Sample use:

import CirclePie from 'react-circle-pie'

        <CirclePie percent={5}/>


The following libraries are peer dependencies and are expected to be included in your own package: