Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#227 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@hshoja đang làm issue này rồi.

Từ ngày 14/10/2026.

  • #231 của @hshoja — đang mở

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
d3, typescript
Lĩnh vực
data-visualization

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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).

Ngôn ngữ chính
TypeScript
Star
819
Fork
49
Merge trung bình
4 giờ 58 phút
Pull request đã merge (30 ngày)
15

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/charts

Tất cả issue của TanStack/charts

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.