microsoft / microsoft/flint-chart

No control over axis label font size (layout-computed ~10px, no scale knob)

Open
#67 1 comment 1 reaction 1 assignee View on GitHub

@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)

  1. Add options.fontScale (number, default 1) — or theme: "default" | "presentation" — to AssembleOptions.

  2. 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) };
    
  3. Expose it as a shared ChartPropertyDef (continuous) so it shows up in the customization panel and passes validation — enabling a live text-size control in create_chart_view alongside Corners / Totals / Labels.

Contributor guide

Open the contributing guide

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.