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

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

Đang mở
  • Có gì không ổn?
#180 0 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

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
54/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ệ
typescript
Lĩnh vực
data-visualization

Hướng nghiên cứu

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.

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

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
769
Fork
47
Merge trung bình
6 giờ 9 phút
Pull request đã merge (30 ngày)
20

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.