0.0.4 • Published 5 years ago
wirecase-react-piechart v0.0.4
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 keysvalue
andcolor
(optionnal)palette
: Array - by default palette contains 7 hexadecimal colorssectorStrokeWidth
: Number - by default is 3expandOnHover
: Boolean - by default is trueexpandedSector
: Number - by default is nullonSectorHover
: Function - by default is nullexpandPx
: Number - by default is 10,viewBoxWidth
: Number - by default is 300. Chart is responsive
License
See MIT