chore(charts-ng): update dependency echarts to v6

akashsonune · spike-rabbit · commit 74b3b82fddce · 2025-08-11T21:02:35.000+02:00
BREAKING CHANGE: The `@siemens/charts-ng` package now requires ECharts version 6.0.0 or higher. Please update your dependencies accordingly. For details on ECharts 6, see: https://github.com/apache/echarts/releases/tag/6.0.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -94,7 +94,7 @@
     "@ngx-formly/core": "^6.2.2",
     "@ngx-translate/core": "16.0.4",
     "@siemens/ngx-datatable": "^24.0.0",
-    "echarts": "5.6.0",
+    "echarts": "6.0.0",
     "flag-icons": "7.5.0",
     "google-libphonenumber": "3.2.42",
     "gridstack": "11.5.1",
diff --git a/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--candlestick-element-examples-chromium-dark-linux.png b/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--candlestick-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:035cb31dca0483a81da270827d1a907d2da837a51cc2da85a3a9da38318e1620
-size 18461
+oid sha256:776ff47870473e4e7323bf98b63e806c6b9cff0558ff28beb08fa1b22172bc47
+size 18370
diff --git a/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--candlestick-element-examples-chromium-light-linux.png b/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--candlestick-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2a12683e5caec873ddd1b113d27ed0a9c6f633ebaa598e39a494a097bdb00def
-size 18392
+oid sha256:5fe4c933ee9841cbe829b425ea37ede1c462a66937c6156ed6cc54692ebc7b79
+size 18326
diff --git a/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--line-live-element-examples-chromium-dark-linux.png b/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--line-live-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4db3fe4d92f1e0ad5d320e5cd662367f043f49bf76379f49c3c69f7bad7044e4
-size 32509
+oid sha256:2e8c02ddedf34d4f3deeb115e02c1a4deee09795d0bc73197257f9e80845465a
+size 32360
diff --git a/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--line-live-element-examples-chromium-light-linux.png b/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--cartesian--line-live-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a2ef88c5eb4bb6c60cbdff9d9b70110f902d697b872eab81954806b45e9cd724
-size 32241
+oid sha256:78468a1de84d37b1fa4e03bcfc1a8846c26f8fbcd33a9574ea48376e5c7d5816
+size 32198
diff --git a/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--interactive--interactive-element-examples-chromium-dark-linux.png b/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--interactive--interactive-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8688f373ed354545ea208bc4650245cb5ea98fc321f2387b97ce90d8f152e33b
-size 54957
+oid sha256:1ac8a4ebb0686e5b66fc0394ac8df71a9702ea5f5b39f60dbd52a4c5e73fb654
+size 52817
diff --git a/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--interactive--interactive-element-examples-chromium-light-linux.png b/playwright/snapshots/charts/static.spec.ts-snapshots/si-charts--interactive--interactive-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ea312e6d8ed13854f99b18eb1d101686c66b35ed2b9e36debe82ea68d549e94b
-size 49352
+oid sha256:e2b52e234f75991f90b8a67c2cf887505415e3f337c9461d8e08a80d622f888f
+size 49239
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet-dashboards-demo-chromium-dark-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet-dashboards-demo-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e33c8ac0c45b655a493bb4c59486c838bbb82923cfabe3c6f6b6f987de54964
-size 161896
+oid sha256:576996d932b0dd6cac85d03f4c6698f69afcfcbae107a6794be2af0b07016e5d
+size 162306
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet-dashboards-demo-chromium-light-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet-dashboards-demo-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:42a8be2e3d49447dc861295c64417b7792f61169bec24d76238072f0caf29a97
-size 159487
+oid sha256:63affc87f513b448fcd0ac110f8a8aee2d984986e58ed601c428458ccf7ec48c
+size 159917
diff --git a/projects/charts-ng/package.json b/projects/charts-ng/package.json
@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@angular/common": "20",
     "@angular/core": "20",
-    "echarts": "^5.6.0"
+    "echarts": "^6.0.0"
   },
   "exports": {
     "./docs.json": {
diff --git a/projects/charts-ng/src/shared/echarts.custom.ts b/projects/charts-ng/src/shared/echarts.custom.ts
@@ -34,6 +34,7 @@ import {
   VisualMapComponent
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
+import { LegacyGridContainLabel } from 'echarts/features';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 
 echarts.use([
@@ -70,7 +71,10 @@ echarts.use([
 
   // renderers
   CanvasRenderer,
-  SVGRenderer
+  SVGRenderer,
+
+  // features
+  LegacyGridContainLabel
 ]);
 
 export { echarts };
diff --git a/projects/charts-ng/src/shared/themes/element.ts b/projects/charts-ng/src/shared/themes/element.ts
@@ -139,13 +139,15 @@ export const themeElement = {
       textStyle: {
         fontFamily
       },
-
+      richInheritPlainLabel: false,
       color: colorPalettes.default,
       gradientColor: gradientColors.default,
       backgroundColor: 'transparent',
       animationDuration: 700,
 
       title: {
+        left: 0,
+        top: 0,
         padding: [10, 0, 0, 10],
         textStyle: {
           fontFamily,
@@ -167,6 +169,7 @@ export const themeElement = {
         left: 'auto',
         right: 20,
         top: 35,
+        itemGap: 10,
         textStyle: {
           fontFamily,
           color: textColor,
@@ -274,6 +277,7 @@ export const themeElement = {
           hideOverlap: true
         },
         axisTick: {
+          show: true,
           alignWithLabel: true
         },
         splitLine: {
@@ -302,6 +306,7 @@ export const themeElement = {
           hideOverlap: true
         },
         axisTick: {
+          show: true,
           alignWithLabel: true
         },
         splitLine: {
@@ -342,7 +347,8 @@ export const themeElement = {
         },
         selectedDataBackground: {
           areaStyle: {
-            color: dataZoomLineColor
+            color: dataZoomLineColor,
+            opacity: 0.2
           },
           lineStyle: {
             color: dataZoomLineColor
@@ -388,10 +394,12 @@ export const themeElement = {
         areaStyle: {
           opacity: 0.3
         },
-        symbol: 'circle'
+        symbol: 'circle',
+        symbolSize: 4
       },
 
       pie: {
+        radius: [0, '75%'],
         label: {
           fontFamily,
           formatter: '{d}%',
@@ -400,6 +408,7 @@ export const themeElement = {
           fontSize
         },
         labelLine: {
+          length2: 15,
           lineStyle: {
             color: elementTextSecondary
           }
