Skip to content

Add Bar Chart#5

Open
0xChandi wants to merge 6 commits intobenjitaylor:mainfrom
0xChandi:feat/bar-chart
Open

Add Bar Chart#5
0xChandi wants to merge 6 commits intobenjitaylor:mainfrom
0xChandi:feat/bar-chart

Conversation

@0xChandi
Copy link

Bar chart renders time-bucketed data (e.g. volume) alongside the existing line/candlestick chart. Two modes:

  • default: bars in a separate strip below the main chart (20% height)
  • overlay: semi-transparent bars behind the line

Features:

  • Smooth Y-range scaling using the same lerp pattern as the line chart
  • Scrub dimming, reveal animations, and choreographed entrance
  • Optional value labels (barLabels prop)
  • Custom bar color override (barColor prop)
  • Works with both line and candlestick chart modes

New props: bars, barMode, barWidth, barColor, barLabels
New types: BarPoint, BarMode

Sample (demo.html):
image

0xChandi and others added 6 commits February 25, 2026 01:45
Bar chart renders time-bucketed data (e.g. volume) alongside the
existing line/candlestick chart. Two modes:
- default: bars in a separate strip below the main chart (20% height)
- overlay: semi-transparent bars behind the line

Features:
- Smooth Y-range scaling using the same lerp pattern as the line chart
- Scrub dimming, reveal animations, and choreographed entrance
- Optional value labels (barLabels prop)
- Custom bar color override (barColor prop)
- Works with both line and candlestick chart modes

New props: bars, barMode, barWidth, barColor, barLabels
New types: BarPoint, BarMode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix out-of-scope adaptiveSpeed in candle pipeline causing bars to not render
- Consolidate two bar chart sections into single chart with mode toggle
- Add volume bars demo to index.html dev page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Right padding was hardcoded to 80px (space for the badge). Now it
adapts: 80px with badge, 54px with grid labels only, 12px with
both off — so the chart fills the available width.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Reduce the time-axis buffer from 5% to 1.5% when the badge is hidden,
so the live dot and fill extend closer to the chart edge. Candle mode
always uses the smaller buffer since it never renders a badge. Add badge
toggle to the demo page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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