Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Single-datum bars are capped at 48px, and scalar `radius` gives elliptical SVG corners on narrow bars

Open
  • Is something wrong?
#197 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
58/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
d3, typescript
Domain
data-visualization

Research direction

Start with the repro file packages/charts-core/test-repro/12-bar-rect-geometry.test.ts, run with pnpm vitest run on it. For A, look at the width fallback around bar.ts:872-873 and mirror the bandX.width option; the option name is still open. For B, the rx emission is at svg-renderer.ts:126, so also emit ry and clamp both radii per axis as canvas.ts:1424 does. Done when both tests pass and the radius docs in bar-and-rect.md still match.

Written by the indexing model from the issue text.

Description

A. Single-datum bars are capped at 48px

Expected: a width (barY) / height (barX) option applied in the fallback, mirroring bandX.width.

B. Scalar radius is elliptical on narrow bars in SVG
  • A scalar radius reaches the scene as { radius } with no bar size: rect-radius-state-internal.ts:27-31.
  • SVG emits rx only: svg-renderer.ts:126. Per SVG 2, ry defaults to rx and each is clamped on its own axis, so a bar narrower than 2 * radius gets elliptical corners (not run: jsdom does no layout).
  • Canvas clamps one circular radius to min(radius, width / 2, height / 2): canvas.ts:1424.
  • The docs say a number rounds every corner (bar-and-rect.md:124).

Expected: SVG emits ry too and clamps both like Canvas.

Repro

packages/charts-core/test-repro/12-bar-rect-geometry.test.ts, run with pnpm vitest run <path> from the repo root. Both tests assert the expected behavior and fail on main.

import { scaleBand, scaleLinear } from 'd3-scale'
import { expect, it } from 'vitest'
import { barY } from '../src/bar'
import { createChartScene, defineChart } from '../src/scene'
import { renderChartSvg } from '../src/svg'

const rects = (nodes: any[]): any[] =>
  nodes.flatMap((n) => (n.kind === 'rect' ? [n] : rects(n.children ?? [])))
const y = { scale: scaleLinear().domain([0, 100]) }

it('A: a single bar on a linear x scale can be wider than 48px', () => {
  const scene = createChartScene(
    defineChart({
      marks: [barY([{ k: 1, v: 90 }], { x: 'k', y: 'v' })],
      scales: { x: { scale: scaleLinear().domain([0, 2]) }, y },
    }),
    { width: 600, height: 240 },
  )
  expect(rects(scene.nodes)[0].width).toBeGreaterThan(48)
})

it('B: scalar radius on a narrow bar is circular in SVG', () => {
  const scene = createChartScene(
    defineChart({
      marks: [barY([{ k: 'a', v: 90 }], { x: 'k', y: 'v', radius: 8 })],
      scales: { x: { scale: scaleBand<string>().domain(['a', 'b']).padding(0.8) }, y },
    }),
    { width: 120, height: 240 },
  )
  expect(renderChartSvg(scene, { ariaLabel: 'bars' }).match(/<rect[^>]*\brx=[^>]*>/)![0]).toMatch(/\bry="/)
})

Output (both fail):

A: AssertionError: expected 48 to be greater than 48
B: AssertionError: expected '<rect data-ts-key="bar-y-0:object:nul…' to match /\bry="/

Downstream measurement (bklit migration, Chrome): a tuple [r, r, r, r] gives circular corners; a scalar differs only when the bar is narrower or shorter than 2 * radius.

Dominant language
TypeScript
Stars
819
Forks
49
Avg merge
8h 8m
Merged PRs (30d)
11

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TanStack/charts

All issues in TanStack/charts

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.