Waterfall Chart ignores field_display_names and leaks internal __wf_lead field into axis title
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 88/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- data-visualization
Research direction
Start in packages/flint-js/src/vegalite/templates/waterfall.ts, especially instantiate(), and compare its use of ctx.resolvedEncodings with buildVLEncodings in vegalite/assemble.ts. Verify the compiled Waterfall spec with the provided compile_chart reproduction. Done means the configured display names appear on the x and y axes and __wf_lead does not appear in any title.
Written by the indexing model from the issue text.
Description
Summary
On Waterfall charts, field_display_names is ignored and the internal window-transform field __wf_lead leaks into the x-axis title. Line/Bar/Area charts apply field_display_names correctly, so this is Waterfall-template–specific.
Verified against flint-chart@0.3.0 (via flint-chart-mcp@0.3.0). Source refs at main (commit 95b2552).
Repro
compile_chart, backend vegalite:
{
"chart_spec": {
"chartType": "Waterfall Chart",
"encodings": { "x": { "field": "week" }, "y": { "field": "wsu_change" } }
},
"field_display_names": { "wsu_change": "WSU weekly change", "week": "Week (Mon, JST)" }
}
Observed: compiled spec has "title": "wsu_change" on the y encoding; the x-axis title renders as week, __wf_lead. Neither display name is applied.
Expected: y-axis title "WSU weekly change", x-axis title "Week (Mon, JST)", no internal field in any title.
The same input on Line / Bar / Area charts applies both display names correctly — so the generic assembler path is fine; only the Waterfall template is affected.
Root cause
packages/flint-js/src/vegalite/templates/waterfall.ts, instantiate():
-
buildVLEncodings(invegalite/assemble.ts) already writes the display name ontoresolvedEncodings.{x,y}.title. The template destructuresctx.resolvedEncodingsbut discards those titles, hardcoding the raw field name:const { x, y, color, column, row } = ctx.resolvedEncodings; // ... y: { field: "__wf_prev_sum", type: "quantitative", title: yField, // ← raw field, ignores y.title (the display name) ... }, -
The shared
xEncsets no title, so VL auto-derives it from the field. The connector-rule layer addsx2: { field: "__wf_lead" }(also untitled), and VL concatenates every untitled field on the shared x scale into one axis title →"week, __wf_lead".
Suggested fix
Use the titles the assembler already resolved, and suppress internal fields:
const xTitle = x?.title ?? xField;
const yTitle = y?.title ?? yField;
const xEnc = {
field: xField,
type: "ordinal" as const,
sort: null,
axis: { labelAngle: -45 },
title: xTitle, // was absent
};
// bar layer:
y: { field: "__wf_prev_sum", type: "quantitative", title: yTitle, /* ... */ },
// connector layer — internal fields must never title the shared axis:
x: { field: xField, type: "ordinal", sort: null, bandPosition: 0, title: null },
x2: { field: "__wf_lead", bandPosition: 1, title: null },
General guard: any layer encoding bound to a __wf_* / internal field should set title: null (or axis: { title: null }) so VL never surfaces it.
- Dominant language
- TypeScript
- Stars
- 4.3k
- Forks
- 236
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 12
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.
More from microsoft/flint-chart
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
microsoft/flint-chart#66 ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
microsoft/flint-chart#125 ·
-
microsoft/flint-chart#102 · 4 comments · 1 assignee ·
-
Difficulty 5/5 Over a week Newbie friendliness 15/100
microsoft/flint-chart#100 ·
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
microsoft/flint-chart#80 · 1 comment ·
All issues in microsoft/flint-chart
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100