siemens · danielleroux · Jun 30, 2026 · Jun 2, 2026 · Jun 2, 2026 · Jun 23, 2026
diff --git a/.changeset/afraid-mammals-send.md b/.changeset/afraid-mammals-send.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix-echarts': major
+---
+
+Updated dependencies of `echarts` to support `^6.0.0`
diff --git a/packages/echarts/package.json b/packages/echarts/package.json
@@ -31,7 +31,8 @@
     "@rollup/plugin-typescript": "^8.5.0",
     "@siemens/ix": "workspace:*",
     "@types/node": "^24.0.3",
-    "echarts": "^5.5.1",
+    "echarts-5": "npm:echarts@^5.0.0",
+    "echarts": "^6.0.0",
     "http-server": "^14.1.1",
     "rimraf": "catalog:",
     "rollup-plugin-dts": "^6.4.1",
@@ -44,6 +45,6 @@
   },
   "peerDependencies": {
     "@siemens/ix": "^5.0.0",
-    "echarts": "^5.3.3"
+    "echarts": "^5.0.0 || ^6.0.0"
   }
 }
diff --git a/packages/echarts/tests/basic.html b/packages/echarts/tests/basic.html
@@ -7,14 +7,14 @@
 LICENSE file in the root directory of this source tree.
 -->
 
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
     />
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
     <style>
       body {
         height: 100vh;
@@ -30,170 +30,6 @@
   </head>
   <body>
     <div id="main"></div>
-    <script type="module">
-      import { registerTheme, resolveEChartThemeName } from '../dist/index.js';
-
-      function applyThemeFromSearchParams() {
-        const searchParams = new URLSearchParams(location.search);
-        const theme = searchParams.get('theme');
-        const colorSchema = searchParams.get('colorSchema');
-
-        if (!theme) {
-          document.documentElement.dataset.ixTheme = 'brand';
-          document.documentElement.dataset.ixColorSchema = 'dark';
-          return;
-        }
-
-        if (theme.startsWith('theme-')) {
-          const [, resolvedTheme, resolvedColorSchema] = theme.split('-');
-          document.documentElement.dataset.ixTheme = resolvedTheme ?? 'brand';
-          document.documentElement.dataset.ixColorSchema =
-            resolvedColorSchema ?? 'dark';
-          return;
-        }
-
-        document.documentElement.dataset.ixTheme = theme;
-        document.documentElement.dataset.ixColorSchema = colorSchema ?? 'dark';
-      }
-
-      registerTheme(echarts);
-      applyThemeFromSearchParams();
-
-      const theme = resolveEChartThemeName();
-      // Configure the background color to enhance contrast
-      document.body.style.backgroundColor = theme.includes('dark')
-        ? 'black'
-        : 'white';
-
-      var myChart = echarts.init(document.querySelector('#main'), theme);
-
-      myChart.setOption({
-        title: {
-          text: 'Main',
-          subtext: 'The main chart',
-        },
-        legend: {},
-        toolbox: {
-          show: true,
-          feature: {
-            saveAsImage: {},
-            dataZoom: {},
-          },
-        },
-        tooltip: {
-          trigger: 'axis',
-        },
-        timeline: {
-          axisType: 'category',
-          autoPlay: false,
-          playInterval: 1000,
-          data: ['1', '2', '3'],
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            name: 'Day',
-            axisPointer: {
-              type: 'shadow',
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'Amount',
-          },
-        ],
-        series: [
-          {
-            name: 'Direct',
-            type: 'bar',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [320, 332, 301, 334, 390, 330, 320],
-          },
-          {
-            name: 'Email',
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [120, 132, 101, 134, 90, 230, 210],
-          },
-          {
-            name: 'Union Ads',
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [220, 182, 191, 234, 290, 330, 310],
-          },
-          {
-            name: 'Video Ads',
-            type: 'bar',
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [150, 232, 201, 154, 190, 330, 410],
-          },
-          {
-            name: 'Search Engine',
-            type: 'bar',
-            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
-            emphasis: {
-              focus: 'series',
-            },
-            markLine: {
-              lineStyle: {
-                type: 'dashed',
-              },
-              data: [[{ type: 'min' }, { type: 'max' }]],
-            },
-          },
-          {
-            name: 'Baidu',
-            type: 'bar',
-            barWidth: 5,
-            stack: 'Search Engine',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [620, 732, 701, 734, 1090, 1130, 1120],
-          },
-          {
-            name: 'Google',
-            type: 'bar',
-            stack: 'Search Engine',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [120, 132, 101, 134, 290, 230, 220],
-          },
-          {
-            name: 'Bing',
-            type: 'bar',
-            stack: 'Search Engine',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [60, 72, 71, 74, 190, 130, 110],
-          },
-          {
-            name: 'Others',
-            type: 'bar',
-            stack: 'Search Engine',
-            emphasis: {
-              focus: 'series',
-            },
-            data: [62, 82, 91, 84, 109, 110, 120],
-          },
-        ],
-      });
-    </script>
+    <script src="./setup-basic.ts" type="module"></script>
   </body>
 </html>
diff --git a/packages/echarts/tests/echarts.e2e.ts b/packages/echarts/tests/echarts.e2e.ts
@@ -17,9 +17,21 @@ regressionTest.describe('echarts', () => {
     await expect(page).toHaveScreenshot();
   });
 
+  regressionTest('basic v5', async ({ page }) => {
+    await page.goto('v5/basic.html');
+
+    await expect(page).toHaveScreenshot();
+  });
+
   regressionTest('more colors', async ({ page }) => {
     await page.goto('more-colors.html');
 
     await expect(page).toHaveScreenshot();
   });
+
+  regressionTest('more colors v5', async ({ page }) => {
+    await page.goto('v5/more-colors.html');
+
+    await expect(page).toHaveScreenshot();
+  });
 });
