1.0.3 • Published 3 years ago
@master-maker/react-charts v1.0.3
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:
- 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 tofalse
- hideLabelValues - expects a boolean, when
true
the values are not rendered as part of the label optional, defaults tofalse
- 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.