fix(Radar): Radar chart normalisation by amaannawab923 · Pull Request #33559 · apache/superset

amaannawab923 · 2025-05-22T09:47:33Z

🔧 Summary

This PR introduces a fix for for the Radar Chart in Superset, addressing a critical issue where large discrepancies in metric magnitudes made the chart visually misleading and unusable for comparison.

🐛 The Issue

When plotting multiple metrics with vastly different scales (e.g., 208000, 2590, 9200), the Radar Chart currently uses a faulty calculation mechanism which renders just a Polygon because each value occupies the max on its axis. This causes small values to appear indistinguishable from large ones—rendering the chart ineffective for visual comparison.

🎥 Before (no normalization):

As it can be seen in above screenshot 797.73 & 2.43k appear visually equivalent, even though they arent & the end user is not able to differentiate between them through the radar chart

🧠 Root Cause

Radar Charts plot all metric values using a common 0-to-max scale. This approach ignores the fact that some metrics may span much smaller ranges. As a result:

A metric like 2.5k appears to stretch just as far as 208k

There’s no visual cue for the viewer to recognize magnitude differences

✅ The Fix

This PR introduces:

A new normalisation function in Radar chart where each metric’s values are scaled between 0 and 1
This results in equal visual weight per metric, regardless of absolute value
Safe denormalization logic for tooltips and labels
Tooltips and labels show original values, not normalized ones
Denormalization map tracks each series’ normalized-to-original value mapping

🧪 How It Works

The Normalize function activates per-series normalization during data transformation.
Original values are stored in a SeriesNormalizedMap structure.
Custom formatters use this map to denormalize values when displaying them in tooltips or labels.

🖼️ UX Enhancements

Tooltip and label values now reflect true, raw numbers even when normalized values are plotted.

Improves clarity when comparing metrics with different scales.

🎥 After (with normalization):

Now 797.73 appears visually appropriate in comparison to 2.43k

Metrics now appear proportionally within their own scale, improving accuracy and readability.

🧰 Developer Notes

Introduced new tooltip formatter and label formatter handling
Implemented safe getDenormalisedSeriesValue() accessor

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

korbit-ai · 2025-05-22T09:47:38Z

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

github-actions · 2025-05-22T10:27:36Z

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-05-22T10:37:02Z

@geido Ephemeral environment spinning up at http://34.213.64.49:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx

amaannawab923 · 2025-05-22T10:56:44Z

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

  const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
  const numberFormatter = getNumberFormatter(numberFormat);
+  const denormalizedSeriesValues: SeriesNormalizedMap = {};
+


We use an Object to store the denormalised values belonging to each series because after normalising we need to pass the denormalised values to the label formatter & tooltip formatter to keep the chart consistent & preserve original values

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Unnecessary Boolean constructor ▹ view	✅ Fix detected
	Inefficient Value Lookup Pattern ▹ view	✅ Fix detected
	Inconsistent Series Name Fallback ▹ view	✅ Fix detected
	Complex Value Formatting Logic ▹ view	✅ Fix detected
	Unsafe Tooltip Formatter Typing ▹ view	✅ Fix detected
	Normalization Zero Division Edge Case ▹ view	🧠 Incorrect

Files scanned

File Path	Reviewed
superset-frontend/plugins/plugin-chart-echarts/src/Radar/types.ts	✅
superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx	✅
superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

  const { name = '', value } = params;
-  const formattedValue = numberFormatter(value as number);
+  const formattedValue = numberFormatter(
+    isNormalised
+      ? (getDenormalisedSeriesValue(name, String(value)) as number)
+      : (value as number),
+  );


superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

+    if (
+      Object.prototype.hasOwnProperty.call(
+        denormalizedSeriesValues,
+        seriesName,
+      ) &&
+      Object.prototype.hasOwnProperty.call(
+        denormalizedSeriesValues[seriesName],
+        normalisedValue,
+      )
+    ) {


superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

+  const normalizeArray = (arr: number[], decimals = 10, seriesName: string) => {
+    const max = Math.max(...arr);
+    return arr.map(value => {
+      const normalisedValue = Number((value / max).toFixed(decimals));
+      denormalizedSeriesValues[seriesName][String(normalisedValue)] = value;
+      return normalisedValue;
+    });
+  };


superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

    },
  ];

