Skip to content

Add angular and dotFill props for line style customization#9

Open
leanthebean wants to merge 1 commit intobenjitaylor:mainfrom
leanthebean:feat/angular-dotfill
Open

Add angular and dotFill props for line style customization#9
leanthebean wants to merge 1 commit intobenjitaylor:mainfrom
leanthebean:feat/angular-dotfill

Conversation

@leanthebean
Copy link

Summary

Two new optional props for customizing the line and fill style:

  • angular — draws straight line segments between data points instead of the default monotone cubic spline. Useful for financial/portfolio charts where interpolation between data points is undesirable.
  • dotFill — replaces the gradient fill under the curve with a stippled dot pattern that fades from top to bottom. Pairs well with angular for a cleaner aesthetic.

Both default to false, preserving existing behavior.

<Liveline
  data={data}
  value={value}
  angular={true}
  dotFill={true}
/>

Changes

  • src/types.ts — added angular and dotFill to LivelineProps
  • src/draw/line.ts — added drawStraight(), drawDottedFill(), CurveStyle interface; modified renderCurve() to select path/fill strategy
  • src/draw/index.ts — threaded curveStyle through DrawOptions to drawLine()
  • src/useLivelineEngine.ts — added to EngineConfig, forwarded to draw options
  • src/Liveline.tsx — destructured new props, forwarded to engine

All existing tests pass. No breaking changes.

Three new optional props on the Liveline component:

- `angular` (boolean, default false): draws straight line segments
  between data points instead of the default monotone cubic spline.

- `dotFill` (boolean, default false): replaces the gradient fill
  under the curve with a stippled dot pattern that fades top to bottom.

- `dashLine` (boolean, default true): controls the horizontal dashed
  line drawn at the current value. Set to false to hide it.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@leanthebean leanthebean force-pushed the feat/angular-dotfill branch from 51f9605 to 6e8607f Compare March 24, 2026 23:01
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.

1 participant