Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#227 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@hshoja ya está trabajando en esto.

Desde el 14/10/2026.

  • #231 de @hshoja — abierto

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
d3, typescript
Área
data-visualization

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
819
Forks
49
Merge medio
4 h 40 min
PR fusionados (30 d)
16

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/charts

Todos los issues de TanStack/charts

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.