diff --git a/README.md b/README.md index 336883fd..f718a714 100644 --- a/README.md +++ b/README.md @@ -296,6 +296,8 @@ class PieChartExample extends React.PureComponent { | labelRadius | undefined | The radius of the circle that will help you layout your labels. Takes either percentages or absolute numbers (pixels) | | padAngle | | The angle between the slices | | renderDecorator | `() => {}` | PropTypes.func | +| sort | `(a,b) => b.value - a.value` | Like any normal sort function it expects either 0, a positive or negative return value. The arguments are each an object from the `dataPoints` array | + ### ProgressCircle ![Progress circle](https://raw.githubusercontent.com/jesperlekland/react-native-svg-charts/master/screenshots/progress-circle.png) diff --git a/src/pie-chart.js b/src/pie-chart.js index c1716f57..52460d53 100644 --- a/src/pie-chart.js +++ b/src/pie-chart.js @@ -47,6 +47,7 @@ class PieChart extends PureComponent { animationDuration, style, renderDecorator, + sort, } = this.props const { height, width } = this.state @@ -83,6 +84,7 @@ class PieChart extends PureComponent { const pieSlices = shape.pie() .value(d => d.value) + .sort(sort) (dataPoints) return ( @@ -135,6 +137,7 @@ PieChart.propTypes = { animationDuration: PropTypes.number, style: PropTypes.any, renderDecorator: PropTypes.func, + sort: PropTypes.func, } PieChart.defaultProps = { @@ -142,6 +145,7 @@ PieChart.defaultProps = { height: 100, padAngle: 0.05, innerRadius: '50%', + sort: (a, b) => b.value - a.value, renderDecorator: () => { }, }