@gravity-ui/charts 1.13.1 → 1.14.0

package/dist/cjs/components/Axis/AxisX.d.ts

@@ -3,13 +3,16 @@ import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import './styles.css';
 type Props = {
     axis: PreparedAxis;
-    width: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
     height: number;
+    htmlLayout: HTMLElement | null;
     scale: ChartScale;
     split: PreparedSplit;
+    width: number;
+    leftmostLimit?: number;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
-    leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;

package/dist/cjs/components/Axis/AxisX.js

@@ -42,11 +42,11 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, leftmostLimit, } = props;
+    const { axis, boundsOffsetLeft, boundsOffsetTop, height: totalHeight, htmlLayout, leftmostLimit, plotAfterRef, plotBeforeRef, split, scale, width, } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         (async () => {
-            if (!ref.current) {
+            if (!ref.current || !htmlLayout) {
                 return;
             }
             const svgElement = select(ref.current);
@@ -65,24 +65,29 @@ export const AxisX = React.memo(function AxisX(props) {
             }
             const axisScale = scale;
             const xAxisGenerator = await axisBottom({
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                domain: {
+                    size: width,
+                    color: axis.lineColor,
+                },
+                htmlLayout,
                 leftmostLimit,
                 scale: axisScale,
                 ticks: {
+                    count: getTicksCount({ axis, range: width }),
+                    labelsHtml: axis.labels.html,
                     items: tickItems,
                     labelFormat: getLabelFormatter({ axis, scale }),
-                    labelsPaddings: axis.labels.padding,
+                    labelsHeight: axis.labels.height,
+                    labelsLineHeight: axis.labels.lineHeight,
                     labelsMargin: axis.labels.margin,
-                    labelsStyle: axis.labels.style,
                     labelsMaxWidth: axis.labels.maxWidth,
-                    labelsLineHeight: axis.labels.lineHeight,
-                    count: getTicksCount({ axis, range: width }),
+                    labelsPaddings: axis.labels.padding,
+                    labelsStyle: axis.labels.style,
                     maxTickCount: getMaxTickCount({ axis, width }),
                     rotation: axis.labels.rotation,
                 },
-                domain: {
-                    size: width,
-                    color: axis.lineColor,
-                },
             });
             svgElement.call(xAxisGenerator).attr('class', b());
             // add an axis header if necessary
@@ -219,6 +224,18 @@ export const AxisX = React.memo(function AxisX(props) {
                 setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
             }
         })();
-    }, [axis, width, totalHeight, scale, split, leftmostLimit, plotBeforeRef, plotAfterRef]);
+    }, [
+        axis,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        htmlLayout,
+        leftmostLimit,
+        plotAfterRef,
+        plotBeforeRef,
+        scale,
+        split,
+        totalHeight,
+        width,
+    ]);
     return React.createElement("g", { ref: ref });
 });

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -1,16 +1,19 @@
 import React from 'react';
 import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import './styles.css';
-type Props = {
+interface Props {
     axes: PreparedAxis[];
+    boundsOffsetTop: number;
+    boundsOffsetLeft: number;
     scale: ChartScale[];
     width: number;
     height: number;
+    htmlLayout: HTMLElement | null;
     split: PreparedSplit;
     plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
     plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
     topLimit?: number;
-};
+}
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Axis/AxisY.js

@@ -3,6 +3,8 @@ import { axisLeft, axisRight, line, select } from 'd3';
 import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisPlotsPosition, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
