microsoft / microsoft/flint-chart
No control over axis label font size (layout-computed ~10px, no scale knob)
@Chenglong-MS is already working on this.
Since Jul 23, 2026.
- Dominant language
- TypeScript
- Stars
- 4.2k
- Forks
- 235
- Avg merge
- 17h 45m
- Merged PRs (30d)
- 11
Description
Summary
There is no way to control axis label font size. The assembler emits config.axisX/axisY.labelFontSize ≈ 10, and no chartProperties / options knob changes it. In create_chart_view (rendered client-side at a fixed size, no zoom) the labels are unreadable; in render_chart PNG it is only mitigated because the whole raster is zoomed by scale.
Verified against flint-chart@0.3.0. Source refs at main (commit 95b2552).
Repro
Compile any chart; the spec always contains:
"config": { "axisX": { "labelFontSize": 10 }, "axisY": { "labelFontSize": 10 } }
Passing chartProperties.labelFontSize, options.fontSize, options.fontScale, or shrinking baseSize to force scale-up all have no effect on the emitted label font size.
Root cause
The size is layout-computed (not a literal constant). In packages/flint-js/src/vegalite/instantiate-spec.ts:
const axisXConfig = { labelFontSize: layout.xLabel.fontSize, /* ... */ };
const axisYConfig = { labelFontSize: layout.yLabel.fontSize };
layout.{x,y}Label.fontSize comes from the layout engine (core/compute-layout.ts) and resolves to ~10 for typical sizes. No option is plumbed to scale it, and no ChartPropertyDef exposes it — so it never appears in getChartOptions / the customization panel, and (see the companion validation issue) any attempt to set it is silently dropped.
Suggested fix (incremental)
-
Add
options.fontScale(number, default 1) — ortheme: "default" | "presentation"— toAssembleOptions. -
In
instantiate-spec.ts, scale the computed sizes before emitting, and apply the same factor to legend/title label sizes for consistency:const fs = ctx.assembleOptions?.fontScale ?? 1; const axisXConfig = { labelFontSize: Math.round(layout.xLabel.fontSize * fs), /* ... */ }; const axisYConfig = { labelFontSize: Math.round(layout.yLabel.fontSize * fs) }; -
Expose it as a shared
ChartPropertyDef(continuous) so it shows up in the customization panel and passes validation — enabling a live text-size control increate_chart_viewalongside Corners / Totals / Labels.
Contributor guide
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.
Assessment
This issue has not been assessed yet.