feat!: upgrade Highcharts version to 12.3.0 #10010

DiegoCardoso · 2025-08-15T16:34:09Z

Description

Upgrade the Highcharts dependency to 12.3.0.

The list of changes introduced in this PR:

Update the base styles to use both the --vaadin-charts-* and --highcharts-* CSS properties API, with the latter taking precedence, when both are defined.
Add a new legend-item-click API to cover the new legend.events.itemClick event introduced to replace series.events.legendItemClick.
Update the monkeypatch for firing the beforeExport/afterExport events used by the mixin to copy the styles to the body and do the cleanup afterwards, when the user exports the chart as an image.
Update monkeypatch to fix a BFP to use the correct method
Add a workaround for allowing setting lang global options in rendered charts
Add a workaround for fixing labels' position in "organization" charts in styled mode
One possible breaking change introduced in recent versions of Highcharts is that userOptions used to be somewhat static, meaning that after the chart was initialized, its value wouldn't update based on the chart's updates. Now, adding/removing items (such as series or points) is reflected in the userOptions object.
Some of the changes in the userOptions object is that properties that accept arrays, such as xAxis, yAxis, etc, used to maintain the type of the object it was initially passed in the options, if for instance, an object was passed. That changed so that it always returns an array in the userOptions.
- That's why the __hasConfigurationBuffer method has changed to take into account the case where the property is an array.

Part of #8825

Type of change

Feature

Upgrade the Highcharts dependency to 12.3.0.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

packages/charts/src/vaadin-chart.js

packages/charts/src/vaadin-chart-mixin.js

jouni

Overall a bit difficult to review the changes to the base styles, when they’ve changes so much. But the end results look to work as expected 🙂

jouni · 2025-08-25T11:49:42Z

packages/charts/src/styles/vaadin-chart-base-styles.js

