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

Axis tick stubs: no style option, and `ticks: false` also hides the tick labels

Cerrado
  • ¿Algo no está bien?
#180 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
54/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
typescript
Área
data-visualization

Línea de trabajo

Start by reading the axis rendering and tick-count logic in dist/scene.js at the locations cited in the issue, then inspect ChartAxisTickOptions. Compare the two minimal repros with the expected behavior; the issue leaves open whether stubs should inherit the axis line style or get their own option. Done when stub styling and the effect of ticks: false versus { size: 0 } are resolved and documented clearly.

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

Descripción

Version: @tanstack/charts 1.0.0

Problem

(a) Tick stubs ignore the axis line style and have no style of their own

https://github.com/TanStack/charts/pull/148 added ChartGuideLineStyle (stroke, strokeOpacity, strokeWidth, strokeDasharray, lineCap) for grid and the axis line. The tick stubs do not get it.

In dist/scene.js the axis line uses axisStyle(presentation?.line) (lines 933 and 1017), but each tick stub uses axisStyle() with no argument (lines 973 and 1057). So a stub is always theme.foreground at strokeOpacity: 0.28. ChartAxisTickOptions has count, spacing, values, size, padding, format and motion, but no style.

Result: if you color the axis line, the stubs keep the default color, and you cannot match them.

(b) ticks: false hides the labels too, and changes the tick count

tickLabelPresentation returns false when axis.ticks === false (dist/scene.js, about line 1155), so the labels go away with the stubs. resolveTickCount also uses a different fallback count when ticks is false (about line 1127).

Users who come from Recharts (tickLine={false}) or from D3 think of "ticks" as the stub lines. They write ticks: false to remove the stubs, and lose the labels. The correct option is ticks: { size: 0 }, but we found it only by reading the source.

Minimal repro

import { defineChart, lineY } from '@tanstack/charts';
import { scaleLinear } from '@tanstack/charts/scales/linear';

const rows = [
  { x: 0, y: 1 },
  { x: 1, y: 3 },
  { x: 2, y: 2 },
];

// (a) The axis line is red, the stubs stay at the default color.
export const styled = defineChart({
  marks: [lineY(rows, { x: 'x', y: 'y' })],
  scales: {
    x: {
      scale: scaleLinear,
      axis: { line: { stroke: 'red', strokeOpacity: 1 } },
    },
    y: { scale: scaleLinear },
  },
});

// (b) The stubs and the labels both disappear.
export const noStubs = defineChart({
  marks: [lineY(rows, { x: 'x', y: 'y' })],
  scales: {
    x: { scale: scaleLinear, axis: { ticks: false } },
    y: { scale: scaleLinear },
  },
});

Expected

  • (a) A way to style the stubs, for example a ticks.line?: ChartGuideLineStyle | false. Or the stubs inherit the axis line style.
  • (b) The docs say clearly that ticks: false removes the labels too, and that ticks: { size: 0 } removes only the stubs. A ticks.line: false from (a) would make this more obvious.

Actual

  • (a) The stubs always use the theme foreground at 0.28 opacity.
  • (b) ticks: false removes the labels and changes the tick count.

Our workaround

We set ticks: { size: 0 } on each axis that had tickLine={false} in Recharts. We have no workaround for (a), but our designs did not need styled stubs after we removed them.

Related

Written by an agent (Claude Code, claude-opus-5-5).

Lenguaje dominante
TypeScript
Estrellas
842
Forks
53
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.