feat!: upgrade Highcharts version to 12.2.0 #10010

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

Description

Upgrade the Highcharts dependency to 12.2.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 the new legend.events.itemClick event introduced to replace series.events.legendItemClick. The callback dispatches either a series-legend-item-click or a point-legend-item-click event, depending on the type of the legendItem property.
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
Fix #9908

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

As our own Tooltip component does offer properties for customizing the border (which I now notice aren't set as border but as box-shadow, which I plan to change), I’d say we would want to support the same here.

Should it be an actual border or a box-shadow, as in the tooltip? Should it support the same amount of customization (width, color, box-shadow)?

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

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

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 · 2025-08-27T16:25:54Z

This issue is now closed, could you please check if this CSS is still needed?

I couldn't see this issue anymore, so it seems that the workaround is not needed.

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

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

web-padawan

The "solidgauge" chart type looks wrong with the change:

DiegoCardoso · 2025-08-28T08:35:13Z

The "solidgauge" chart type looks wrong with the change:

Good catch. That seems to be a Highcharts regression in styled mode. You can check it out here. ~~I'll fill a bug.~~

EDIT: it has already been reported: highcharts/highcharts#23279

web-padawan · 2025-08-28T09:35:35Z

it has already been reported: highcharts/highcharts#23279

Should we downgrade to 12.2.0 as suggested in the issue?

DiegoCardoso · 2025-08-28T10:18:57Z

Should we downgrade to 12.2.0 as suggested in the issue?

I wanted to see if there was a way to add a workaround for that, but it is safer to downgrade it for now. The biggest benefit I see in 12.3.0 is the ability to export charts locally instead of using the online exporting provided by Highcharts.

web-padawan

LGTM. Let's create a follow-up issue to bump version once the solidgauge issue is fixed.

DiegoCardoso · 2025-08-28T10:49:00Z

LGTM. Let's create a follow-up issue to bump version once the solidgauge issue is fixed.

Created a new issue: #10104

…m new callback

DiegoCardoso · 2025-08-29T11:09:55Z

Removed the legend-item-click added previously in this PR and used the new callback to dispatch either series-legend-item-click or point-legend-item-click events. Also, since the callback for the legend.itemClick is treated differently from the other cases, I decided to handle it separately from the more generic __createEventListeners method.

packages/charts/test/reattach.test.js

sonarqubecloud · 2025-08-29T11:36:13Z

Quality Gate passed

Issues
1 New issue
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

vaadin-bot · 2025-10-20T10:56:22Z

This ticket/PR has been released with Vaadin 25.0.0-beta2.

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 Copilot, vursen and web-padawan 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

Merged

DiegoCardoso mentioned this pull request Aug 26, 2025

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

Closed

docs: add docs for the new event

04f618f

web-padawan reviewed Aug 27, 2025

View reviewed changes

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

web-padawan reviewed Aug 27, 2025

View reviewed changes

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

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

1e225f5

web-padawan reviewed Aug 28, 2025

View reviewed changes

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

web-padawan reviewed Aug 28, 2025

View reviewed changes

DiegoCardoso added 3 commits August 28, 2025 12:15

downgrade Highcharts to 12.2.0

0abd8dd

chore: remove comment in base styles

4c79719

docs: add deprecation warning in d.ts file

a7c2ab3

web-padawan approved these changes Aug 28, 2025

View reviewed changes

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

DiegoCardoso mentioned this pull request Aug 28, 2025

[Charts] Add API for the new legend-item-click event in Charts vaadin/flow-components#7926

Closed

DiegoCardoso added 2 commits August 29, 2025 12:42

refactor: remove new event and dipatch *-legend-item-click events fro…

1eaed58

…m new callback

refactor: initiate legend.itemClick callback differently

d4b63ea

DiegoCardoso requested a review from web-padawan August 29, 2025 11:09

web-padawan reviewed Aug 29, 2025

View reviewed changes

packages/charts/test/reattach.test.js Outdated Show resolved Hide resolved

remove comment from import

392ba65

web-padawan approved these changes Aug 29, 2025

View reviewed changes

DiegoCardoso merged commit b24e2b8 into main Aug 29, 2025
9 checks passed

DiegoCardoso deleted the feat/charts/highcharts-v12 branch August 29, 2025 12:07

DiegoCardoso mentioned this pull request Aug 29, 2025

Update vaadin-chart base styles with the latest default theme from Highcharts #10001

Closed

vaadin-bot added the Released with Vaadin 25.0.0-beta2 label Oct 20, 2025

feat!: upgrade Highcharts version to 12.2.0 #10010

feat!: upgrade Highcharts version to 12.2.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!

jouni Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoCardoso Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

jouni Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoCardoso Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

DiegoCardoso commented Aug 27, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

web-padawan 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

Uh oh!

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

Uh oh!

Uh oh!

web-padawan commented Aug 28, 2025

Uh oh!

DiegoCardoso commented Aug 28, 2025

Uh oh!

web-padawan left a comment

Choose a reason for hiding this comment

Uh oh!

DiegoCardoso commented Aug 28, 2025

Uh oh!

DiegoCardoso commented Aug 29, 2025

Uh oh!

Uh oh!

sonarqubecloud bot commented Aug 29, 2025

Quality Gate passed

Uh oh!

Uh oh!

vaadin-bot commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

DiegoCardoso commented Aug 15, 2025 •

edited

Loading

web-padawan left a comment •

edited

Loading

DiegoCardoso commented Aug 28, 2025 •

edited

Loading