@gravity-ui/chartkit 5.14.1 → 5.16.0

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.js

@@ -1,6 +1,6 @@
-import { arc, group } from 'd3';
+import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
-import { pieGenerator } from './utils';
+import { getCurveFactory, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -30,6 +30,7 @@ export function preparePieData(args) {
             radius,
             segments: [],
             labels: [],
+            connectors: [],
             borderColor,
             borderWidth,
             borderRadius,
@@ -40,6 +41,7 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
+            htmlElements: [],
         };
         const segments = items.map((item) => {
             return {
@@ -53,6 +55,11 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
         if (dataLabels.enabled) {
             const { style, connectorPadding, distance } = dataLabels;
             const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
@@ -81,15 +88,17 @@ export function preparePieData(args) {
             items.forEach((d, index) => {
                 const prevLabel = labels[labels.length - 1];
                 const text = String(d.data.label || d.data.value);
-                const labelSize = getLabelsSize({ labels: [text], style });
+                const shouldUseHtml = dataLabels.html;
+                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
                 const labelWidth = labelSize.maxWidth;
                 const relatedSegment = data.segments[index];
                 const getLabelPosition = (angle) => {
                     let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    x = Math.max(-boundsWidth / 2, x);
-                    if (y < 0) {
-                        y -= labelHeight;
+                    y = y < 0 ? y - labelHeight : y;
+                    if (shouldUseHtml) {
+                        x = x < 0 ? x - labelWidth : x;
                     }
+                    x = Math.max(-boundsWidth / 2, x);
                     return [x, y];
                 };
                 const getConnectorPoints = (angle) => {
@@ -114,10 +123,6 @@ export function preparePieData(args) {
                     textAnchor: midAngle < Math.PI ? 'start' : 'end',
                     series: { id: d.id },
                     active: true,
-                    connector: {
-                        points: getConnectorPoints(midAngle),
-                        color: relatedSegment.data.color,
-                    },
                     segment: relatedSegment.data,
                     angle: midAngle,
                 };
@@ -138,7 +143,6 @@ export function preparePieData(args) {
                                 const [newX, newY] = getLabelPosition(newAngle);
                                 label.x = newX;
                                 label.y = newY;
-                                label.connector.points = getConnectorPoints(newAngle);
                                 if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                     shouldAdjustAngle = false;
                                     overlap = false;
@@ -158,7 +162,21 @@ export function preparePieData(args) {
                             label.maxWidth = label.size.width - (right - boundsWidth / 2);
                         }
                     }
-                    labels.push(label);
+                    if (shouldUseHtml) {
+                        data.htmlElements.push({
+                            x: boundsWidth / 2 + label.x,
+                            y: boundsHeight / 2 + label.y,
+                            content: label.text,
+                        });
+                    }
+                    else {
+                        labels.push(label);
+                    }
+                    const connector = {
+                        path: line(getConnectorPoints(midAngle)),
+                        color: relatedSegment.data.color,
+                    };
+                    data.connectors.push(connector);
                 }
             });
             data.labels = labels;

package/build/plugins/d3/renderer/hooks/useShapes/pie/types.d.ts

@@ -1,6 +1,6 @@
 import type { PieArcDatum } from 'd3';
 import { ConnectorCurve } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedPieSeries } from '../../useSeries/types';
 export type SegmentData = {
     value: number;
@@ -12,18 +12,19 @@ export type SegmentData = {
     pie: PreparedPieData;
 };
 export type PieLabelData = LabelData & {
-    connector: {
-        points: [number, number][];
-        color: string;
-    };
     segment: SegmentData;
     angle: number;
     maxWidth: number;
 };
+export type PieConnectorData = {
+    path: string | null;
+    color: string;
+};
 export type PreparedPieData = {
     id: string;
     segments: PieArcDatum<SegmentData>[];
     labels: PieLabelData[];
+    connectors: PieConnectorData[];
     center: [number, number];
     radius: number;
     innerRadius: number;
@@ -37,4 +38,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.d.ts

@@ -7,5 +7,6 @@ type ScatterSeriesShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
+import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions } = props;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -62,5 +63,7 @@ export function ScatterSeriesShape(props) {
             dispatcher.on('hover-shape.scatter', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.js

@@ -23,6 +23,7 @@ export const prepareScatterData = (args) => {
                 },
                 hovered: false,
                 active: true,
+                htmlElements: [],
             });
         });
         return acc;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/types.d.ts

@@ -1,4 +1,5 @@
 import { ScatterSeriesData } from '../../../../../../types';
+import { HtmlItem } from '../../../types';
 import { PreparedScatterSeries } from '../../useSeries/types';
 type PointData = {
     x: number;
@@ -11,6 +12,7 @@ export type MarkerData = {
     point: PointData;
     active: boolean;
     hovered: boolean;
+    htmlElements: HtmlItem[];
 };
 export type PreparedScatterData = MarkerData;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.d.ts

@@ -6,6 +6,7 @@ type ShapeProps = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedTreemapData;
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -3,9 +3,10 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { setEllipsisForOverflowTexts } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
-    const { dispatcher, preparedData, seriesOptions } = props;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -92,5 +93,7 @@ export const TreemapSeriesShape = (props) => {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/treemap/prepare-data.js

@@ -51,7 +51,7 @@ export function prepareTreemapData(args) {
     })(hierarchy);
     const leaves = root.leaves();
     const labelData = ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) ? getLabelData(leaves) : [];
-    return { labelData, leaves, series };
+    return { labelData, leaves, series, htmlElements: [] };
 }
 function getSeriesDataWithRootNode(series) {
     return series.data.reduce((acc, d) => {

package/build/plugins/d3/renderer/hooks/useShapes/treemap/types.d.ts

@@ -1,5 +1,6 @@
 import type { HierarchyRectangularNode } from 'd3';
 import type { TreemapSeriesData } from '../../../../../../types';
+import { HtmlItem } from '../../../types';
 import type { PreparedTreemapSeries } from '../../useSeries/types';
 export type TreemapLabelData = {
     text: string;
@@ -12,4 +13,5 @@ export type PreparedTreemapData = {
     labelData: TreemapLabelData[];
     leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
     series: PreparedTreemapSeries;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/index.d.ts

@@ -8,5 +8,6 @@ type Args = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedWaterfallData[];
     seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
 };
 export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/index.js

@@ -4,12 +4,13 @@ import get from 'lodash/get';
 import { DashStyle } from '../../../../../../constants';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 import { getLineDashArray } from '../utils';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 const b = block('d3-waterfall');
 export const WaterfallSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
     React.useEffect(() => {
@@ -121,5 +122,7 @@ export const WaterfallSeriesShapes = (args) => {
             dispatcher.on('hover-shape.waterfall', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
-    return React.createElement("g", { ref: ref, className: b() });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/prepare-data.js

@@ -124,6 +124,7 @@ export const prepareWaterfallData = (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
+            htmlElements: [],
         };
         preparedData.label = getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/types.d.ts

@@ -1,5 +1,5 @@
 import { WaterfallSeriesData } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedWaterfallSeries } from '../../useSeries/types';
 export type PreparedWaterfallData = {
     x: number;
@@ -11,4 +11,5 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/types/index.d.ts

@@ -14,3 +14,11 @@ export type LabelData = {
     };
     active?: boolean;
 };
+export type HtmlItem = {
+    x: number;
+    y: number;
+    content: string;
+};
+export type ShapeDataWithHtmlItems = {
+    htmlElements: HtmlItem[];
+};

package/build/plugins/d3/renderer/utils/axis-generators/bottom.d.ts

@@ -4,15 +4,16 @@ type AxisBottomArgs = {
     scale: AxisScale<AxisDomain>;
     ticks: {
         count?: number;
-        maxTickCount: number;
-        labelFormat: (value: any) => string;
+        maxTickCount?: number;
+        labelFormat?: (value: any) => string;
         labelsPaddings?: number;
         labelsMargin?: number;
         labelsStyle?: BaseTextStyle;
         labelsMaxWidth?: number;
         labelsLineHeight: number;
-        items: [number, number][];
-        rotation: number;
+        items?: [number, number][];
+        rotation?: number;
+        tickColor?: string;
     };
     domain: {
         size: number;

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -16,7 +16,7 @@ function addDomain(selection, options) {
     }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat, labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation, }, domain: { size: domainSize, color: domainColor }, } = args;
+    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -25,10 +25,11 @@ export function axisBottom(args) {
         style: labelsStyle,
     }).maxHeight;
     return function (selection) {
-        var _a, _b;
-        const x = ((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.x) || 0;
-        const right = x + domainSize;
-        const top = -tickItems[0][0] || 0;
+        var _a, _b, _c;
+        const rect = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
+        const right = x + domain.size;
+        const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
         let transform = `translate(0, ${labelHeight + labelsMargin - top}px)`;
         if (rotation) {
             const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
@@ -39,7 +40,7 @@ export function axisBottom(args) {
             transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
         }
         const tickPath = path();
-        tickItems.forEach(([start, end]) => {
+        tickItems === null || tickItems === void 0 ? void 0 : tickItems.forEach(([start, end]) => {
             tickPath.moveTo(0, start);
             tickPath.lineTo(0, end);
         });
@@ -49,7 +50,9 @@ export function axisBottom(args) {
             .order()
             .join((el) => {
             const tick = el.append('g').attr('class', 'tick');
-            tick.append('path').attr('d', tickPath.toString()).attr('stroke', 'currentColor');
+            tick.append('path')
+                .attr('d', tickPath.toString())
+                .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
             tick.append('text')
                 .text(labelFormat)
                 .attr('fill', 'currentColor')
@@ -115,6 +118,7 @@ export function axisBottom(args) {
                 }
             });
         }
+        const { size: domainSize, color: domainColor } = domain;
         selection
             .call(addDomain, { size: domainSize, color: domainColor })
             .style('font-size', (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '');

package/build/plugins/d3/renderer/utils/axis.d.ts

@@ -15,7 +15,7 @@ export declare function getXTickPosition({ scale, offset }: {
 export declare function getXAxisItems({ scale, count, maxCount, }: {
     scale: AxisScale<AxisDomain>;
     count?: number;
-    maxCount: number;
+    maxCount?: number;
 }): any;
 export declare function getMaxTickCount({ axis, width }: {
     axis: PreparedAxis;

package/build/plugins/d3/renderer/utils/axis.js

@@ -32,7 +32,7 @@ export function getXTickPosition({ scale, offset }) {
 }
 export function getXAxisItems({ scale, count, maxCount, }) {
     let values = getScaleTicks(scale, count);
-    if (values.length > maxCount) {
+    if (maxCount && values.length > maxCount) {
         const step = Math.ceil(values.length / maxCount);
         values = values.filter((_, i) => i % step === 0);
     }

package/build/plugins/d3/renderer/utils/color.d.ts

@@ -0,0 +1,10 @@
+import { ChartKitWidgetData } from '../../../../types';
+export declare function getDomainForContinuousColorScale(args: {
+    series: ChartKitWidgetData['series']['data'];
+}): number[];
+export declare function getDefaultColorStops(size: number): number[];
+export declare function getContinuesColorFn(args: {
+    values: number[];
+    colors: string[];
+    stops?: number[];
+}): (value: number) => string;

package/build/plugins/d3/renderer/utils/color.js

@@ -0,0 +1,43 @@
+import { range, scaleLinear } from 'd3';
+export function getDomainForContinuousColorScale(args) {
+    const { series } = args;
+    const values = series.reduce((acc, s) => {
+        switch (s.type) {
+            case 'pie': {
+                acc.push(...s.data.map((d) => d.value));
+                break;
+            }
+            case 'bar-y': {
+                acc.push(...s.data.map((d) => Number(d.x)));
+                break;
+            }
+            case 'scatter':
+            case 'bar-x':
+            case 'waterfall':
+            case 'line':
+            case 'area': {
+                acc.push(...s.data.map((d) => Number(d.y)));
+                break;
+            }
+            default: {
+                throw Error(`The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`);
+            }
+        }
+        return acc;
+    }, []);
+    return [Math.min(...values), Math.max(...values)];
+}
+export function getDefaultColorStops(size) {
+    return range(size).map((d) => d / size);
+}
+export function getContinuesColorFn(args) {
+    const { values, colors, stops: customStops } = args;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const stops = customStops !== null && customStops !== void 0 ? customStops : getDefaultColorStops(colors.length);
+    const color = scaleLinear(stops, colors);
+    return (value) => {
+        const colorValue = (value - min) / (max - min);
+        return color(colorValue);
+    };
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -6,8 +6,10 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export * from './labels';
+export * from './legend';
 export * from './symbol';
 export * from './series';
+export * from './color';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartKitWidgetSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartKitWidgetSeries['type'][];
 export type AxisDirection = 'x' | 'y';

package/build/plugins/d3/renderer/utils/index.js

@@ -12,8 +12,10 @@ export * from './text';
 export * from './time';
 export * from './axis';
 export * from './labels';
+export * from './legend';
 export * from './symbol';
 export * from './series';
+export * from './color';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',

package/build/plugins/d3/renderer/utils/legend.d.ts

@@ -0,0 +1,8 @@
+import { Selection } from 'd3';
+export declare function createGradientRect(container: Selection<SVGGElement, unknown, null, undefined>, args: {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    interpolator: (value: number) => string;
+}): Selection<SVGImageElement, unknown, null, undefined>;

package/build/plugins/d3/renderer/utils/legend.js

@@ -0,0 +1,23 @@
+export function createGradientRect(container, args) {
+    const { x = 0, y = 0, width, height, interpolator } = args;
+    const n = 256;
+    const canvas = document.createElement('canvas');
+    canvas.width = n;
+    canvas.height = 1;
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw Error("Couldn't get canvas context");
+    }
+    for (let i = 0, j = n - 1; i < n; ++i) {
+        context.fillStyle = interpolator(i / j);
+        context.fillRect(i, 0, 1, height);
+    }
+    return container
+        .append('image')
+        .attr('preserveAspectRatio', 'none')
+        .attr('height', height)
+        .attr('width', width)
+        .attr('x', x)
+        .attr('y', y)
+        .attr('xlink:href', canvas.toDataURL());
+}

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -9,10 +9,11 @@ export declare function hasOverlappingLabels({ width, labels, padding, style, }:
     style?: BaseTextStyle;
     padding?: number;
 }): boolean;
-export declare function getLabelsSize({ labels, style, rotation, }: {
+export declare function getLabelsSize({ labels, style, rotation, html, }: {
     labels: string[];
     style?: BaseTextStyle;
     rotation?: number;
+    html?: boolean;
 }): {
     maxHeight: number;
     maxWidth: number;

package/build/plugins/d3/renderer/utils/text.js

@@ -63,24 +63,46 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
         .text((d) => d);
     return text;
 }
-export function getLabelsSize({ labels, style, rotation, }) {
-    var _a;
+export function getLabelsSize({ labels, style, rotation, html, }) {
+    var _a, _b, _c;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
     const container = select(document.body)
         .append('div')
         .attr('class', 'chartkit chartkit-theme_common');
-    const svg = container.append('svg');
-    const textSelection = renderLabels(svg, { labels, style });
-    if (rotation) {
-        textSelection
-            .attr('text-anchor', rotation > 0 ? 'start' : 'end')
-            .style('transform', `rotate(${rotation}deg)`);
+    const result = { maxHeight: 0, maxWidth: 0 };
+    let labelWrapper;
+    if (html) {
+        labelWrapper = container.append('div').style('position', 'absolute').node();
+        const { height, width } = labels.reduce((acc, l) => {
+            var _a, _b;
+            if (labelWrapper) {
+                labelWrapper.innerHTML = l;
+            }
+            const rect = labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.getBoundingClientRect();
+            return {
+                width: Math.max(acc.width, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0),
+                height: Math.max(acc.height, (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0),
+            };
+        }, { height: 0, width: 0 });
+        result.maxWidth = width;
+        result.maxHeight = height;
+    }
+    else {
+        const svg = container.append('svg');
+        const textSelection = renderLabels(svg, { labels, style });
+        if (rotation) {
+            textSelection
+                .attr('text-anchor', rotation > 0 ? 'start' : 'end')
+                .style('transform', `rotate(${rotation}deg)`);
+        }
+        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
+        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
     }
-    const { height = 0, width = 0 } = ((_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
     container.remove();
-    return { maxHeight: height, maxWidth: width };
+    return result;
 }
 export function wrapText(args) {
     const { text, style, width } = args;

package/build/types/widget-data/bar-x.d.ts

@@ -49,7 +49,7 @@ export type BarXSeries<T = any> = BaseSeries & {
      * @default true
      * */
     grouping?: boolean;
-    dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
+    dataLabels?: BaseSeries['dataLabels'] & ChartKitWidgetSeriesOptions['dataLabels'] & {
         /**
          * Whether to align the data label inside or outside the box
          *

package/build/types/widget-data/base.d.ts

@@ -21,6 +21,13 @@ export type BaseSeries = {
          * @default false
          * */
         allowOverlap?: boolean;
+        /**
+         * Allows to use any html-tags to display the content.
+         * The element will be displayed outside the box of the SVG element.
+         *
+         * @default false
+         * */
+        html?: boolean;
     };
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;