wirecase-react-piechart

A lightweight responsive pie chart component for React using only SVG

Install

npm install --save wirecase-react-piechart

Changelog

See changelog

Usage

Exemple

import React, { Component } from 'react';
import { PieChart } from 'components/piechart';
 
export default class MyComponent extends Component {
    constructor(props, context) {
        super(props, context);
 
        this.state = {
            expandedSector: null
        };
    }
 
    handleMouseEnterOnSector(sector) {
        this.setState({ expandedSector: sector });
    }
 
    handleMouseLeaveFromSector() {
        this.setState({ expandedSector: null });
    }
 
    render() {
        const data = [
            { label: 'Facebook', value: 100, color: '#3b5998' },
            { label: 'Twitter', value: 60, color: '#00aced' },
            { label: 'Google Plus', value: 30, color: '#dd4b39' },
            { label: 'Pinterest', value: 20, color: '#cb2027' },
            { label: 'Linked In', value: 10, color: '#007bb6' }
        ];
 
        return (
            <div>
                // PieChart component
                <PieChart
                    data={data}
                    expandedSector={this.state.expandedSector}
                    onMouseEnterOnSector={::this.handleMouseEnterOnSector}
                    onMouseLeaveFromSector={::this.handleMouseLeaveFromSector}
                />
                // Legend
                <div>
                    {data.map((d, i) => (
                        <div key={i}>
                            <span style={{ background: d.color }} />
                            <span
                                style={{
                                    fontWeight:
                                        this.state.expandedSector == i
                                            ? 'bold'
                                            : null
                                }}
                            >
                                {d.label} : {d.value}
                            </span>
                        </div>
                    ))}
                </div>
            </div>
        );
    }
}

Props

• data: Array - by default is empty. Contains objects with keys valueand color (optionnal)
• palette: Array - by default palette contains 7 hexadecimal colors
• sectorStrokeWidth: Number - by default is 3
• expandOnHover: Boolean - by default is true
• expandedSector: Number - by default is null
• onSectorHover: Function - by default is null
• expandPx: Number - by default is 10,
• viewBoxWidth: Number - by default is 300. Chart is responsive

License

See MIT