+const AXIS_LEFT_HTML_LABELS_DATA_ATTR = 'data-axis-left-html-labels';
+const AXIS_RIGHT_HTML_LABELS_DATA_ATTR = 'data-axis-right-html-labels';
 function transformLabel(args) {
     const { node, axis, startTopOffset } = args;
     let topOffset = startTopOffset !== null && startTopOffset !== void 0 ? startTopOffset : axis.labels.lineHeight / 2;
@@ -36,7 +38,7 @@ function getAxisGenerator(args) {
         .tickSize(tickSize)
         .tickPadding(preparedAxis.labels.margin)
         .tickFormat((value) => {
-        if (!preparedAxis.labels.enabled) {
+        if (!preparedAxis.labels.enabled || preparedAxis.labels.html) {
             return '';
         }
         return formatAxisTickLabel({
@@ -82,17 +84,20 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, bottomLimit = 0, topLimit = 0, } = props;
+    const { axes: allAxes, bottomLimit = 0, boundsOffsetLeft, boundsOffsetTop, height: totalHeight, htmlLayout, plotAfterRef, plotBeforeRef, scale, split, topLimit = 0, width, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
     React.useEffect(() => {
-        if (!ref.current) {
+        if (!ref.current || !htmlLayout) {
             return;
         }
         const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const htmlSelection = select(htmlLayout);
+        htmlSelection.selectAll(`[${AXIS_LEFT_HTML_LABELS_DATA_ATTR}]`).remove();
+        htmlSelection.selectAll(`[${AXIS_RIGHT_HTML_LABELS_DATA_ATTR}]`).remove();
         let plotBeforeContainer = null;
         let plotAfterContainer = null;
         const plotDataAttr = 'data-plot-y';
@@ -111,6 +116,7 @@ export const AxisY = (props) => {
             .attr('class', b())
             .style('transform', (d) => getAxisPlotsPosition(d, split, width));
         axisSelection.each((d, index, node) => {
+            var _a, _b;
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
             const axisScale = seriesScale;
@@ -125,7 +131,56 @@ export const AxisY = (props) => {
             // because the standard generator interrupts the desired font
             // https://github.com/d3/d3-axis/blob/main/src/axis.js#L110
             axisItem.attr('font-family', null);
-            if (d.labels.enabled) {
+            if (d.labels.enabled && d.labels.html) {
+                const offsetTop = ((_a = svgElement.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) || 0;
+                const offsetLeft = ((_b = svgElement.node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left) || 0;
+                const htmlLabelsData = [];
+                axisItem
+                    .selectAll('.tick')
+                    .data(axisScale.domain())
+                    .each(function (tickContent) {
+                    const rect = this.getBoundingClientRect();
+                    htmlLabelsData.push({
+                        content: tickContent,
+                        right: rect.right,
+                        top: rect.top,
+                    });
+                });
+                const dataAttr = d.position === 'left'
+                    ? AXIS_LEFT_HTML_LABELS_DATA_ATTR
+                    : AXIS_RIGHT_HTML_LABELS_DATA_ATTR;
+                htmlSelection.append('div').attr(dataAttr, 1).style('position', 'absolute');
+                htmlLabelsData.forEach((labelData) => {
+                    htmlSelection
+                        .selectAll(`[${dataAttr}]`)
+                        .data([labelData])
+                        .append('div')
+                        .html(function (l) {
+                        return l.content;
+                    })
+                        .style('font-size', d.labels.style.fontSize || '')
+                        .style('position', 'absolute')
+                        .style('white-space', 'nowrap')
+                        .style('color', 'var(--g-color-text-secondary)')
+                        .style('overflow', 'hidden')
+                        .style('text-overflow', 'ellipsis')
+                        .style('height', `${d.labels.height}px`)
+                        .style('display', 'inline-flex')
+                        .style('align-items', 'center')
+                        .style('left', function (l) {
+                        if (d.position === 'right') {
+                            return `${l.right - offsetLeft + d.labels.margin + boundsOffsetLeft}px`;
+                        }
+                        const rect = this.getBoundingClientRect();
+                        return `${boundsOffsetLeft - rect.width - d.labels.margin}px`;
+                    })
+                        .style('top', function (l) {
+                        const rect = this.getBoundingClientRect();
+                        return `${l.top + boundsOffsetTop - offsetTop - rect.height / 2}px`;
+                    });
+                });
+            }
+            else if (d.labels.enabled) {
                 const labels = axisItem.selectAll('.tick text');
                 const tickTexts = labels
                     // The offset must be applied before the labels are rotated.
@@ -344,15 +399,18 @@ export const AxisY = (props) => {
         });
     }, [
         allAxes,
-        width,
-        height,
-        scale,
-        split,
         bottomLimit,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        height,
+        htmlLayout,
         lineGenerator,
-        plotBeforeRef,
         plotAfterRef,
+        plotBeforeRef,
+        scale,
+        split,
         topLimit,
+        width,
     ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

package/dist/cjs/components/ChartInner/index.js

@@ -94,9 +94,9 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, topLimit: svgTopPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    React.createElement(AxisY, { axes: yAxis, bottomLimit: svgBottomPos, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: yScale, split: preparedSplit, topLimit: svgTopPos, width: boundsWidth }),
                     xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
+                        React.createElement(AxisX, { axis: xAxis, boundsOffsetLeft: boundsOffsetLeft, boundsOffsetTop: boundsOffsetTop, height: boundsHeight, htmlLayout: htmlLayout, leftmostLimit: svgXPos, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, scale: xScale, split: preparedSplit, width: boundsWidth }))))),
                 React.createElement("g", { ref: plotBeforeRef }),
                 shapes,
                 React.createElement("g", { ref: plotAfterRef })),

package/dist/cjs/components/Legend/index.js

@@ -297,6 +297,11 @@ export const Legend = (props) => {
                 // ticks
                 const scale = scaleLinear(domain, [0, legend.width]);
                 const xAxisGenerator = await axisBottom({
+                    domain: {
+                        size: legend.width,
+                        color: 'transparent',
+                    },
+                    htmlLayout,
                     scale,
                     ticks: {
                         items: [[0, -rectHeight]],
@@ -307,10 +312,6 @@ export const Legend = (props) => {
                         labelFormat: (value) => formatNumber(value, { unit: 'auto' }),
                         labelsStyle: legend.ticks.style,
                     },
-                    domain: {
-                        size: legend.width,
-                        color: 'transparent',
-                    },
                 });
                 const tickTop = legend.title.height + legend.title.margin + rectHeight;
                 const legendAxisClassname = b('axis');

package/dist/cjs/components/Tooltip/DefaultTooltipContent/index.js

@@ -11,7 +11,7 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
     const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     const hoveredValues = getHoveredValues({ hovered, xAxis, yAxis });
     return (React.createElement("div", { className: b('content') },
-        measureValue && React.createElement("div", { className: b('series-name') }, measureValue),
+        measureValue && (React.createElement("div", { className: b('series-name'), dangerouslySetInnerHTML: { __html: measureValue } })),
         // eslint-disable-next-line complexity
         hovered.map((seriesItem, i) => {
             var _a;
@@ -30,7 +30,7 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format,
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: series.name, striped: striped, value: formattedValue }));
+                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
@@ -56,7 +56,7 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
                         value: hoveredValues[i],
                         format,
                     });
-                    return (React.createElement(Row, { key: id, active: active, color: color, label: series.name, striped: striped, value: formattedValue }));
+                    return (React.createElement(Row, { key: id, active: active, color: color, label: React.createElement("span", { dangerouslySetInnerHTML: { __html: series.name } }), striped: striped, value: formattedValue }));
                 }
                 case 'pie':
                 case 'treemap': {

package/dist/cjs/hooks/useAxisScales/index.js

@@ -29,39 +29,25 @@ function getYScaleRange(args) {
         case 'linear':
         case 'logarithmic': {
             let range = [boundsHeight, boundsHeight * axis.maxPadding];
-            switch (axis.order) {
-                case 'sortDesc':
-                case 'reverse': {
-                    range.reverse();
-                }
-            }
             const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
             if (barYSeries.length) {
                 const groupedData = groupBarYDataByYValue(barYSeries, [axis]);
-                const { barSize, dataLength } = getBarYLayoutForNumericScale({
-                    plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
-                    groupedData,
-                    seriesOptions: seriesOptions,
-                });
-                if (dataLength > 1) {
-                    const alreadyCountedStackingIds = new Set();
-                    const offsetMultiplier = barYSeries.reduce((acc, s) => {
-                        let count = 0;
-                        if (s.stackId) {
-                            if (!alreadyCountedStackingIds.has(s.stackId)) {
-                                alreadyCountedStackingIds.add(s.stackId);
-                                count = 1;
-                            }
-                        }
-                        else {
-                            count = 1;
-                        }
-                        return acc + count;
-                    }, 0);
-                    const offset = (barSize * Math.max(offsetMultiplier, 1)) / 2;
+                if (Object.keys(groupedData).length > 1) {
+                    const { bandSize } = getBarYLayoutForNumericScale({
+                        plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
+                        groupedData,
+                        seriesOptions: seriesOptions,
+                    });
+                    const offset = bandSize / 2;
                     range = [range[0] - offset, range[1] + offset];
                 }
             }
+            switch (axis.order) {
+                case 'sortDesc':
+                case 'reverse': {
+                    range.reverse();
+                }
+            }
             return range;
         }
         case 'category': {

package/dist/cjs/hooks/useChartOptions/title.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { getHorisontalSvgTextHeight } from '../../utils';
+import { getHorizontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_PADDINGS = 8 * 2;
 export const getPreparedTitle = ({ title, }) => {
@@ -9,7 +9,7 @@ export const getPreparedTitle = ({ title, }) => {
         fontWeight: get(title, 'style.fontWeight'),
     };
     const titleHeight = titleText
-        ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
+        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
         : 0;
     const preparedTitle = titleText
         ? { text: titleText, style: titleStyle, height: titleHeight }

package/dist/cjs/hooks/useChartOptions/types.d.ts

@@ -1,6 +1,6 @@
 import type { DashStyle } from '../../constants';
 import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, ChartZoom, DeepRequired, PlotLayerPlacement } from '../../types';
-type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
+type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
     rotation: number;
     height: number;

package/dist/cjs/hooks/useChartOptions/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
@@ -19,19 +19,22 @@ async function getLabelSettings({ axis, seriesData, width, autoRotation = true,
             step,
         });
     });
-    const overlapping = hasOverlappingLabels({
-        width,
-        labels,
-        padding: axis.labels.padding,
-        style: axis.labels.style,
-    });
+    const overlapping = axis.labels.html
+        ? false
+        : hasOverlappingLabels({
+            width,
+            labels,
+            padding: axis.labels.padding,
+            style: axis.labels.style,
+        });
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
-    const rotation = axis.labels.rotation || defaultRotation;
-    const labelsHeight = rotation
+    const rotation = axis.labels.html ? 0 : axis.labels.rotation || defaultRotation;
+    const labelsHeight = rotation || axis.labels.html
         ? (await getLabelsSize({
             labels,
             style: axis.labels.style,
             rotation,
+            html: axis.labels.html,
         })).maxHeight
         : axis.labels.lineHeight;
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
@@ -54,6 +57,10 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     const labelsStyle = {
         fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
     };
+    const labelsHtml = get(xAxis, 'labels.html', false);
+    const labelsLineHeight = labelsHtml
+        ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
+        : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
     const preparedXAxis = {
         type: get(xAxis, 'type', 'linear'),
         labels: {
@@ -66,8 +73,9 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             style: labelsStyle,
             width: 0,
             height: 0,
-            lineHeight: getHorisontalSvgTextHeight({ text: 'Tmp', style: labelsStyle }),
+            lineHeight: labelsLineHeight,
             maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+            html: labelsHtml,
         },
         lineColor: get(xAxis, 'lineColor'),
         categories: getAxisCategories(xAxis),

package/dist/cjs/hooks/useChartOptions/y-axis.js

@@ -1,12 +1,12 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
     const { axis, seriesData, seriesOptions } = args;
     if (!axis.labels.enabled) {
-        return 0;
+        return { height: 0, width: 0 };
     }
     const scale = createYScale({
         axis,
@@ -26,8 +26,9 @@ const getAxisLabelMaxWidth = async (args) => {
         labels,
         style: axis.labels.style,
         rotation: axis.labels.rotation,
+        html: axis.labels.html,
     });
-    return size.maxWidth;
+    return { height: size.maxHeight, width: size.maxWidth };
 };
 export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, }) => {
     const axisByPlot = [];
@@ -49,6 +50,10 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
         };
+        const labelsHtml = get(axisItem, 'labels.html', false);
+        const labelsLineHeight = labelsHtml
+            ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
+            : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
         const titleText = get(axisItem, 'title.text', '');
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
@@ -72,11 +77,12 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 dateFormat: get(axisItem, 'labels.dateFormat'),
                 numberFormat: get(axisItem, 'labels.numberFormat'),
                 style: labelsStyle,
-                rotation: get(axisItem, 'labels.rotation', 0),
+                rotation: labelsHtml ? 0 : get(axisItem, 'labels.rotation', 0),
                 width: 0,
                 height: 0,
-                lineHeight: getHorisontalSvgTextHeight({ text: 'TmpLabel', style: labelsStyle }),
+                lineHeight: labelsLineHeight,
                 maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+                html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
             categories: getAxisCategories(axisItem),
@@ -132,11 +138,16 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
             order: axisItem.order,
         };
         if (labelsEnabled) {
-            preparedAxis.labels.width = await getAxisLabelMaxWidth({
+            const { height: labelsHeight, width: labelsWidth } = await getAxisLabelMaxWidth({
                 axis: preparedAxis,
                 seriesData,
                 seriesOptions,
             });
+            preparedAxis.labels.height = labelsHeight;
+            preparedAxis.labels.width =
+                labelsWidth > preparedAxis.labels.maxWidth
+                    ? preparedAxis.labels.maxWidth
+                    : labelsWidth;
         }
         return preparedAxis;
     }));

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -10,7 +10,8 @@ export const prepareBarYData = async (args) => {
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
+    const yScaleRange = yLinearScale.range();
+    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -40,7 +41,7 @@ export const prepareBarYData = async (args) => {
         const stacks = Object.values(val);
         const currentBarHeight = barSize * stacks.length + barGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
-            const base = xLinearScale(0 - measureValues[0].series.borderWidth);
+            const base = xLinearScale(0) - measureValues[0].series.borderWidth;
             let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
@@ -85,7 +86,7 @@ export const prepareBarYData = async (args) => {
                     height: barSize,
                     color: data.color || s.color,
                     borderColor: s.borderColor,
-                    borderWidth: s.borderWidth,
+                    borderWidth: barSize > s.borderWidth * 2 ? s.borderWidth : 0,
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,

package/dist/cjs/hooks/useSplit/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import get from 'lodash/get';
-import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
+import { calculateNumericProperty, getHorizontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_TOP_BOTTOM_PADDING = 8;
 function preparePlotTitle(args) {
@@ -11,7 +11,7 @@ function preparePlotTitle(args) {
         fontWeight: get(title, 'style.fontWeight'),
     };
     const titleHeight = titleText
-        ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle }) +
+        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) +
             TITLE_TOP_BOTTOM_PADDING * 2
         : 0;
     const top = plotIndex * (plotHeight + gap);

package/dist/cjs/hooks/utils/bar-y.d.ts

@@ -14,7 +14,6 @@ export declare function getBarYLayoutForNumericScale(args: {
     bandSize: number;
     barGap: number;
     barSize: number;
-    dataLength: number;
 };
 export declare function getBarYLayoutForCategoryScale(args: {
     groupedData: ReturnType<typeof groupBarYDataByYValue>;

package/dist/cjs/hooks/utils/bar-y.js

@@ -32,13 +32,14 @@ export function getBarYLayoutForNumericScale(args) {
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-y.barPadding');
     const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
-    const dataLength = Object.values(groupedData).reduce((sum, items) => sum + Object.keys(items).length, 0);
-    const bandSize = plotHeight / dataLength;
+    const groups = Object.values(groupedData);
+    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
+    const bandSize = plotHeight / groups.length;
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const groupSize = bandSize - groupGap;
     const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize - barGap, barMaxWidth));
-    return { bandSize, barGap, barSize, dataLength };
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min((groupSize - barGap) / maxGroupItemCount, barMaxWidth));
+    return { bandSize, barGap, barSize };
 }
 export function getBarYLayoutForCategoryScale(args) {
     const { groupedData, seriesOptions, yScale } = args;

package/dist/cjs/i18n/keysets/en.json

@@ -16,7 +16,9 @@
     "label_axis-plot-band-options-not-equal": "It seems you are trying to use different type for \"{{axis}}\" axis plot band options",
     "label_invalid-tooltip-totals-aggregation-type": "It seems you are trying to use inappropriate data type for \"tooltip.totals.aggregation\". Available types: string, function.",
     "label_invalid-tooltip-totals-aggregation-type-str": "It seems you are trying to use inappropriate value for built-in \"tooltip.totals.aggregation\". Available values: [{{values}}].",
-    "label_invalid-axis-type": "It seems you are trying to use inappropriate type for \"{{key}}\" axis. Available types: [{{values}}]."
+    "label_invalid-axis-type": "It seems you are trying to use inappropriate type for \"{{key}}\" axis. Available types: [{{values}}].",
+    "label_invalid-axis-labels-html-type": "It seems you are trying to use inappropriate type for \"labels.html\" property. Only boolean is allowed.",
+    "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis."
   },
   "tooltip": {
     "label_totals_sum": "Sum"

package/dist/cjs/i18n/keysets/ru.json

@@ -16,7 +16,9 @@
     "label_axis-plot-band-options-not-equal": "Похоже, что вы пытаетесь использовать разные типы для для параметра полосы для оси \"{{axis}}\"",
     "label_invalid-tooltip-totals-aggregation-type": "Похоже, что вы пытаетесь использовать некорректный тип данных для \"tooltip.totals.aggregation\". Доступные типы: string, function.",
     "label_invalid-tooltip-totals-aggregation-type-str": "Похоже, что вы пытаетесь использовать некорректное значение для встроенной агрегации \"tooltip.totals.aggregation\". Доступные значения: [{{values}}].",
-    "label_invalid-axis-type": "Похоже, что вы пытаетесь использовать некорректный тип для оси \"{{key}}\". Доступные типы: [{{values}}]."
+    "label_invalid-axis-type": "Похоже, что вы пытаетесь использовать некорректный тип для оси \"{{key}}\". Доступные типы: [{{values}}].",
+    "label_invalid-axis-labels-html-type": "Похоже, что вы пытаетесь использовать некорректный тип для свойства \"labels.html\". Допускается только использование булевых значений.",
+    "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\"."
   },
   "tooltip": {
     "label_totals_sum": "Сумма"

package/dist/cjs/types/chart/axis.d.ts

@@ -19,12 +19,22 @@ export interface ChartAxisLabels {
     style?: Partial<BaseTextStyle>;
     /** For horizontal axes, enable label rotation to prevent overlapping labels.
      * If there is enough space, labels are not rotated.
-     * As the chart gets narrower, it will start rotating the labels -45 degrees. */
+     * As the chart gets narrower, it will start rotating the labels -45 degrees.
+     *
+     * Does not apply to html labels.
+     */
     autoRotation?: boolean;
     /** Rotation of the labels in degrees.
+     *
+     * Does not apply to html labels.
      * @default 0
      */
     rotation?: number;
+    /**
+     * Allows to use any html-tags to display labels content. Supports only for axis with type "category".
+     * @default false
+     * */
+    html?: boolean;
 }
 export interface ChartAxis {
     categories?: string[];