Add horizontal orientation for bar charts#2744
Open
jswir wants to merge 3 commits into
Open
Conversation
Introduce a `horizontal` tag property (`# bar_chart { horizontal }`)
that flips the category and measure axes, rendering bars left-to-right
instead of bottom-to-top. The Vega spec generator conditionally swaps
scale ranges, axis orientations, and mark encodings. Combinable with
`.stack` for horizontal stacked bars.
Made-with: Cursor
- Fix TS error: wrap horizontal tickCount in signal ref - Fix left padding: use labelWidth instead of xAxisSettings.height for horizontal category labels - Fix grouped horizontal bars: add nested catPos band scale within group marks so sub-bars position correctly along the height axis - Add horizontal support to createMeasureAxis: reference lines draw as vertical dashed lines, overlay covers bottom axis area, brush events use x() instead of y() for position tracking - Add labelWidth to XAxisSettings and ChartLayoutSettings types
4 tasks
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
1 participant
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
# bar_chart { horizontal }tag to render bars horizontally (categories on y-axis, values on x-axis)createMeasureAxisfor interactive reference lines, axis overlay, and brush events on the bottom axiscatPosband scale for correct sub-bar positioningDemo
https://www.loom.com/share/60e15fabe853477da351625571d78ddf
Test plan
horizontal_basicstory renders bars horizontally with categories on the left axishorizontal_with_seriesstory renders grouped bars correctlyhorizontal_stackedstory renders stacked bars correctly🤖 Generated with Claude Code