-    stroke-width: 1px;
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
-    fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
-    fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
+    stroke-width: 0;
+    fill: var(--highcharts-background-color, var(--vaadin-charts-tooltip-background, var(--vaadin-background-color)));
  }

  ${unsafeCSS(scope)} .highcharts-tooltip-box .highcharts-label-box {
-    fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
-    fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
-  }
-
-  ${unsafeCSS(scope)} .highcharts-tooltip-header {
-    stroke-width: 1px;
-    stroke: color-mix(in srgb, var(--vaadin-charts-contrast, var(--_label)) 20%, transparent);
+    fill: var(--highcharts-background-color, var(--vaadin-charts-tooltip-background, var(--vaadin-background-color)));


Why remove the tooltip border?

This change is coming from the Highcharts styles:
https://github.com/highcharts/highcharts/blob/d1c0f24d6a15c204a3dfeca42fe7b625e8a83682/css/highcharts.css#L332-L335

jouni · 2025-08-25T11:54:40Z

packages/charts/src/styles/vaadin-chart-base-styles.js

  }

  ${unsafeCSS(scope)} div.highcharts-tooltip {
    filter: none;
+    font-size: 0.8em;


This makes the font size nicely smaller in the tooltip. But since the header within it is also using an em-based font size, that gets even smaller. I’d increase the header font size a bit, perhaps to 0.9em, if it needs to be smaller than the other text in the tooltip. Maybe add custom properties for controlling the font size?

I can update it to be the same as the current styles. Currently, the font size is inherited from the root with the value: var(--vaadin-charts-font-size, 0.75rem). The header currently has a size of 0.85em instead of the 0.8em being changed here.

jouni · 2025-08-25T11:58:21Z

packages/charts/src/styles/vaadin-chart-base-styles.js

+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', sans-serif;


Font family should be inherited.

Suggested change

font-family:

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',

'Segoe UI Symbol', sans-serif;

jouni · 2025-08-25T11:59:52Z

packages/charts/src/styles/vaadin-chart-base-styles.js

+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', sans-serif;
+    font-size: 1rem;


Not sure about this. Maybe we should at least have a property for this, or let it inherit. But if we let it inherit, then we should check the other font sizes so that they remain legible even if the font size on the parent is reduced to something like 13 or 14 px.

I removed that and attempted to align the font sizes elsewhere to work with our defaults, just as they are in the current version.

jouni · 2025-08-25T12:12:58Z

packages/charts/test/visual/base/screenshots/chart/baseline/styled-mode.png

Why are the colors so different?

Ah. Legend shows 10 series, but there are only 5 lines visible, and the series titles show they are duplicated.

I didn't catch that. Let me see what's going on.

So it turned out the issue was coming from a known change in the behavior of the userOptions property of the Chart instance. We needed to add the series manually to the "exporting" one because the userOptions used to instantiate didn't use to have the information about the series in this case. But it now does, so no need to manually copy over the series into the new chart.

The DOM structure in Highchart V12 is different related to how the drilldown controls are rendered. That will cause test failures in the ITs so we need to updated them. Part of vaadin/web-components#8825 Depends on vaadin/web-components#10010

DiegoCardoso

Addressed the comments about font size.

DiegoCardoso · 2025-08-26T10:52:54Z

packages/charts/src/styles/vaadin-chart-base-styles.js

-    stroke-width: 1px;
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
-    fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
-    fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
+    stroke-width: 0;
+    fill: var(--highcharts-background-color, var(--vaadin-charts-tooltip-background, var(--vaadin-background-color)));
  }

  ${unsafeCSS(scope)} .highcharts-tooltip-box .highcharts-label-box {
-    fill: var(--vaadin-charts-tooltip-background, var(--vaadin-background-color));
-    fill-opacity: var(--vaadin-charts-tooltip-background-opacity, 1);
-    stroke: var(--vaadin-charts-tooltip-border, var(--vaadin-border-color-subtle));
-  }
-
-  ${unsafeCSS(scope)} .highcharts-tooltip-header {
-    stroke-width: 1px;
-    stroke: color-mix(in srgb, var(--vaadin-charts-contrast, var(--_label)) 20%, transparent);
+    fill: var(--highcharts-background-color, var(--vaadin-charts-tooltip-background, var(--vaadin-background-color)));


This change is coming from the Highcharts styles:
https://github.com/highcharts/highcharts/blob/d1c0f24d6a15c204a3dfeca42fe7b625e8a83682/css/highcharts.css#L332-L335

DiegoCardoso · 2025-08-26T10:52:58Z

packages/charts/src/styles/vaadin-chart-base-styles.js

  }

  ${unsafeCSS(scope)} div.highcharts-tooltip {
    filter: none;
+    font-size: 0.8em;


I can update it to be the same as the current styles. Currently, the font size is inherited from the root with the value: var(--vaadin-charts-font-size, 0.75rem). The header currently has a size of 0.85em instead of the 0.8em being changed here.

DiegoCardoso · 2025-08-26T13:17:03Z

packages/charts/src/styles/vaadin-chart-base-styles.js

+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', sans-serif;
+    font-size: 1rem;


I removed that and attempted to align the font sizes elsewhere to work with our defaults, just as they are in the current version.

DiegoCardoso · 2025-08-26T13:17:10Z

packages/charts/src/styles/vaadin-chart-base-styles.js

+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', sans-serif;


…imeout

sonarqubecloud · 2025-08-26T14:16:04Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

DiegoCardoso added 13 commits August 15, 2025 18:12

feat: upgrade Highcharts version to 12.3.0

da5a6f8

Upgrade the Highcharts dependency to 12.3.0.

test: adjust tests

e0612b8

refactor: remove code no longer needed

5319d7a

refactor: replace call to deprecated method with new property

5ac6bfb

refactor: check axis configuration buffer in array

6b740cf

Merge branch 'main' into feat/charts/highcharts-v12

9b9410e

test: update checks of types coming from Highcharts

550bec0

fixup! refactor: check axis configuration buffer in array

261e142

feat: add legend-item-click event

2f84378

feat: update base styles with latest HC styles

bb18707

fix: add workaround for organization chart labels

35efb68

feat: update base styles with fallback values

6e1a9a0

test: update baseline visual tests

18245af

DiegoCardoso force-pushed the feat/charts/highcharts-v12 branch from 65ef5f8 to a8c2d3f Compare August 21, 2025 11:28

DiegoCardoso changed the title ~~feat: upgrade Highcharts version to 12.3.0~~ feat!: upgrade Highcharts version to 12.3.0 Aug 21, 2025

DiegoCardoso requested review from vursen, web-padawan and Copilot August 21, 2025 14:32

DiegoCardoso marked this pull request as ready for review August 21, 2025 14:32

DiegoCardoso requested a review from jouni August 21, 2025 14:49

web-padawan mentioned this pull request Aug 21, 2025

docs: fix typos in charts axis events JSDoc #10052

Merged

Copilot AI reviewed Aug 21, 2025

View reviewed changes

web-padawan reviewed Aug 21, 2025

View reviewed changes

packages/charts/src/vaadin-chart.js Outdated Show resolved Hide resolved

DiegoCardoso force-pushed the feat/charts/highcharts-v12 branch from 88a8f07 to 2975887 Compare August 25, 2025 10:28

web-padawan reviewed Aug 25, 2025

View reviewed changes

packages/charts/src/vaadin-chart-mixin.js Outdated Show resolved Hide resolved

jouni reviewed Aug 25, 2025

View reviewed changes

DiegoCardoso mentioned this pull request Aug 25, 2025

fix: add workaround for checking correct target element #10072

Draft

DiegoCardoso mentioned this pull request Aug 26, 2025

test: update drilldown tests to work with new DOM structure vaadin/flow-components#7897

Draft

DiegoCardoso commented Aug 26, 2025

View reviewed changes

DiegoCardoso added 11 commits August 26, 2025 16:14

Merge branch 'main' into feat/charts/highcharts-v12

b53bc43

test: refactor test to pass with new DOM structure

80f7ad0

fix: scope workaround just for charts in styled mode

eec9897

chore: fix lint

4abc843

test: import not animated styles into chart-element.test.js and add t…

af51b08

…imeout

refactor: update __updateStyles to work with the new wrapper element

fbdbf8f

test: add small delay

7c9c2fd

fix: restore correct style properties

4f3364d

test: copying series to the new one no longer needed

254e897

test: stub HTMLAnchorElement.prototype.click method to prevent download

5c186fa

feat: update font sizes in base styles

a8e0f64

DiegoCardoso force-pushed the feat/charts/highcharts-v12 branch from 3ab8029 to a8e0f64 Compare August 26, 2025 14:15

DiegoCardoso mentioned this pull request Aug 26, 2025

feat: add Breadcrumbs API to Drilldown in charts vaadin/flow-components#7904

Draft

	font-family:
	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
	'Segoe UI Symbol', sans-serif;

feat!: upgrade Highcharts version to 12.3.0 #10010

Are you sure you want to change the base?

feat!: upgrade Highcharts version to 12.3.0 #10010

Uh oh!

Conversation

DiegoCardoso commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jouni left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DiegoCardoso left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Aug 26, 2025

Quality Gate passed

Uh oh!

Uh oh!

DiegoCardoso commented Aug 15, 2025 •

edited

Loading