livewire / livewire/flux

Support horizontal bar charts via an `orientation` prop on `flux:chart`

Open
#2,713 0 comments 2 reactions 0 assignees View on GitHub

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 left and the y axis to bottom
  • tick label placement, and skipping handleTickOverflow on the x axis in horizontal mode
  • grid line and axis line orientation
  • tooltip hit testing — closestXPoint must be fed mouseY instead of mouseX, 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.