Skip to content

Add dual y-axis (y2) for line, area, bar, and combo charts - #63

Merged
terzioglub merged 3 commits into
mainfrom
terzioglub/dual-axis-charts
Aug 18, 2026
Merged

Add dual y-axis (y2) for line, area, bar, and combo charts#63
terzioglub merged 3 commits into
mainfrom
terzioglub/dual-axis-charts

Conversation

@terzioglub

Copy link
Copy Markdown
Contributor

Adds an optional second value axis (y2) on the right side of cartesian charts. A y-column plots against the right axis when listed in y2.field; all other series stay on the left y axis. This lets two series on different scales (e.g. revenue in $ and conversion rate in %) share one chart without the smaller-scale series being squashed flat.

  • y2 is a full axis encoding — same title, format, beginAtZero, curve, dash as y.
  • Ticks and tooltip values format per axis (left uses y.format, right uses y2.format).
  • Supported on line, area, bar, and combo. Axis assignment (y vs y2) is independent of shape (bar vs line via lines).
  • Validation: y2.type must be number, columns are disjoint from y, and y2 is rejected with stacked, horizontal bars, or color.
  • Wired through the Go model, validator, JSON schema, TSX loader, and the Recharts renderer; docs and the create-dashboard skill updated; testdata/dashboards/charts.yml combo now uses y2.

Example

```yaml
chart: combo
lines: [conversion_rate]
y: { field: [revenue], title: Revenue, format: "$,.0f" }
y2: { field: [conversion_rate], title: Conversion, format: ".1%" }
```

A y-column plots against an optional right-hand axis when listed in
y2.field; all other series stay on the left y axis. y2 is a full axis
encoding (title/format/beginAtZero/curve/dash), and ticks and tooltip
values format per axis. Validated on line/area/bar/combo, number type,
disjoint from y, and not combined with stacked/horizontal/color.
@greptile-apps

greptile-apps Bot commented Aug 18, 2026

Copy link
Copy Markdown

Fix all with Greploop Fix All in Conductor

Prompt To Fix All With AI
### Issue 1
frontend/src/components/widgets/ChartWidget.tsx:1179
**Reference guides lose their axis**

When a line, area, or bar chart combines `y2` with a y-oriented reference line or band, the axes are renamed `left` and `right` while the reference retains the default axis ID, causing the configured guide to disappear.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Reviews (1): Last reviewed commit: "Add dual y-axis (y2) for line, area, bar..." | Re-trigger Greptile

? { label: { value: widget.y2.title, angle: 90, position: "insideRight" as const, style: { ...AXIS_STYLE, fill: axisColor } } }
: {})}
/>
) : null;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Reference guides lose their axis

When a line, area, or bar chart combines y2 with a y-oriented reference line or band, the axes are renamed left and right while the reference retains the default axis ID, causing the configured guide to disappear.

Prompt To Fix With AI
This is a comment left during a code review.
Path: frontend/src/components/widgets/ChartWidget.tsx
Line: 1179

Comment:
**Reference guides lose their axis**

When a line, area, or bar chart combines `y2` with a y-oriented reference line or band, the axes are renamed `left` and `right` while the reference retains the default axis ID, causing the configured guide to disappear.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fix in Conductor

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 6e3f614renderRefs now takes a yAxisId and the line/area/bar cases pass leftAxisId, so refLines/refBands bind to the left axis when y2 is present (undefined and unchanged otherwise). Note combo is excluded since the validator already restricts refLines/refBands to line/area/bar/forest. Verified: a y-axis Target ref line now renders on a dual-axis line chart.

@greptile-apps

greptile-apps Bot commented Aug 18, 2026

Copy link
Copy Markdown

Reviews (2): Last reviewed commit: "gofmt: align widget struct tags" | Re-trigger Greptile

renderRefs now takes a yAxisId so refLines/refBands resolve to an
existing axis when y2 is present; without y2 the id is undefined and
behaviour is unchanged.
@greptile-apps

greptile-apps Bot commented Aug 18, 2026

Copy link
Copy Markdown

Reviews (3): Last reviewed commit: "Bind reference lines/bands to the left a..." | Re-trigger Greptile

@terzioglub
terzioglub merged commit 76e5942 into main Aug 18, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants