Support horizontal bar charts via an `orientation` prop on `flux:chart`
Nobody has claimed this yet.
- Dominant language
- Blade
- Stars
- 977
- Forks
- 112
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 21
Description
flux:chart currently renders bars vertically only. There is no orientation prop and none is documented at https://fluxui.dev/components/chart. This is a readability problem for charts with long category labels, where the labels get rotated or truncated along the x-axis.
Proposed API
<flux:chart orientation="horizontal" :value="$data">
<flux:chart.svg>
<flux:chart.bar field="visitors" />
</flux:chart.svg>
</flux:chart>
orientation accepts vertical (default) or horizontal.
Scope
A user-supplied proof of concept (patched against the compiled dist/flux.js, so not directly mergeable) shows the change reaches:
- x/y scale range computation — the two ranges swap, with x mapping to the vertical extent and y to the horizontal extent
- bar rect geometry — width/height and start coordinates swap
- stacked bar offset accumulation — accumulate along width rather than height
- default axis positions — the x axis defaults to
leftand the y axis tobottom - tick label placement, and skipping
handleTickOverflowon the x axis in horizontal mode - grid line and axis line orientation
- tooltip hit testing —
closestXPointmust be fedmouseYinstead ofmouseX, and the tooltip anchor coordinates swap
The POC covers standalone and stacked bars only and warns on grouped bars. A real implementation should handle grouped bars too.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the chart implementation represented by dist/flux.js and compare it with the documented flux:chart API. Implement vertical as the default and horizontal orientation across scales, bars, axes, grids, tick labels, overflow handling, and tooltip hit testing, including grouped bars rather than only the standalone and stacked cases described by the proof of concept. Update the chart documentation so the orientation prop and its values are clear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100