Conversation
Charts: - Add color, gradientColors, interpolation, showArea, showDots, formatXTick, formatYTick props to Timeline - Add color, radius, formatXTick, formatYTick to ScatterPlot - Add color, gradientColors, thresholds, formatXTick, formatYTick to Histogram - Add color, barPadding, formatYTick, yMin to BarChart - Add color prop to Circles component Bug fixes: - All chart wrapper divs now set height:100% so ResizeObserver measures the correct container height (previously SVG rendered at ~110px regardless of container size) - Timeline now uses marginBottom:77 (matching other charts) so x-axis labels don't overflow the SVG viewport Screenshots: - Regenerated all four chart screenshots with correct dimensions and full label/tick visibility README: - Full prop tables for all four charts including new props - Updated screenshots embedded inline https://claude.ai/code/session_01Bf9veNX9mqfMqrCEGnujAo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
New props (all charts)
color— primary fill/stroke colorformatXTick/formatYTick— custom axis tick formattersTimeline-specific
gradientColors— two-element array for the area fill gradientinterpolation— D3 curve factory (d3.curveBasis,d3.curveStep, etc.)showArea— toggle the filled area (default:true)showDots— overlay circles at each data point (default:false)ScatterPlot-specific
radius— circle radius in pixels or a function(d) => numberHistogram-specific
gradientColors— gradient for barsthresholds— number of binsBarChart-specific
barPadding— fractional gap between bars (0–1)yMin— minimum y-axis domain valueBug fixes
height: 100%, soResizeObserveralways measured ~110px regardless of the container size. Charts now fill their containers correctly.marginBottomwas 40px but the x-axis label sits at y+60 — overflow fixed by settingmarginBottom: 77to match other charts.Screenshots
All four chart screenshots regenerated with full labels, ticks, and data visible:
Test plan
colorprop overrides the default purple on all chart typesshowDots={true}renders circles on Timelinethresholdschanges the number of Histogram binsformatYTick={d => "$" + d}correctly formats BarChart y-axis labels