react charts

This is a plugin for React to include rendering of charts in SVG. React Charts is extendable.

Installation

Using npm, run:

npm i -s @master-maker/react-charts

Getting started

Run the following commands:

npm i -g create-react-app
create-react-app demo-app
cd demo-app

This installs React and a tool to setup an application to start working on, followed by setting up the application project and moving to the project folder.

Next install react-charts to the project

npm i -s @master-maker/react-charts

Copy the code snippet under Usage and paste it in src/App.js.

Now it is time to start the application. To do so run:

npm start

Usage

Here follows a quick start example. This code snippet can replace the whole App.js file to start a demo.

import React, { Component } from 'react';
import { Chart } from '@master-maker/react-charts';
import './App.css';

export default class App extends Component {
    render() {
        const data = [
        {value: .4, label: 'd', color: '#ff9'},
            {value: .5, label: 'a', color: '#f99'},
            {value: .1, label: 'b', color: '#9f9'},
            {value: .15, label: 'c', color: '#99f'},
            {value: .2, label: 'd', color: '#9ff'}
        ];
        return (
            <div className="app">
                <Chart data={data} />
            </div>
        );
    }
}

Optional properties

• data - expects an array of objects to render the details (see the example above) [required]:
  • value - expects a number for the value [required]
  • label - expects a string defining the data [optional]
  • color - expects a string for a valid RGB color [optional]
• width - expects a number for the SVG width in pixels [optional, defaults to 200]
• height - expects a number for the SVG height in pixels [optional, defaults to 200]
• padding - expects a number for the offset in pixels in the SVG [optional, defaults to 10]
• innerRadius - expects a number for the inner circle, this results in a donut chart [optional, defaults to 0]
• className - expects a string, used as class name for the SVG [optional]
• hideLabels - expects a boolean, when true the labels are not rendered [optional, defaults to false]
• hideLabelValues - expects a boolean, when true the values are not rendered as part of the label [optional, defaults to false]
• labelValueFormat - expects a callback function, the function is called with the value (number) as only argument, the result replaces the value part of the label [optional]

Issues

Issues can be sent to me directly by e-mail at [email protected].

Changes

• 0.1.0 Initial release
• 1.0.0 Updated labels and rewrite in Typescript
• 1.0.1 Fix output package
• 1.0.2 Fix index pointer
• 1.0.3 Fix exported member

Credits

React Charts is built and maintained by Wesley Verheijen.