Component: src/components/Chart/BarChart.tsx (~L488-499), using thinIndices() from src/components/Chart/utils.ts (~L283)
Behavior: When a bar chart's category axis has more labels than fit at the current width/font size, BarChart calls thinIndices(data.length, maxLabels) to compute a subset of label indices to render, and simply omits the rest — there is no rotation, truncation-with-ellipsis, or wrapping fallback. The result is bars with no label at all for a majority of categories once category count exceeds roughly 8-9, even though every bar itself still renders. This is misleading — the chart looks complete and quantitatively correct but is not fully labeled, and there's no visual signal (e.g. a "showing N of M" indicator) that labels were omitted.
Suggested fix: replace or supplement the label-thinning behavior with (in order of preference): (1) rotate labels (e.g. up to 90°) when they don't fit horizontally, similar to Chart.js's default ticks.maxRotation/autoSkip behavior; (2) truncate long labels with an ellipsis + full text in a tooltip; (3) as a last resort if labels must be dropped, show an explicit indicator that some are hidden, rather than silent omission. A horizontal-bar variant is a reasonable escape hatch for very high cardinality, but BarChart itself should not silently produce partially-unlabeled output.
Repro: Render BarChart with 12+ categories and moderately long labels (e.g. "United States -> Philippines" style corridor names) in a ~600-800px wide container — most labels are omitted with no rotation attempted first.
Context: Reported downstream as lightsparkdev/analytics#2031. A same-repo mitigation (chart-type guidance steering away from high-cardinality vertical bars, plus a fix to a separate Chart.js rendering path) shipped in lightsparkdev/lighthouse#1024, but the underlying origin defect is unaddressed.
Component:
src/components/Chart/BarChart.tsx(~L488-499), usingthinIndices()fromsrc/components/Chart/utils.ts(~L283)Behavior: When a bar chart's category axis has more labels than fit at the current width/font size,
BarChartcallsthinIndices(data.length, maxLabels)to compute a subset of label indices to render, and simply omits the rest — there is no rotation, truncation-with-ellipsis, or wrapping fallback. The result is bars with no label at all for a majority of categories once category count exceeds roughly 8-9, even though every bar itself still renders. This is misleading — the chart looks complete and quantitatively correct but is not fully labeled, and there's no visual signal (e.g. a "showing N of M" indicator) that labels were omitted.Suggested fix: replace or supplement the label-thinning behavior with (in order of preference): (1) rotate labels (e.g. up to 90°) when they don't fit horizontally, similar to Chart.js's default
ticks.maxRotation/autoSkipbehavior; (2) truncate long labels with an ellipsis + full text in a tooltip; (3) as a last resort if labels must be dropped, show an explicit indicator that some are hidden, rather than silent omission. A horizontal-bar variant is a reasonable escape hatch for very high cardinality, butBarChartitself should not silently produce partially-unlabeled output.Repro: Render
BarChartwith 12+ categories and moderately long labels (e.g. "United States -> Philippines" style corridor names) in a ~600-800px wide container — most labels are omitted with no rotation attempted first.Context: Reported downstream as lightsparkdev/analytics#2031. A same-repo mitigation (chart-type guidance steering away from high-cardinality vertical bars, plus a fix to a separate Chart.js rendering path) shipped in lightsparkdev/lighthouse#1024, but the underlying
origindefect is unaddressed.