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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

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