+  const NormalisedTooltipFormaterr = function (params: any) {


superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

amaannawab923 · 2025-05-22T10:57:55Z

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

+
+    // Fallback: return the normalised value itself as a number
+    return Number(normalisedValue);
+  };


The getDenormalisedSeriesValue is getter function for safely getting the denormalised value , if we dont find the value we fallback to normalised value, this shouldnt happen but we do this to prevent crashes & unexpected errors which can crash the user experience

github-actions · 2025-05-26T11:41:31Z

@Antonio-RiveroMartnez Ephemeral environment spinning up at http://54.214.198.178:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

github-actions · 2025-05-26T15:28:02Z

@kgabryje Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-05-26T15:38:53Z

@kgabryje Ephemeral environment spinning up at http://54.202.38.228:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

kgabryje · 2025-05-26T16:10:06Z

I didn't follow the discussion too closely here, but shouldn't we keep the control for changing the scales? Also, we should make sure that the existing charts are not affected, and the best way to do it would be to either set the control to false by default, or if we need it to be enabled by default, then we should create a migration for existing Radar charts.
Also, if there's a consensus about changing the name from "Normalise" to something else, could you change the variable and functions names in the code as well?

superset-frontend/plugins/plugin-chart-echarts/src/Radar/NormalizedTooltip.jsx

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

amaannawab923 · 2025-05-26T16:18:48Z

I didn't follow the discussion too closely here, but shouldn't we keep the control for changing the scales? Also, we should make sure that the existing charts are not affected, and the best way to do it would be to either set the control to false by default, or if we need it to be enabled by default, then we should create a migration for existing Radar charts. Also, if there's a consensus about changing the name from "Normalise" to something else, could you change the variable and functions names in the code as well?

Hi @kgabryje , as per discussion with @betodealmeida @geido , Since the radar chart was broken , we have agreed not to keep backwards compatibility & no toggle or control will be available hence the pr got changed from feature to fix since this is a fix for radar chart

Also for the normalisation naming , it was a visiblity issue , that whether if we show the end user normalisation or not.... But on an implementation level , we are normalising the variables on scale of 0 to 1 with respect to max metric value hence renaming wont be required
Thanks for the comment , i will update these details as well in pr description

kgabryje · 2025-05-26T16:30:40Z

Thanks for explanation @amaannawab923. Approving but it would be great if @betodealmeida could give it a final pass

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

msyavuz

Thanks for this, maybe we should have more fitting examples for different charts. Some example data do not fit the chart use cases at all.

amaannawab923 · 2025-05-26T17:25:12Z

Please give it a final pass @betodealmeida , Thanks

github-actions · 2025-05-26T18:40:31Z

@msyavuz Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

github-actions · 2025-05-26T18:53:02Z

@msyavuz Ephemeral environment spinning up at http://34.219.31.206:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com>

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com> (cherry picked from commit bdfb698)

nelsondrew and others added 16 commits April 9, 2025 16:13

Test fork commit

7a9f687

Merge branch 'master' of https://github.com/apache/superset

1cec095

Merge branch 'master' of https://github.com/apache/superset

696d5d9

Merge branch 'master' of https://github.com/apache/superset

672c16f

Merge branch 'master' of https://github.com/apache/superset

3df058e

Merge branch 'master' of https://github.com/apache/superset

dc5820d

Merge branch 'master' of https://github.com/apache/superset

dce9fe3

Merge branch 'master' of https://github.com/apache/superset

7f51dca

Merge branch 'master' of https://github.com/apache/superset

e88e98d

Merge branch 'master' of https://github.com/apache/superset

4e92bb6

Merge branch 'master' of https://github.com/apache/superset

