Skip to content

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

Description

@soh-tetsu

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions