[UIK-4320][d3-chart] added support for multiline tick labels

semcore/d3-chart/CHANGELOG.md

@@ -4,11 +4,14 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 ## [16.2.1] - 2025-10-17
 
+### Added
+
+- New `multiline` property for `XAxis.Ticks/YAxis.Ticks` and `multilineXTicks/multilineYTicks` for `Chart`.
+
 ### Fixed
 
 - Chart content remains visible after unchecking single legend item in Bar, Horizontal Bar, Histogram, and Stacked Horizontal Bar charts.
 
-
 ## [16.2.0] - 2025-10-03
 
 ### Changed

semcore/d3-chart/src/Axis.jsx

@@ -1,5 +1,5 @@
 import { Component, sstyled } from '@semcore/core';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import createElement from './createElement';
 import style from './style/axis.shadow.css';
@@ -186,6 +186,51 @@ function renderValue(value) {
   return value;
 }
 
+function splitTextByWidth(root, text, maxWidth) {
+  if (!text || !maxWidth || maxWidth <= 0) return [];
+
+  const words = text.split(/\s+/).filter((word) => word.length > 0);
+  if (words.length === 0) return [];
+
+  const lines = [];
+  let currentLine = words[0];
+
+  for (let i = 1; i < words.length; i++) {
+    const testLine = `${currentLine} ${words[i]}`;
+    const testWidth = measureTextWidth(root, testLine);
+
+    if (testWidth <= maxWidth) {
+      currentLine = testLine;
+    } else {
+      lines.push(currentLine);
+      currentLine = words[i];
+
+      if (measureTextWidth(root, currentLine) > maxWidth) {
+        lines.push(currentLine);
+        currentLine = '';
+      }
+    }
+  }
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines;
+}
+
+function measureTextWidth(rootRef, text, fontSize = 12) {
+  const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+  textEl.setAttribute('font-size', fontSize);
+  textEl.setAttribute('visibility', 'hidden');
+  textEl.textContent = text;
+
+  rootRef.appendChild(textEl);
+  const width = textEl.getComputedTextLength();
+  rootRef.removeChild(textEl);
+  return width;
+}
+
 class AxisRoot extends Component {
   static displayName = 'Axis';
 
@@ -246,8 +291,31 @@ function Ticks(props) {
     dataHintsHandler,
     children,
     childrenPosition = 'inside',
+    rootRef,
+    multiline,
   } = props;
 
+  const [ticksState, setTicksState] = useState([]);
+
+  useEffect(() => {
+    const tickBandwidth = scale[indexScale]?.bandwidth?.();
+
+    const ticksWithLines = ticks.map((tick) => {
+      let lines = [];
+
+      if (typeof tick === 'string' && multiline) {
+        lines = splitTextByWidth(rootRef.current, tick, tickBandwidth);
+      }
+
+      return {
+        tick,
+        lines,
+      };
+    });
+
+    setTicksState(ticksWithLines);
+  }, [ticks, multiline]);
+
   const pos = MAP_POSITION_TICK[position] ?? MAP_POSITION_TICK[MAP_INDEX_SCALE_SYMBOL[indexScale]];
   const positionClass = MAP_POSITION_TICK[position] ? position : `custom_${indexScale}`;
 
@@ -263,7 +331,7 @@ function Ticks(props) {
     }
   }
 
-  return ticks.map((value, i) => {
+  return ticksState.map(({ tick: value, lines }, i) => {
     const displayValue = typeof children === 'function' ? undefined : renderValue(value);
 
     return sstyled(styles)(
@@ -279,7 +347,11 @@ function Ticks(props) {
         hide={hide}
         {...pos(scale, value, position)}
       >
-        {displayValue}
+        { lines.length > 1
+          ? lines.map((line, lineIndex) => (
+              <tspan key={line} {...pos(scale, value, position)} dy={lineIndex * 15}>{line}</tspan>
+            ))
+          : displayValue}
       </STick>,
     );
   });

semcore/d3-chart/src/component/Chart/AbstractChart.tsx

@@ -401,8 +401,16 @@ export abstract class AbstractChart<
   }
 
   protected renderAxis(): React.ReactNode {
-    const { invertAxis, showXAxis, showYAxis, data, axisXValueFormatter, axisYValueFormatter } =
-      this.asProps;
+    const {
+      invertAxis,
+      showXAxis,
+      showYAxis,
+      data,
+      axisXValueFormatter,
+      axisYValueFormatter,
+      multilineXTicks,
+      multilineYTicks,
+    } = this.asProps;
 
     if (!Array.isArray(data)) {
       return null;
@@ -424,10 +432,10 @@ export abstract class AbstractChart<
           <YAxis>
             {yTicks
               ? (
-                  <YAxis.Ticks ticks={yTicks}>{childrenY}</YAxis.Ticks>
+                  <YAxis.Ticks multiline={multilineYTicks} ticks={yTicks}>{childrenY}</YAxis.Ticks>
                 )
               : (
-                  <YAxis.Ticks>{childrenY}</YAxis.Ticks>
+                  <YAxis.Ticks multiline={multilineYTicks}>{childrenY}</YAxis.Ticks>
                 )}
             {invertAxis !== true && (yTicks ? <YAxis.Grid ticks={yTicks} /> : <YAxis.Grid />)}
           </YAxis>
@@ -437,10 +445,10 @@ export abstract class AbstractChart<
           <XAxis>
             {xTicks
               ? (
-                  <XAxis.Ticks ticks={xTicks}>{childrenX}</XAxis.Ticks>
+                  <XAxis.Ticks multiline={multilineXTicks} ticks={xTicks}>{childrenX}</XAxis.Ticks>
                 )
               : (
-                  <XAxis.Ticks>{childrenX}</XAxis.Ticks>
+                  <XAxis.Ticks multiline={multilineXTicks}>{childrenX}</XAxis.Ticks>
                 )}
             {invertAxis === true && (xTicks ? <XAxis.Grid ticks={xTicks} /> : <XAxis.Grid />)}
           </XAxis>

semcore/d3-chart/src/component/Chart/AbstractChart.type.ts

@@ -124,6 +124,10 @@ export type BaseChartProps<T extends ListData | ObjectData> = FlexProps &
      * Count of ticks for Y axis
      */
     yTicksCount?: number;
+    /** Enables multiline tick labels for X axis. */
+    multilineXTicks?: boolean;
+    /** Enables multiline tick labels for Y axis. */
+    multilineYTicks?: boolean;
     /**
      * Group key for all array-based charts (for get keys of items for legend except that group key)
      */

semcore/d3-chart/src/types/Axis.d.ts

@@ -38,6 +38,8 @@ export type AxisTicksProps = Context & {
   hide?: boolean;
   /** Values for axis ticks */
   ticks?: any[];
+  /** Enables multiline tick labels. */
+  multiline?: boolean;
 };
 
 /** @deprecated */

stories/components/d3-chart/docs/examples/bar-chart/basic-usage.tsx

@@ -16,7 +16,7 @@ const Demo = () => {
 const data = Array(5)
   .fill({})
   .map((d, i) => ({
-    category: `Category ${i}`,
+    category: `Google AI Mode ${i} Tops`,
     bar: Math.random() * 10,
   }));
 

stories/components/d3-chart/docs/examples/bar-chart/grouped-bars.tsx

@@ -56,7 +56,7 @@ const Demo = () => {
 const data = Array(5)
   .fill({})
   .map((d, i) => ({
-    category: `Category ${i}`,
+    category: `Google AI Mode ${i}`,
     bar1: Math.random() * 10,
     bar2: Math.random() * 10,
   }));