6d6d237

Merge branch 'master' of https://github.com/apache/superset

0e4927a

Merge branch 'master' of https://github.com/apache/superset

e0fd65f

Radar chart normalisation

b374343

Getter method for safely obtaining denormalised values

9daf1a6

column config visiblity

0c1f934

pull-request-size bot added the size/L label May 22, 2025

github-actions bot added the plugins label May 22, 2025

amaannawab923 changed the title ~~Feat/radar chart normalisation~~ feat(Radar): Radar chart normalisation May 22, 2025

geido added the testenv-up label May 22, 2025

amaannawab923 marked this pull request as ready for review May 22, 2025 10:53

amaannawab923 commented May 22, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx Outdated Show resolved Hide resolved

dosubot bot added the viz:charts:radar Related to the Radar chart label May 22, 2025

amaannawab923 commented May 22, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx Outdated Show resolved Hide resolved

amaannawab923 commented May 22, 2025

View reviewed changes

korbit-ai bot reviewed May 22, 2025

View reviewed changes

amaannawab923 commented May 22, 2025

View reviewed changes

amaannawab923 changed the title ~~feat(Radar): Radar chart normalisation~~ fix(Radar): Radar chart normalisation May 26, 2025

kgabryje added testenv-up and removed testenv-up labels May 26, 2025

msyavuz reviewed May 26, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Radar/NormalizedTooltip.jsx Outdated Show resolved Hide resolved

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts Outdated Show resolved Hide resolved

kgabryje approved these changes May 26, 2025

View reviewed changes

kgabryje reviewed May 26, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts Outdated Show resolved Hide resolved

msyavuz reviewed May 26, 2025

View reviewed changes

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts Show resolved Hide resolved

msyavuz approved these changes May 26, 2025

View reviewed changes

amaannawab923 added 4 commits May 26, 2025 22:19

Normalized tooltip as tsx

a82c59d

using is defined

edde6c9

No use before for metrics with custom bounds

b158611

Using diff variable

bf2fb5e

string formatter tooltip

86478bd

msyavuz added testenv-up and removed testenv-up labels May 26, 2025

msyavuz merged commit bdfb698 into apache:master May 26, 2025
57 of 58 checks passed

LevisNgigi pushed a commit to LevisNgigi/superset that referenced this pull request Jun 18, 2025

fix(Radar): Radar chart normalisation (apache#33559)

1f5ec7a

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com>

alexandrusoare pushed a commit to alexandrusoare/superset that referenced this pull request Jun 19, 2025

fix(Radar): Radar chart normalisation (apache#33559)

ae83324

Co-authored-by: Amaan Nawab <nelsondrew07@gmail.com> (cherry picked from commit bdfb698)

sadpandajoe removed the testenv-up label Jun 25, 2025

github-actions bot added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 6.0.0 First shipped in 6.0.0 labels Dec 18, 2025

Conversation

amaannawab923 commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔧 Summary

🐛 The Issue

🎥 Before (no normalization):

🧠 Root Cause

✅ The Fix

🧪 How It Works

🖼️ UX Enhancements

🎥 After (with normalization):

🧰 Developer Notes

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

korbit-ai bot commented May 22, 2025

Uh oh!

github-actions bot commented May 22, 2025

Uh oh!

github-actions bot commented May 22, 2025

Uh oh!

Uh oh!

Uh oh!

amaannawab923 May 22, 2025

Choose a reason for hiding this comment

Uh oh!

korbit-ai bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

amaannawab923 May 22, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

kgabryje commented May 26, 2025

Uh oh!

Uh oh!

Uh oh!

amaannawab923 commented May 26, 2025

Uh oh!

kgabryje commented May 26, 2025

Uh oh!

Uh oh!

Uh oh!

msyavuz left a comment

Choose a reason for hiding this comment

Uh oh!

amaannawab923 commented May 26, 2025

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

github-actions bot commented May 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

amaannawab923 commented May 22, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading