Automatic placement of pie chart labels

[Thom1729]

It would be nice to have an option to automatically place the label within a segment of a pie chart in an aesthetically reasonable location. I suggest computing the largest circle that can be inscribed within a segment and placing the label at the center of that circle.

Implementation:

function pieLabelRadius(fraction) {
    if (fraction === 1) {
        return 0;
    } else if (fraction >= .5) {
        return 0.5;
    } else {
        const t = Math.tan(fraction * Math.PI / 2);
        return (2*t) / ((1+t)*(1+t));
    }
}

const MyPie = ({ data, height, width }) => {
    const total = data.map(datum => datum.value).reduce((a,b) => a+b);
    const actualWidth = width - marginsAndSuch;

    return <div>
        <V.VictoryPie
            data={ data }
            height={ height }
            width={ width }

            x="name"
            y="value"

            labels={ datum => '$'+datum.value.toFixed(2) }

            labelRadius={ (args) => actualWidth*(1-pieLabelRadius(args.value/total)) }
            style={{
                labels: {
                    textAnchor: "middle",
                    verticalAnchor: "middle",
                }
            }}
        />
    </div>;
};

An alternative approach is using the centroid of the section. I tried this approach as well, and it didn't seem to look quite as nice.

function pieLabelRadius(fraction) {
    const theta = Math.min(fraction, 0.5) * Math.PI;
    return (5/8) * (Math.sin(theta)/theta);
}

P.S. If a pie chart has an inner radius, then all you have to do is take the minimum of pieLabelRadius and the difference between the outer and inner radii.

P.P.S. As with #586, it may be that the best solution is a general framework for handling complex pluggable layout strategies.

[boygirl]

@Thom1729 we are already using the centroid of the arc at a given labelRadius. This lets us easily position the labels in, outside, or inside (in the case of a donut) the slices. The current default labelRadius is calculated as the radius of the pie plus label padding, and I would like to keep this behavior due to the number of people relying on themes / styles for positioning their labels. I would, however, accept a PR that added an "auto" option for labelRadius that implemented the calculation you describe above.

[Thom1729]

I didn't mean to imply that the existing defaults should be changed; I guess that in my excitement over the geometric details I didn't clearly express what I thought might be added.

Right now, I'm passing a function into labelRadius. In an ideal world, I could save this function somewhere (in Victory itself, in a library, in my own app) and just pass in labelRadius={ incenter }. Perhaps this could be integrated into Victory as a named value that means the same thing: labelRadius="incenter".

But two things hinder this: the computation depends on both the outer radius of the chart and on the fraction of each section, but it is not clear to me how to access these in a pluggable manner. As a result, I am having to manually compute the total and the outer radius, which prevents me from generalizing this functionality into a single, importable function that I can pass to labelRadius.

When a function is provided for labelRadius, Victory will pass in the datum. What if the labelRadius callback were passed more values? If it were passed the data as well, then the callback could compute the fraction; or considering the general importance of the fraction for pie chart layout, the callback could be passed the fraction directly (or, more generally, the angle).

To handle the outer radius, what if the callback returned a percentage? Let 100% be the outer radius. Then, this layout strategy could be implemented as follows:

function inscribedCircleRadiusForSection(fraction) {
    if (fraction === 1) {
        return 0;
    } else if (fraction >= .5) { 0.5;
    } else {
        const theta = fraction * Math.PI;
        
        return Math.tan(theta) * Math.tan((Math.PI/2 - theta) / 2);
    }
}

function incenterLabelRadius(datum, { fraction }) {
    const circleRadius = inscribedCircleRadiusForSection(fraction);
    return 100*(1-circleRadius)+'%';
}

<VictoryPie labelRadius={ incenterLabelRadius } />;

The proportional bar chart layout strategy could be implemented similarly, producing percentage values that are interpreted as a fraction of the interior width of the chart.

[boygirl]

I prefer having a named option as you suggest, but computing the label location within the internals of VictoryPie would be dead simple compared to altering the arguments available to the callback. Victory uses a standard callback format for all of its evaluated props and styles, and I would like to maintain that consistency.

Instead, I think the most straightforward implementation would just be to write a method that would replace this line https://github.com/FormidableLabs/victory-pie/blob/master/src/components/helper-methods.js#L59, and run the calculations you suggest when the value of the labelRadius prop is something like "auto" or "inscribed" rather than a number or function.