@synergy-design-system/metadata 3.16.1 → 3.17.0

package/data/layers/full/component/component:syn-chart/angular/chart.component.ts

@@ -21,7 +21,7 @@ import '@synergy-design-system/components/components/chart/chart.js';
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -61,16 +61,22 @@ it takes precedence over the palette.
   }
 
   /**
-* The ECharts configuration option object.
+* The ECharts configuration input.
 
-This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+This property accepts either:
+- a plain `ECConfig` object, or
+- a callback that receives a typed preset handle and applies chart presets.
+
+The resolved result maps 1:1 to the ECharts `option` parameter passed to
+`setOption()`.
 Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)
-and assign the object directly to this property.
+and assign either the object directly or build it through the handle.
 
 > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.
 > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.
 
-Assigning a new object completely replaces the previous chart configuration (`notMerge: true`).
+Assigning a new config input completely replaces the previous chart
+configuration (`notMerge: true`).
 To update only parts of the chart, access the underlying ECharts instance directly and
 call `setOption()` with custom merge options.
  */

package/data/layers/full/component/component:syn-chart/components/chart.component.ts

@@ -1,5 +1,5 @@
 import {
-  type EChartsType, init, use,
+  type EChartsType, init, registerPreprocessor, registerTheme, use,
 } from 'echarts/core.js';
 import { CanvasRenderer } from 'echarts/renderers.js';
 import { html } from 'lit';
@@ -10,12 +10,14 @@ import { LineChart } from 'echarts/charts.js';
 import {
   GridComponent, LegendComponent, TitleComponent, TooltipComponent,
 } from 'echarts/components.js';
-import { classMap } from 'lit/directives/class-map.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import componentStyles from '../../styles/component.styles.js';
 import styles from './chart.styles.js';
