diff --git a/.changeset/hip-worms-cover.md b/.changeset/hip-worms-cover.md new file mode 100644 index 00000000..b43135d9 --- /dev/null +++ b/.changeset/hip-worms-cover.md @@ -0,0 +1,5 @@ +--- +"victory-native": patch +--- + +Add pie size prop diff --git a/lib/src/pie/PieChart.tsx b/lib/src/pie/PieChart.tsx index 0746a7f5..3cbef980 100644 --- a/lib/src/pie/PieChart.tsx +++ b/lib/src/pie/PieChart.tsx @@ -12,6 +12,7 @@ type PieChartProps = { innerRadius?: number | string; circleSweepDegrees?: number; startAngle?: number; + size?: number; }; export const PieChart = (props: PieChartProps) => { @@ -20,6 +21,7 @@ export const PieChart = (props: PieChartProps) => { circleSweepDegrees = CIRCLE_SWEEP_DEGREES, startAngle: _startAngle = 0, children, + size, } = props; const { canvasSize, @@ -35,12 +37,13 @@ export const PieChart = (props: PieChartProps) => { 0, ); - const { width, height } = canvasSize; // Get the dynamic canvas size + const width = size ?? canvasSize.width; // Get the dynamic canvas size + const height = size ?? canvasSize.height; // Get the dynamic canvas size // The size of the chart will need to be adjusted if the labels are positioned outside the chart. // ie we need to decrease the Pie Charts radius to account for the labels so the labels don't get cut off. const radius = Math.min(width, height) / 2; // Calculate the radius based on canvas size - const center = vec(width / 2, height / 2); + const center = vec(canvasSize.width / 2, canvasSize.height / 2); const data = React.useMemo(() => { let startAngle = _startAngle; // Initialize the start angle for the first slice diff --git a/website/docs/polar/pie/pie-charts.md b/website/docs/polar/pie/pie-charts.md index d965d9a8..d6624452 100644 --- a/website/docs/polar/pie/pie-charts.md +++ b/website/docs/polar/pie/pie-charts.md @@ -70,6 +70,10 @@ A `number` which defines how many degrees of the chart should be drawn. The defa A `number` which defines the starting angle of the chart. Changing this prop will rotate the chart. +### `size` + +A `number` which defines the size of the chart. This defaults to the canvas' width and height. This can be overriden with this prop (in case you want to position labels outside the chart, for example) + ### `children` The `children` prop is a render function which maps through the data and whose sole argument is each individual `slice` of the pie, allowing you to customize each slice as needed. E.g. this slice will have all the data needed to render a `Pie.Slice />`.