diff --git a/.../echarts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-brand-dark-linux.png b/.../echarts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-brand-dark-linux.png
diff --git a/...echarts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-brand-light-linux.png b/...echarts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-brand-light-linux.png
diff --git a/...charts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-classic-dark-linux.png b/...charts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...harts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-classic-light-linux.png b/...harts.e2e.ts-snapshots/echarts-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...harts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-brand-dark-linux.png b/...harts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-brand-dark-linux.png
diff --git a/...arts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-brand-light-linux.png b/...arts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-brand-light-linux.png
diff --git a/...rts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-classic-dark-linux.png b/...rts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-classic-dark-linux.png
diff --git a/...ts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-classic-light-linux.png b/...ts.e2e.ts-snapshots/echarts-basic-v5-1-chromium---theme-classic-light-linux.png
diff --git a/...ts.e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-brand-dark-linux.png b/...ts.e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-brand-dark-linux.png
diff --git a/...s.e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-brand-light-linux.png b/...s.e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-brand-light-linux.png
diff --git a/....e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-classic-dark-linux.png b/....e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-classic-dark-linux.png
diff --git a/...e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-classic-light-linux.png b/...e2e.ts-snapshots/echarts-more-colors-1-chromium---theme-classic-light-linux.png
diff --git a/...e2e.ts-snapshots/echarts-more-colors-v5-1-chromium---theme-brand-dark-linux.png b/...e2e.ts-snapshots/echarts-more-colors-v5-1-chromium---theme-brand-dark-linux.png
diff --git a/...2e.ts-snapshots/echarts-more-colors-v5-1-chromium---theme-brand-light-linux.png b/...2e.ts-snapshots/echarts-more-colors-v5-1-chromium---theme-brand-light-linux.png
diff --git a/...e.ts-snapshots/echarts-more-colors-v5-1-chromium---theme-classic-dark-linux.png b/...e.ts-snapshots/echarts-more-colors-v5-1-chromium---theme-classic-dark-linux.png
diff --git a/....ts-snapshots/echarts-more-colors-v5-1-chromium---theme-classic-light-linux.png b/....ts-snapshots/echarts-more-colors-v5-1-chromium---theme-classic-light-linux.png