Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Feature request: a framework render slot for axis tick labels

オープン
  • 何か問題がありますか？
#181 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
35/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
react, typescript
領域
data-visualization

調査の方向性

Start by reading the axis tick configuration under scales.y and the existing tooltip render path, RendererChart from @tanstack/charts/react/tooltip. The issue suggests either an axis render slot or exposing resolved tick positions and the plot rect, so the API and layout behavior still need design. Done means framework-rendered tick labels can be positioned and sized by the chart without duplicating plot layout math.

索引モデルが issue の本文から書いたものです。

説明

Version: @tanstack/charts 1.0.0, React adapter

Problem

Tick labels are SVG text. ticks.format returns a string. There is no way to render a framework component (an icon, an image, a styled badge) as a tick label.

Recharts lets you pass a component as tick. We used this for an Elo chart. Each y tick shows a skill level icon and the Elo value next to it. Each x tick on one variant shows a styled match result marker.

The tooltip already has a framework render path (RendererChart from @tanstack/charts/react/tooltip). Tick labels do not.

Our workaround

We hide the axis labels in the chart and render them as HTML over the plot. The component must know the plot layout:

  • the y position of each tick, as a fraction of the y domain
  • the x position of each tick, as a fraction of the x domain
  • the plot insets and the x padding, so that the HTML labels line up with the SVG plot

Simplified from our code:

// Our own copy of the plot insets (example values). It must match the
// chart definition.
const layout = { top: 8, bottom: 24, start: 72, end: 8, xPadding: 12 };

<Frame>
  <Chart definition={definition} ariaLabel={label} height={height} />

  <YAxisLayer
    style={{
      insetBlock: `${layout.top}px ${layout.bottom}px`,
      inlineSize: layout.start - TICK_GAP,
    }}
  >
    {yTicks.map(tick => (
      <SkillTick key={tick} value={tick} offset={getYFraction(yDomain, tick)} />
    ))}
  </YAxisLayer>

  <PlotLayer
    style={{
      insetBlock: `${layout.top}px ${layout.bottom}px`,
      insetInline: `${layout.start + layout.xPadding}px ${layout.end + layout.xPadding}px`,
    }}
  >
    {rows.map(row => (
      <ResultTick key={row.x} row={row} position={getXFraction(xDomain, row.x)} />
    ))}
  </PlotLayer>
</Frame>

This works, but:

  • We copy the scale math and the plot insets into the component. If the library changes its layout, the labels move away from the plot.
  • The library cannot measure the labels, so we reserve the label space by hand (a fixed gap and a fixed width).
  • The labels are not part of the chart accessibility tree.

Suggested API

A render slot on the axis, for the adapters that support it. For example:

scales: {
  y: {
    scale: scaleLinear,
    axis: {
      ticks: {
        render: tick => <SkillTick value={tick.value} />,
        // the space the library reserves for each label
        size: { width: 64, height: 24 },
      },
    },
  },
},

The library positions each slot at the tick, like it does for the tooltip. An alternative is to expose the resolved tick positions and the plot rect to the framework layer (for example through a callback or a hook), so that an overlay does not have to copy the math.

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

主要言語
TypeScript
スター
842
フォーク
53
平均マージ
3時間 59分
マージ済み PR（30日）
19

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/charts のほかの issue

TanStack/charts の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。