Skip to content

Add Cartesian axis title styling - #121

Open
wojtekmaj wants to merge 1 commit into
TanStack:mainfrom
wojtekmaj:issue-93-axis-title-styling
Open

Add Cartesian axis title styling#121
wojtekmaj wants to merge 1 commit into
TanStack:mainfrom
wojtekmaj:issue-93-axis-title-styling

Conversation

@wojtekmaj

@wojtekmaj wojtekmaj commented Aug 27, 2026

Copy link
Copy Markdown

Extends the object form of axis.label with fontSize, fontWeight, fill, and opacity; fill follows the existing scene-text paint vocabulary and represents the title color. String labels and omitted fields preserve the current typography, theme foreground, and 0.76 opacity. The options resolve into the shared scene label before measurement, so automatic offsets and margins account for configured typography across SVG, Canvas, React Native, facets, and motion.

Adds focused renderer and layout coverage, reference documentation, and a composed-chart catalog example. The API covers downstream dashboard title styling without a custom renderer or CSS override.

Bundle impact is 169 minified bytes / 29 gzip bytes on the locked line + static SVG consumer. The dedicated styled-title fixture adds 0.06 KiB gzip and no retained modules over that consumer; pnpm bundle:check reproduces the measurement. No dependency was added.

Closes #93.

Summary by CodeRabbit

  • New Features

    • Added configurable Cartesian axis-title styling for font size, font weight, color, and opacity.
    • Existing string-based axis titles retain their default styling.
    • Styled titles are automatically measured to preserve appropriate layout and margins.
    • Configuration works across SVG, Canvas, React Native, and animated charts.
  • Documentation

    • Added guidance and examples for styling axis titles and using automatic layout.

@coderabbitai

coderabbitai Bot commented Aug 27, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: eb91946b-b2d5-4eed-8abc-2c3b174377c9

📥 Commits

Reviewing files that changed from the base of the PR and between 258ed39 and ce1a6a5.

⛔ Files ignored due to path filters (1)
  • benchmarks/conformance/previews/70-composed-chart.svg is excluded by !**/*.svg
📒 Files selected for processing (31)
  • .changeset/bright-axis-titles.md
  • API-FRICTION.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/cases/70-composed-chart/case.json
  • benchmarks/conformance/cases/70-composed-chart/example.tsx
  • benchmarks/conformance/cases/70-composed-chart/recharts.ts
  • benchmarks/conformance/cases/70-composed-chart/tanstack.test.ts
  • benchmarks/conformance/catalog-index.json
  • benchmarks/conformance/previews/manifest.json
  • benchmarks/entries/charts-axis-label-styles.ts
  • docs/comparison.md
  • docs/concepts/layout-axes-and-coordinates.md
  • docs/guides/themes-and-styling.md
  • docs/reference/scales-guides-and-color.md
  • docs/reference/types.md
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
  • packages/charts-core/docs/guides/themes-and-styling.md
  • packages/charts-core/docs/reference/scales-guides-and-color.md
  • packages/charts-core/docs/reference/types.md
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/facet.test.ts
  • packages/charts-core/src/motion.test.ts
  • packages/charts-core/src/scene-layout.test.ts
  • packages/charts-core/src/scene.ts
  • packages/charts-core/src/svg-renderer.test.ts
  • packages/charts-core/src/types.ts
  • packages/react-native-charts/src/SvgScene.test.tsx
  • scripts/measure-bundles.mjs

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.


📝 Walkthrough

Walkthrough

Cartesian axis titles now support configurable fontSize, fontWeight, fill, and opacity. Scene layout measures these values for automatic margins. Tests cover scene layout, SVG, Canvas, React Native, motion, and conformance rendering.

Changes

Styled Cartesian axis titles

Layer / File(s) Summary
Axis title contract and scene resolution
packages/charts-core/src/types.ts, packages/charts-core/src/scene.ts, packages/charts-core/src/scene-layout.test.ts
The axis-label contract supports typography and paint options. Scene labels apply defaults and use configured typography during automatic layout measurement.
Renderer and motion validation
packages/charts-core/src/*renderer.test.ts, packages/charts-core/src/canvas.test.ts, packages/charts-core/src/motion.test.ts, packages/react-native-charts/src/SvgScene.test.tsx
Renderer tests verify axis-title text, typography, color, opacity, and motion interpolation across SVG, Canvas, native, and shared scene rendering.
Conformance and API documentation
benchmarks/conformance/cases/70-composed-chart/*, benchmarks/conformance/catalog-index.json, docs/..., packages/charts-core/docs/..., API-FRICTION.md, .changeset/bright-axis-titles.md
The composed-chart case exercises independently styled titles. Documentation and release notes describe the object-form label options, defaults, and automatic layout behavior.
Bundle fixture and measurement updates
benchmarks/entries/charts-axis-label-styles.ts, scripts/measure-bundles.mjs, benchmarks/bundle-size/*, benchmarks/comparison/bundle-baseline.json, docs/comparison.md, packages/charts-core/docs/comparison.md
A styled-title SVG fixture and incremental gzip budget were added. Bundle measurements, baselines, and snapshot ranges were refreshed.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: ⚪ Minimal · up to ce1a6

This additive axis-title styling change preserves existing defaults and introduces no actionable merge-blocking risk; it is merge-ready after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant ChartConfig
  participant SceneLayout
  participant SVGRenderer
  participant CanvasRenderer
  participant NativeRenderer
  ChartConfig->>SceneLayout: provide styled axis label
  SceneLayout->>SceneLayout: measure configured font size and weight
  SceneLayout->>SVGRenderer: pass resolved label
  SceneLayout->>CanvasRenderer: pass resolved label
  SceneLayout->>NativeRenderer: pass resolved label
  SVGRenderer-->>ChartConfig: render styled SVG title
  CanvasRenderer-->>ChartConfig: paint styled Canvas title
  NativeRenderer-->>ChartConfig: render styled native title
Loading

Suggested reviewers: tannerlinsley

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 8 functions across 13 files. (18 skipped: … Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: styling options for Cartesian axis titles.
Linked Issues check ✅ Passed The changes satisfy issue #93 by adding font size, font weight, color through fill, and opacity controls for Cartesian axis titles. Tests cover layout measurement, automatic margins, SVG, Canvas, Reac…
Out of Scope Changes check ✅ Passed The documentation, tests, conformance example, benchmark updates, changeset, and bundle measurements directly support the axis-title styling feature. No unrelated code changes are evident.
Full details: Linked Issues check

Explanation

The changes satisfy issue #93 by adding font size, font weight, color through fill, and opacity controls for Cartesian axis titles. Tests cover layout measurement, automatic margins, SVG, Canvas, React Native, facets, and motion behavior.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 8 functions across 13 files. (18 skipped: 18 unsupported.)

  • Fix all pre-merge checks with AI
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow styling Cartesian axis titles

1 participant