Skip to content

Fix Rose Chart area encoding: use sqrt radius on ECharts and Chart.js to match Vega-Lite#51

Merged
Chenglong-MS merged 10 commits into
devfrom
copilot/fix-rose-chart-encoding
Jul 12, 2026
Merged

Fix Rose Chart area encoding: use sqrt radius on ECharts and Chart.js to match Vega-Lite#51
Chenglong-MS merged 10 commits into
devfrom
copilot/fix-rose-chart-encoding

Conversation

Copilot AI commented Jul 11, 2026

Copy link
Copy Markdown

The same Rose Chart ChartAssemblyInput compiled to different perceptual encodings per backend: Vega-Lite set radius.scale.type = 'sqrt' (wedge area ∝ value), while ECharts and Chart.js placed raw values on linear radial scales (area ∝ value²). A 4:1 input rendered as 4× area in Vega-Lite but 16× in the other two.

Neither ECharts' polar radiusAxis nor Chart.js' radial r scale supports a sqrt type, so the transform is applied to the series data itself, with the true value preserved for the tooltip.

Changes

  • ECharts (echarts/templates/rose.ts)
    • Single-series data items now carry value: sqrt(raw) plus _rawValue.
    • Stacked series use incremental radii sqrt(cumsum) − sqrt(prevCumsum), so each stacked segment's area — not just the outer edge — is proportional to its value (mirrors Vega-Lite's stacked sqrt scale).
    • Tooltip formatter reports _rawValue; sqrt-space radial tick labels are hidden.
  • Chart.js (chartjs/templates/rose.ts)
    • Dataset data becomes sqrt(value); a tooltip label callback reports the true value (kept in a rawValues closure aligned after slice sorting); sqrt-space radial ticks are hidden.
  • Tests (tests/rose-area-truth.test.ts) — asserts the sqrt/area invariant across all three backends, including the stacked cumulative-radius case and raw-value preservation.

Result

For values 9:4:1, all three backends now render radii 3:2:1 (area 9:4:1):

assembleECharts(input).series[0].data;
// [{ value: 3, name: 'C', _rawValue: 9 }, { value: 2, name: 'A', _rawValue: 4 }, { value: 1, name: 'B', _rawValue: 1 }]

assembleChartjs(input).data.datasets[0].data; // [3, 2, 1]  (tooltips still show 9, 4, 1)

The stacked case stays area-true per segment: D1 = {S1: 9, S2: 16} → outer edge at sqrt(25) = 5, with the S1 segment at radius 3 and the S2 increment at 2.

Copilot AI changed the title [WIP] Fix Rose Chart encoding inconsistencies across backends Fix Rose Chart area encoding: use sqrt radius on ECharts and Chart.js to match Vega-Lite Jul 11, 2026
Copilot AI requested a review from Chenglong-MS July 11, 2026 17:17
@Chenglong-MS Chenglong-MS changed the base branch from main to dev July 11, 2026 17:32
@Chenglong-MS Chenglong-MS marked this pull request as ready for review July 12, 2026 06:17
@Chenglong-MS Chenglong-MS merged commit 027d9ec into dev Jul 12, 2026
7 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.

Rose Chart encodes value→area inconsistently across backends: Vega-Lite uses a sqrt radius scale, ECharts and Chart.js are linear

2 participants