Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Feature] Readable outside labels for crowded pie and donut charts

Open
  • Is something wrong?
#227 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@hshoja is already working on this.

Since Oct 14, 2026.

  • #231 by @hshoja — open

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
d3, typescript
Domain
data-visualization

Research direction

Start with the existing radialRule and radialText marks and the pie(...) helper used in the snippet, to see how outside labels are positioned by slice angle today. The proposed radialLabels mark would need a side-by-side stacking and collision-resolution layout, so the API shape (new mark or a radialText option) should be agreed with maintainers before any code. Done means labels on both sides of the pie do not overlap, stay within chart bounds, hide lowest-priority labels first, and respect maxShift, with tests.

Written by the indexing model from the issue text.

Description

Problem

When a pie has many small, adjacent slices, outside labels made with
radialRule + radialText are placed on their slice angle and overlap.
There is no built-in way to spread or hide them, so apps must write their own
pixel layout.

const browsers = [
  { name: 'Chrome', share: 64.2 }, { name: 'Safari', share: 18.9 },
  { name: 'Edge', share: 5.4 }, { name: 'Firefox', share: 3.1 },
  { name: 'Samsung', share: 2.4 }, { name: 'Opera', share: 2.0 },
  { name: 'UC', share: 1.2 }, { name: 'Yandex', share: 0.9 },
  { name: 'Vivaldi', share: 0.7 }, { name: 'Brave', share: 0.6 },
  { name: 'Other', share: 0.6 },
]
Image
Proposal

A radialLabels polar mark that draws outside labels with elbow connectors:

  • labels stack on each side of the pie, in slice order;
  • overlapping labels move apart as little as possible, inside the chart bounds;
  • when a side is full, the lowest-priority labels hide first (default: value, so the smallest slices);
  • optional maxShift hides labels that would move too far from their slice.
radialLabels(pie(browsers, { value: 'share' }), {
  text: (row) => `${row.name} ${row.share}%`,
  key: 'name',
  color: 'name',
  maxShift: 24,
})
Image Image

I have a working implementation with tests and docs, and can open a PR if this direction fits.
Happy to change the API shape (for example, an option on radialText instead of a new mark).

Dominant language
TypeScript
Stars
819
Forks
49
Avg merge
4h 40m
Merged PRs (30d)
16

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TanStack/charts

All issues in TanStack/charts

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.