Allow configuring line caps on line marks

[wojtekmaj]

Adds lineCap and lineJoin to the shared options used by lineY and lineX. Both are typed from SceneStyle, and omitted values continue to render as round, so existing charts keep their current appearance. lineCap: 'butt' gives Recharts/SVG-default migrations a direct consumer configuration without patching rendered output.

The options flow through the renderer-neutral scene style contract to SVG, Canvas, motion updates, static export, and React Native. The composed-chart catalog case demonstrates the butt endpoint, and the reference and example documentation cover both line directions.

No dependency or eager renderer import was added. The repository's exact bundle policy reports +23 B minified and +8–9 B gzip for line consumers, with renderer hosts and unrelated locked bundles unchanged. Public type and renderer-path coverage, bundle checks, package checks, docs, catalog checks, typechecking, and framework suites pass; the DOM suite also passes when run without concurrent workspace validation load.

Closes #119

Summary by CodeRabbit

• New Features

  • Added lineCap and lineJoin options to lineX and lineY charts.
  • Supports renderer-compatible styles such as butt, square, and bevel.
  • Defaults remain round when options are omitted.
  • Style changes update correctly during chart motion and SVG export.

• Documentation

  • Added usage examples and reference documentation for line endpoint and corner styling.

• Tests

  • Expanded renderer, export, motion, and conformance coverage for the new options.

[coderabbitai]

Warning

Review limit reached

Next included review available in 33 minutes.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6ec380a9-0a74-41a4-88c0-55f685250e1c

📥 Commits

Reviewing files that changed from the base of the PR and between ba8c895 and 090006a.

📒 Files selected for processing (4)

• docs/reference/marks/line-and-area.md
• packages/charts-core/docs/reference/marks/line-and-area.md
• packages/charts-core/src/canvas.test.ts
• packages/charts-core/src/line.test.ts

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: 2be4e386-7e0d-4319-9417-9772ce73778b

📥 Commits

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

⛔ Files ignored due to path filters (1)

• benchmarks/conformance/previews/70-composed-chart.svg is excluded by !**/*.svg

📒 Files selected for processing (20)

• .changeset/line-cap-options.md
• API-FRICTION.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/catalog-index.json
• benchmarks/conformance/previews/manifest.json
• docs/comparison.md
• docs/examples/lines-and-areas.md
• docs/reference/marks/line-and-area.md
• packages/charts-core/docs/comparison.md
• packages/charts-core/docs/examples/lines-and-areas.md
• packages/charts-core/docs/reference/marks/line-and-area.md
• packages/charts-core/src/canvas.test.ts
• packages/charts-core/src/export.test.ts
• packages/charts-core/src/line.test.ts
• packages/charts-core/src/line.ts
• packages/charts-core/src/motion.test.ts
• packages/react-native-charts/src/SvgScene.test.tsx

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

---

📝 Walkthrough

Walkthrough

Changes

Line style options

Layer / File(s)	Summary
Line style contract and rendering packages/charts-core/src/line.ts, packages/charts-core/src/line.test.ts	lineY and lineX accept lineCap and lineJoin values from SceneStyle. Rendering uses authored values and defaults to round. Tests cover runtime behavior and type restrictions.
Renderer, export, and motion validation packages/charts-core/src/canvas.test.ts, packages/charts-core/src/export.test.ts, packages/charts-core/src/motion.test.ts, packages/react-native-charts/src/SvgScene.test.tsx	Tests verify cap and join styles in Canvas operations, serialized SVG, synchronous motion updates, and React Native SVG output.
Conformance, documentation, and release metadata benchmarks/conformance/..., docs/examples/lines-and-areas.md, docs/reference/marks/line-and-area.md, packages/charts-core/docs/..., API-FRICTION.md, .changeset/line-cap-options.md	Examples, conformance metadata, API records, reference pages, and release metadata describe and exercise configurable line caps and joins.
Bundle baseline updates benchmarks/bundle-size/universal-baseline.json, benchmarks/comparison/bundle-baseline.json, docs/comparison.md, packages/charts-core/docs/comparison.md	Bundle metadata, recorded sizes, snapshot dates, and documented ranges are refreshed.

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

Merge Risk: ⚪ Minimal · up to ba8c8

The PR adds optional line-cap and line-join styling while preserving existing round defaults and rendering behavior; no actionable merge-blocking risk remains after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant ChartDefinition
  participant ScenePolyline
  participant CanvasRenderer
  participant SVGExporter
  ChartDefinition->>ScenePolyline: provide lineCap and lineJoin
  ScenePolyline->>CanvasRenderer: apply resolved stroke styles
  ScenePolyline->>SVGExporter: serialize resolved stroke styles
  CanvasRenderer-->>SceneDefinition: paint configured line
  SVGExporter-->>ChartDefinition: return SVG stroke attributes

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 2 functions across 7 files. (13 skipped: 1…	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 describes the configurable line-cap change. It omits line joins, but it remains directly related to the primary objective.
Linked Issues check	✅ Passed	The pull request implements configurable lineCap and lineJoin options for lineY and lineX using SceneStyle values, preserves round defaults, and verifies SVG, Canvas, motion, export, and React Native …
Out of Scope Changes check	✅ Passed	The changes support issue #119 through implementation, tests, documentation, conformance coverage, export verification, and related benchmark updates. No unrelated code changes are evident.

Full details: Linked Issues check

Explanation

The pull request implements configurable lineCap and lineJoin options for lineY and lineX using SceneStyle values, preserves round defaults, and verifies SVG, Canvas, motion, export, and React Native behavior. This satisfies issue #119.

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 2 functions across 7 files. (13 skipped: 13 unsupported.)

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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