Victory: Can labels be positioned and anchored within a VictoryPie half circle?

[AndresTIY]

Bugs and Questions

Checklist

• [ ] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of Victory

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Trying to find a way to position the labels at the end of a half circle when there's only 2 data points. I've been able to move the labels using VictoryLabel and setting the dy prop to 150, but if the data changes, the labels will still move.

Close to what I was able to do

*When the data changes, the labels move :( *

Here's my data and render method:

// for the first screenshot
  const data = [
    {
      x: 200,
      y: 0.5,
    },
    {
      x: 220,
      y: 0.5,
    },
  ];

//for the second screenshot
  const data = [
    {
      x: 200,
      y: 0.25,
    },
    {
      x: 220,
      y: 0.75,
    },
  ];

//render
<VictoryPie
      labelComponent={<VictoryLabel dy={150} />}
      data={data}
      startAngle={90}
      innerRadius={140}
      colorScale={['grey', 'white']}
      endAngle={-90}
      style={{
        labels: { fontSize: 24, fill: 'white' },
      }}
    />

Reproduction

Please try to reproduce the issue you're seeing in a sandbox. You can fork this sandbox to get started.

If you can't reproduce your issue in a sandbox, please create a minimal git repo that demonstrates the problem you're seeing. Include instructions for installing and reproducing your error.

Feature Requests

Checklist

• [x] I've read through the Docs and Guides to make sure this functionality doesn't already exist

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

Description

Please describe the feature you're requesting in detail.

[boygirl]

@AndresTIY VictoryPie has a labelPosition prop that takes options startAngle, endAngle and centroid. It sounds like adding the option for this prop to take a function and be evaluated for each label would solve your problem, because then you could set the label for the first slice at the startAngle and the second slice at the endAngle. This should be a quick change. I can get a patch out for you tomorrow :)

[AndresTIY]

Interesting! Yes, I was able to use the those labelPosition props but didn't think it'd be possible to only give the first data point startAngle and the second one endAngle. Thanks for your help!

[boygirl]

published as [email protected]

[AndresTIY]

@boygirl has this also been updated in victory-native?

edit: sorry, just realized I should have opened this issue up in the victory-native github page.

[boygirl]

This issue definitely belongs here, because it's not _specific_ to victory-native, so thank you for opening it here. victory-native uses ^ version ranges for all its victory-* dependencies, so you should be able to pick up this patch to victory-pie with a fresh npm install. (Might need to clear out your node_modules)