-import { PALETTE_TOKENS, type SynChartPalette } from './chart.palettes.js';
-import type { ECConfig } from './types.js';
+import { type ChartPalette, PALETTE_TOKENS } from './chart.palettes.js';
+import { resolveConfigInput } from './configs/config.js';
+import type { ChartConfigType, ECConfig } from './types.js';
+import { synergyLightTheme } from './themes/light.js';
+import { applyAxisDefaultsPreprocessor } from './configs/axes/utilities.js';
 
 // TODO: Check, should we let the user define the *use* so the bundle size is optimized for their specific use case?
 use([
@@ -32,7 +34,7 @@ use([
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -49,31 +51,59 @@ export default class SynChart extends SynergyElement {
 
   private resizeObserver: ResizeObserver;
 
+  private resolvedConfig: ECConfig = {};
+
   /**
-   * The ECharts configuration option object.
+   * The ECharts configuration input.
+   *
+   * This property accepts either:
+   * - a plain `ECConfig` object, or
+   * - a callback that receives a typed preset handle and applies chart presets.
    *
-   * This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+   * The resolved result maps 1:1 to the ECharts `option` parameter passed to
+   * `setOption()`.
    * Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)
-   * and assign the object directly to this property.
+   * and assign either the object directly or build it through the handle.
    *
    * > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.
    * > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.
    *
-   * Assigning a new object completely replaces the previous chart configuration (`notMerge: true`).
+   * Assigning a new config input completely replaces the previous chart
+   * configuration (`notMerge: true`).
    * To update only parts of the chart, access the underlying ECharts instance directly and
    * call `setOption()` with custom merge options.
    *
    * @example
    * ```js
+   * // Using a plain object
    * chart.config = {
    *   xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    *   yAxis: { type: 'value' },
    *   series: [{ type: 'line', data: [150, 230, 224] }],
    * };
+   *
+   * // Using the handle with method chaining
+   * chart.config = (handle) => handle
+   *   .baseConfig({
+   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *     yAxis: { type: 'value' },
+   *     series: [{ type: 'line', data: [150, 230, 224] }],
+   *   })
+   *   .axesShowSplitLines();
+   *
+   * // Using the handle with sequential calls
+   * chart.config = (handle) => {
+   *   handle.baseConfig({
+   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *     yAxis: { type: 'value' },
+   *     series: [{ type: 'line', data: [150, 230, 224] }],
+   *   });
+   *   handle.axesShowSplitLines();
+   * };
    * ```
    */
   @property({ attribute: false })
-  config: ECConfig = {};
+  config: ChartConfigType = {};
 
   /**
    * The color palette to apply to chart series.
@@ -88,13 +118,13 @@ export default class SynChart extends SynergyElement {
    * it takes precedence over the palette.
    */
   @property({ reflect: true })
-  palette: SynChartPalette = 'categorical';
+  palette: ChartPalette = 'categorical';
 
   /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
   private applyPalette(): void {
     if (!this.chartInstance) return;
     // If the user explicitly set config.color, respect it — palette is a default only
-    if (Array.isArray(this.config.color) && this.config.color.length > 0) return;
+    if (Array.isArray(this.resolvedConfig.color) && this.resolvedConfig.color.length > 0) return;
 
     const tokens = PALETTE_TOKENS[this.palette];
     const computedStyles = getComputedStyle(this);
@@ -103,23 +133,41 @@ export default class SynChart extends SynergyElement {
       .filter(Boolean);
 
     if (colors.length > 0) {
-      this.chartInstance.setOption({ color: colors }, { notMerge: false });
+      const oldOption = this.chartInstance.getOption();
+      if (!oldOption) return;
+
+      oldOption.color = colors;
+      // We can not only replace 'color' via { replaceMerge: ['color'] }. Echarts does not allow to do this.
+      // Therefore we need to completely replace it, with the old option but new color.
+      this.chartInstance.setOption(oldOption, { notMerge: true });
     }
   }
 
   protected updated(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('config') && this.chartInstance) {
-      this.chartInstance.setOption(this.config, { notMerge: true });
+      this.resolvedConfig = resolveConfigInput(this.config);
+      this.chartInstance.setOption(this.resolvedConfig, { notMerge: true });
     }
     if ((changedProperties.has('palette') || changedProperties.has('config')) && this.chartInstance) {
       this.applyPalette();
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    registerTheme('default', synergyLightTheme);
+    /**
+     * Depending if x-axis or y-axis, the axis name has different positions and alignments. This preprocessor ensures that the correct styles are applied to the axis names based on the axis type.
+     * This is needed because ECharts does not provide a way to set specific styles for x and y axis, only for axis types.
+     */
+    registerPreprocessor(applyAxisDefaultsPreprocessor);
+  }
+
   // Initialize echarts instance and resize observer
   protected firstUpdated(_changedProperties: PropertyValues): void {
     if (this.chartContainer !== null && this.chartContainer !== undefined) {
-      this.chartInstance = init(this.chartContainer);
+      this.chartInstance = init(this.chartContainer, 'default');
+
       // Resize observer
       this.resizeObserver = new ResizeObserver(() => {
         this.chartInstance?.resize();
@@ -127,8 +175,9 @@ export default class SynChart extends SynergyElement {
       this.resizeObserver.observe(this.chartContainer);
 
       // Apply config if already set before first render
-      if (Object.keys(this.config).length > 0) {
-        this.chartInstance.setOption(this.config);
+      this.resolvedConfig = resolveConfigInput(this.config);
+      if (Object.keys(this.resolvedConfig).length > 0) {
+        this.chartInstance.setOption(this.resolvedConfig);
       }
       // Apply palette after config so colors blend in without replacing the full config
       this.applyPalette();
@@ -172,9 +221,7 @@ export default class SynChart extends SynergyElement {
     return html`
       <div
         part="base"
-        class=${classMap({
-          chart: true,
-        })}>
+        class="chart">
       </div>
     `;
   }

package/data/layers/full/component/component:syn-chart/components/chart.palettes.ts

@@ -7,7 +7,7 @@
  *   (`01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral)
  * - `sequential-status-critical/error/info/success/warning` — 10-step status color ramps, ordered from darkest to brightest
  */
-export type SynChartPalette =
+export type ChartPalette =
   | 'categorical'
   | 'sequential-01'
   | 'sequential-02'
@@ -23,88 +23,88 @@ export type SynChartPalette =
   | 'sequential-status-warning';
 
 /** Maps each palette name to the ordered list of CSS custom property names to resolve. */
-export const PALETTE_TOKENS: Record<SynChartPalette, string[]> = {
+export const PALETTE_TOKENS: Record<ChartPalette, string[]> = {
   categorical: [
-    '--syn-categorical-01', '--syn-categorical-02', '--syn-categorical-03',
-    '--syn-categorical-04', '--syn-categorical-05', '--syn-categorical-06',
-    '--syn-categorical-07', '--syn-categorical-08', '--syn-categorical-09',
-    '--syn-categorical-10', '--syn-categorical-11', '--syn-categorical-12',
+    '--syn-chart-categorical-01', '--syn-chart-categorical-02', '--syn-chart-categorical-03',
+    '--syn-chart-categorical-04', '--syn-chart-categorical-05', '--syn-chart-categorical-06',
+    '--syn-chart-categorical-07', '--syn-chart-categorical-08', '--syn-chart-categorical-09',
+    '--syn-chart-categorical-10', '--syn-chart-categorical-11', '--syn-chart-categorical-12',
   ],
   'sequential-01': [
-    '--syn-sequential-01-100', '--syn-sequential-01-90', '--syn-sequential-01-80',
-    '--syn-sequential-01-70', '--syn-sequential-01-60', '--syn-sequential-01-50',
-    '--syn-sequential-01-40', '--syn-sequential-01-30', '--syn-sequential-01-20',
-    '--syn-sequential-01-10',
+    '--syn-chart-sequential-01-100', '--syn-chart-sequential-01-90', '--syn-chart-sequential-01-80',
+    '--syn-chart-sequential-01-70', '--syn-chart-sequential-01-60', '--syn-chart-sequential-01-50',
+    '--syn-chart-sequential-01-40', '--syn-chart-sequential-01-30', '--syn-chart-sequential-01-20',
+    '--syn-chart-sequential-01-10',
   ],
   'sequential-02': [
-    '--syn-sequential-02-100', '--syn-sequential-02-90', '--syn-sequential-02-80',
-    '--syn-sequential-02-70', '--syn-sequential-02-60', '--syn-sequential-02-50',
-    '--syn-sequential-02-40', '--syn-sequential-02-30', '--syn-sequential-02-20',
-    '--syn-sequential-02-10',
+    '--syn-chart-sequential-02-100', '--syn-chart-sequential-02-90', '--syn-chart-sequential-02-80',
+    '--syn-chart-sequential-02-70', '--syn-chart-sequential-02-60', '--syn-chart-sequential-02-50',
+    '--syn-chart-sequential-02-40', '--syn-chart-sequential-02-30', '--syn-chart-sequential-02-20',
+    '--syn-chart-sequential-02-10',
   ],
   'sequential-03': [
-    '--syn-sequential-03-100', '--syn-sequential-03-90', '--syn-sequential-03-80',
-    '--syn-sequential-03-70', '--syn-sequential-03-60', '--syn-sequential-03-50',
-    '--syn-sequential-03-40', '--syn-sequential-03-30', '--syn-sequential-03-20',
-    '--syn-sequential-03-10',
+    '--syn-chart-sequential-03-100', '--syn-chart-sequential-03-90', '--syn-chart-sequential-03-80',
+    '--syn-chart-sequential-03-70', '--syn-chart-sequential-03-60', '--syn-chart-sequential-03-50',
+    '--syn-chart-sequential-03-40', '--syn-chart-sequential-03-30', '--syn-chart-sequential-03-20',
+    '--syn-chart-sequential-03-10',
   ],
   'sequential-04': [
-    '--syn-sequential-04-100', '--syn-sequential-04-90', '--syn-sequential-04-80',
-    '--syn-sequential-04-70', '--syn-sequential-04-60', '--syn-sequential-04-50',
-    '--syn-sequential-04-40', '--syn-sequential-04-30', '--syn-sequential-04-20',
-    '--syn-sequential-04-10',
+    '--syn-chart-sequential-04-100', '--syn-chart-sequential-04-90', '--syn-chart-sequential-04-80',
+    '--syn-chart-sequential-04-70', '--syn-chart-sequential-04-60', '--syn-chart-sequential-04-50',
+    '--syn-chart-sequential-04-40', '--syn-chart-sequential-04-30', '--syn-chart-sequential-04-20',
+    '--syn-chart-sequential-04-10',
   ],
   'sequential-05': [
-    '--syn-sequential-05-100', '--syn-sequential-05-90', '--syn-sequential-05-80',
-    '--syn-sequential-05-70', '--syn-sequential-05-60', '--syn-sequential-05-50',
-    '--syn-sequential-05-40', '--syn-sequential-05-30', '--syn-sequential-05-20',
-    '--syn-sequential-05-10',
+    '--syn-chart-sequential-05-100', '--syn-chart-sequential-05-90', '--syn-chart-sequential-05-80',
+    '--syn-chart-sequential-05-70', '--syn-chart-sequential-05-60', '--syn-chart-sequential-05-50',
+    '--syn-chart-sequential-05-40', '--syn-chart-sequential-05-30', '--syn-chart-sequential-05-20',
+    '--syn-chart-sequential-05-10',
   ],
   'sequential-06': [
-    '--syn-sequential-06-100', '--syn-sequential-06-90', '--syn-sequential-06-80',
-    '--syn-sequential-06-70', '--syn-sequential-06-60', '--syn-sequential-06-50',
-    '--syn-sequential-06-40', '--syn-sequential-06-30', '--syn-sequential-06-20',
-    '--syn-sequential-06-10',
+    '--syn-chart-sequential-06-100', '--syn-chart-sequential-06-90', '--syn-chart-sequential-06-80',
+    '--syn-chart-sequential-06-70', '--syn-chart-sequential-06-60', '--syn-chart-sequential-06-50',
+    '--syn-chart-sequential-06-40', '--syn-chart-sequential-06-30', '--syn-chart-sequential-06-20',
+    '--syn-chart-sequential-06-10',
   ],
   'sequential-07': [
-    '--syn-sequential-07-100', '--syn-sequential-07-90', '--syn-sequential-07-80',
-    '--syn-sequential-07-70', '--syn-sequential-07-60', '--syn-sequential-07-50',
-    '--syn-sequential-07-40', '--syn-sequential-07-30', '--syn-sequential-07-20',
-    '--syn-sequential-07-10',
+    '--syn-chart-sequential-07-100', '--syn-chart-sequential-07-90', '--syn-chart-sequential-07-80',
+    '--syn-chart-sequential-07-70', '--syn-chart-sequential-07-60', '--syn-chart-sequential-07-50',
+    '--syn-chart-sequential-07-40', '--syn-chart-sequential-07-30', '--syn-chart-sequential-07-20',
+    '--syn-chart-sequential-07-10',
   ],
   'sequential-status-critical': [
-    '--syn-sequential-status-critical-100', '--syn-sequential-status-critical-90',
-    '--syn-sequential-status-critical-80', '--syn-sequential-status-critical-70',
-    '--syn-sequential-status-critical-60', '--syn-sequential-status-critical-50',
-    '--syn-sequential-status-critical-40', '--syn-sequential-status-critical-30',
-    '--syn-sequential-status-critical-20', '--syn-sequential-status-critical-10',
+    '--syn-chart-sequential-status-critical-100', '--syn-chart-sequential-status-critical-90',
+    '--syn-chart-sequential-status-critical-80', '--syn-chart-sequential-status-critical-70',
+    '--syn-chart-sequential-status-critical-60', '--syn-chart-sequential-status-critical-50',
+    '--syn-chart-sequential-status-critical-40', '--syn-chart-sequential-status-critical-30',
+    '--syn-chart-sequential-status-critical-20', '--syn-chart-sequential-status-critical-10',
   ],
   'sequential-status-error': [
-    '--syn-sequential-status-error-100', '--syn-sequential-status-error-90',
-    '--syn-sequential-status-error-80', '--syn-sequential-status-error-70',
-    '--syn-sequential-status-error-60', '--syn-sequential-status-error-50',
-    '--syn-sequential-status-error-40', '--syn-sequential-status-error-30',
-    '--syn-sequential-status-error-20', '--syn-sequential-status-error-10',
+    '--syn-chart-sequential-status-error-100', '--syn-chart-sequential-status-error-90',
+    '--syn-chart-sequential-status-error-80', '--syn-chart-sequential-status-error-70',
+    '--syn-chart-sequential-status-error-60', '--syn-chart-sequential-status-error-50',
+    '--syn-chart-sequential-status-error-40', '--syn-chart-sequential-status-error-30',
+    '--syn-chart-sequential-status-error-20', '--syn-chart-sequential-status-error-10',
   ],
   'sequential-status-info': [
-    '--syn-sequential-status-info-100', '--syn-sequential-status-info-90',
-    '--syn-sequential-status-info-80', '--syn-sequential-status-info-70',
-    '--syn-sequential-status-info-60', '--syn-sequential-status-info-50',
-    '--syn-sequential-status-info-40', '--syn-sequential-status-info-30',
-    '--syn-sequential-status-info-20', '--syn-sequential-status-info-10',
+    '--syn-chart-sequential-status-info-100', '--syn-chart-sequential-status-info-90',
+    '--syn-chart-sequential-status-info-80', '--syn-chart-sequential-status-info-70',
+    '--syn-chart-sequential-status-info-60', '--syn-chart-sequential-status-info-50',
+    '--syn-chart-sequential-status-info-40', '--syn-chart-sequential-status-info-30',
+    '--syn-chart-sequential-status-info-20', '--syn-chart-sequential-status-info-10',
   ],
   'sequential-status-success': [
-    '--syn-sequential-status-success-100', '--syn-sequential-status-success-90',
-    '--syn-sequential-status-success-80', '--syn-sequential-status-success-70',
-    '--syn-sequential-status-success-60', '--syn-sequential-status-success-50',
-    '--syn-sequential-status-success-40', '--syn-sequential-status-success-30',
-    '--syn-sequential-status-success-20', '--syn-sequential-status-success-10',
+    '--syn-chart-sequential-status-success-100', '--syn-chart-sequential-status-success-90',
+    '--syn-chart-sequential-status-success-80', '--syn-chart-sequential-status-success-70',
+    '--syn-chart-sequential-status-success-60', '--syn-chart-sequential-status-success-50',
+    '--syn-chart-sequential-status-success-40', '--syn-chart-sequential-status-success-30',
+    '--syn-chart-sequential-status-success-20', '--syn-chart-sequential-status-success-10',
   ],
   'sequential-status-warning': [
-    '--syn-sequential-status-warning-100', '--syn-sequential-status-warning-90',
-    '--syn-sequential-status-warning-80', '--syn-sequential-status-warning-70',
-    '--syn-sequential-status-warning-60', '--syn-sequential-status-warning-50',
-    '--syn-sequential-status-warning-40', '--syn-sequential-status-warning-30',
-    '--syn-sequential-status-warning-20', '--syn-sequential-status-warning-10',
+    '--syn-chart-sequential-status-warning-100', '--syn-chart-sequential-status-warning-90',
+    '--syn-chart-sequential-status-warning-80', '--syn-chart-sequential-status-warning-70',
+    '--syn-chart-sequential-status-warning-60', '--syn-chart-sequential-status-warning-50',
+    '--syn-chart-sequential-status-warning-40', '--syn-chart-sequential-status-warning-30',
+    '--syn-chart-sequential-status-warning-20', '--syn-chart-sequential-status-warning-10',
   ],
 };

package/data/layers/full/component/component:syn-chart/components/types.ts

@@ -1,5 +1,48 @@
-import type { LineSeriesOption } from 'echarts/charts.js';
-import type { ComposeOption } from 'echarts/core.js';
+import type { EChartsOption } from 'echarts/types/dist/shared.js';
+import {
+  type ChartPresets,
+} from './configs/presets/index.js';
+import type { ChartConfigBuilder } from './configs/config.js';
 
-// Scoped option type — only includes the components and chart types registered via use()
-export type ECConfig = ComposeOption<LineSeriesOption>;
+export type ECConfig = EChartsOption;
+
+export type ChartPresetFunctions = {
+  [K in keyof typeof ChartPresets]: (...args: Parameters<(typeof ChartPresets)[K]>) => ChartConfigHandle;
+};
+
+export type ChartConfigHandle = ChartPresetFunctions & Omit<ChartConfigBuilder, 'build'>;
+
+/**
+ * Configuration callback for the chart `config` property.
+ *
+ * This callback is invoked with a configuration handle that provides preset functions
+ * for building the chart configuration. Use the handle to call preset functions and
+ * set the base configuration. The callback is responsible for configuring all aspects
+ * of the chart before rendering.
+ *
+ * @example
+ * ```typescript
+ * config={(handle) => {
+ *   handle.baseConfig({ ... });
+ *   handle.axesShowSplitLines();
+ *   handle.axesAddXLabelIcons({ ... });
+ * }}
+ * ```
+ */
+export type ChartConfigCallback = (handle: ChartConfigHandle) => void;
+
+/**
+ * Accepted input type for the `config` property on `<syn-chart>`.
+ *
+ * Can be either:
+ * - A direct ECharts configuration object
+ * - A callback function that configures the chart using preset functions
+ */
+export type ChartConfigType = ECConfig | ChartConfigCallback;
+
+export type {
+  AxisIndices,
+  AxisUpdateOptions,
+  AxesUpdateOptions,
+  AxisLabelIconOptions,
+} from './configs/axes/types.js';

package/data/layers/full/component/component:syn-chart/react/chart.ts

@@ -15,7 +15,7 @@ Component.define('syn-chart');
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */

package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue

@@ -10,7 +10,7 @@
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -44,16 +44,22 @@ it takes precedence over the palette.
   palette?: SynChart['palette'];
 
   /**
-* The ECharts configuration option object.
+* The ECharts configuration input.
 
-This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+This property accepts either:
+- a plain `ECConfig` object, or
+- a callback that receives a typed preset handle and applies chart presets.
+
+The resolved result maps 1:1 to the ECharts `option` parameter passed to
+`setOption()`.
 Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html)
-and assign the object directly to this property.
+and assign either the object directly or build it through the handle.
 
 > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.
 > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.
 
-Assigning a new object completely replaces the previous chart configuration (`notMerge: true`).
+Assigning a new config input completely replaces the previous chart
+configuration (`notMerge: true`).
 To update only parts of the chart, access the underlying ECharts instance directly and
 call `setOption()` with custom merge options.
  */

package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @synergy-design-system/angular
 
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10), [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/components@3.16.0
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:angular-package/angular/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/synergy-design-system/synergy-design-system.git",
     "directory": "packages/angular"
   },
-  "version": "3.15.7",
+  "version": "3.16.0",
   "scripts": {
     "_build": "pnpm _clean && ng-packagr -c tsconfig.lib.json && pnpm _after-build",
     "_clean": "rm -rf ../_private/angular-demo/.angular",

package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:components-package/components/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "3.15.7",
+  "version": "3.16.0",
   "description": "",
   "repository": {
     "type": "git",

package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @synergy-design-system/react
 
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ chart axes mvp ([#1203](https://github.com/synergy-design-system/synergy-design-system/issues/1203))
+
+  This release introduces the first chart axis MVP for syn-chart.
+
+  New features:
+  - Adds and registers a Synergy ECharts light theme as default for syn-chart.
+  - Provides a config callback API with preset methods like `axesShowSplitLines()`, `axesAddXLabelIcons()`, and `axesHideLabels()` as an alternative to raw ECharts configuration objects for the _config_ property. These methods support both method chaining and sequential calling patterns for maximum flexibility.
+
+### Patch Changes
+
+- Updated dependencies [[`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10), [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10)]:
+  - @synergy-design-system/components@3.16.0
+  - @synergy-design-system/tokens@3.16.0
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:react-package/react/package.json

@@ -43,7 +43,7 @@
     "directory": "packages/react"
   },
   "type": "module",
-  "version": "3.15.7",
+  "version": "3.16.0",
   "devDependencies": {
     "@types/react": "^19.2.17",
     "react": "^19.2.7"

package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts

@@ -269,7 +269,7 @@ export type SynCustomElement<
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */ export type SynChartJSXElement = SynCustomElement<SynChart, []>;
@@ -1737,7 +1737,7 @@ declare module 'react' {
        *
        * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
        * @status experimental
-       * @since 0.0.0
+       * @since 3.15.0
        *
        * @csspart base - The component's base wrapper.
        */ 'syn-chart': SynChartJSXElement;

package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 3.16.0
+
+### Minor Changes
+
+- [#1291](https://github.com/synergy-design-system/synergy-design-system/pull/1291) [`363595e`](https://github.com/synergy-design-system/synergy-design-system/commit/363595ea1fde8baad6e11d69365732aa9f547c10) Thanks [@kirchsuSICKAG](https://github.com/kirchsuSICKAG)! - Released on: 2026-06-24
+
+  feat: ✨ Prefix all chart tokens, add new component and chart tokens
+
+  **Prefixing chart tokens**
+  - chart-related tokens now use a dedicated `chart` prefix to ensure clear scoping and avoid naming conflicts.
+
+  **Component tokens**
+  - `--syn-typography-color-text-quiet`
+  - `--syn-typography-color-text-quiet-inverted`
+
+  **Chart tokens**:
+  - `--syn-chart-grid-lines-color`
+  - `--syn-chart-grid-lines-color-emphasize`
+
 ## 3.15.7
 
 ### Patch Changes

package/data/layers/full/setup/setup:tokens-package/tokens/package.json

@@ -82,5 +82,5 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "3.15.7"
+  "version": "3.16.0"
 }