1.0.3 • Published 3 years ago

@master-maker/react-charts v1.0.3

Weekly downloads
109
License
ISC
Repository
-
Last release
3 years ago

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 hello@wesleyverheijen.com.

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.