@gravity-ui/chartkit 5.15.0 → 5.16.0

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import { line as lineGenerator, select, symbol } from 'd3';
+import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { block } from '../../../../utils/cn';
+import { CONTINUOUS_LEGEND_SIZE } from '../constants';
 import { getLineDashArray } from '../hooks/useShapes/utils';
-import { getSymbol } from '../utils';
+import { createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol } from '../utils';
+import { axisBottom } from '../utils/axis-generators';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
     const { align, offsetWidth, width, contentWidth } = args;
@@ -138,78 +140,139 @@ export const Legend = (props) => {
         setPaginationOffset(0);
     }, [boundsWidth]);
     React.useEffect(() => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (!ref.current) {
             return;
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const limit = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.limit;
-        const pageItems = typeof limit === 'number'
-            ? items.slice(paginationOffset * limit, paginationOffset * limit + limit)
-            : items;
-        pageItems.forEach((line, lineIndex) => {
-            var _a;
-            const legendLine = svgElement.append('g').attr('class', b('line'));
-            const legendItemTemplate = legendLine
-                .selectAll('legend-history')
-                .data(line)
-                .enter()
-                .append('g')
-                .attr('class', b('item'))
-                .on('click', function (e, d) {
-                onItemClick({ name: d.name, metaKey: e.metaKey });
+        let legendWidth = 0;
+        if (legend.type === 'discrete') {
+            const limit = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.limit;
+            const pageItems = typeof limit === 'number'
+                ? items.slice(paginationOffset * limit, paginationOffset * limit + limit)
+                : items;
+            pageItems.forEach((line, lineIndex) => {
+                var _a;
+                const legendLine = svgElement.append('g').attr('class', b('line'));
+                const legendItemTemplate = legendLine
+                    .selectAll('legend-history')
+                    .data(line)
+                    .enter()
+                    .append('g')
+                    .attr('class', b('item'))
+                    .on('click', function (e, d) {
+                    onItemClick({ name: d.name, metaKey: e.metaKey });
+                });
+                const getXPosition = (i) => {
+                    return line.slice(0, i).reduce((acc, legendItem) => {
+                        return (acc +
+                            legendItem.symbol.width +
+                            legendItem.symbol.padding +
+                            legendItem.textWidth +
+                            legend.itemDistance);
+                    }, 0);
+                };
+                renderLegendSymbol({ selection: legendItemTemplate, legend });
+                legendItemTemplate
+                    .append('text')
+                    .attr('x', function (legendItem, i) {
+                    return (getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding);
+                })
+                    .attr('height', legend.lineHeight)
+                    .attr('class', function (d) {
+                    const mods = { selected: d.visible, unselected: !d.visible };
+                    return b('item-text', mods);
+                })
+                    .text(function (d) {
+                    return ('name' in d && d.name);
+                })
+                    .style('font-size', legend.itemStyle.fontSize);
+                const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+                const { left } = getLegendPosition({
+                    align: legend.align,
+                    width: boundsWidth,
+                    offsetWidth: 0,
+                    contentWidth,
+                });
+                const top = legend.lineHeight * lineIndex;
+                legendLine.attr('transform', `translate(${[left, top].join(',')})`);
             });
-            const getXPosition = (i) => {
-                return line.slice(0, i).reduce((acc, legendItem) => {
-                    return (acc +
-                        legendItem.symbol.width +
-                        legendItem.symbol.padding +
-                        legendItem.textWidth +
-                        legend.itemDistance);
-                }, 0);
-            };
-            renderLegendSymbol({ selection: legendItemTemplate, legend });
-            legendItemTemplate
-                .append('text')
-                .attr('x', function (legendItem, i) {
-                return getXPosition(i) + legendItem.symbol.width + legendItem.symbol.padding;
-            })
-                .attr('height', legend.lineHeight)
-                .attr('class', function (d) {
-                const mods = { selected: d.visible, unselected: !d.visible };
-                return b('item-text', mods);
-            })
-                .text(function (d) {
-                return ('name' in d && d.name);
-            })
-                .style('font-size', legend.itemStyle.fontSize);
-            const contentWidth = ((_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-            const { left } = getLegendPosition({
-                align: legend.align,
-                width: boundsWidth,
-                offsetWidth: config.offset.left,
-                contentWidth,
+            legendWidth = boundsWidth;
+            if (config.pagination) {
+                const transform = `translate(${[
+                    0,
+                    legend.lineHeight * config.pagination.limit + legend.lineHeight / 2,
+                ].join(',')})`;
+                appendPaginator({
+                    container: svgElement,
+                    offset: paginationOffset,
+                    maxPage: config.pagination.maxPage,
+                    legend,
+                    transform,
+                    onArrowClick: setPaginationOffset,
+                });
+            }
+        }
+        else {
+            // gradient rect
+            const domain = (_b = legend.colorScale.domain) !== null && _b !== void 0 ? _b : [];
+            const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
+            svgElement.call(createGradientRect, {
+                y: legend.title.height + legend.title.margin,
+                height: rectHeight,
+                width: legend.width,
+                interpolator: getContinuesColorFn({
+                    values: [0, 1],
+                    colors: legend.colorScale.colors,
+                    stops: legend.colorScale.stops,
+                }),
             });
-            const top = config.offset.top + legend.lineHeight * lineIndex;
-            legendLine.attr('transform', `translate(${[left, top].join(',')})`);
-        });
-        if (config.pagination) {
-            const transform = `translate(${[
-                config.offset.left,
-                config.offset.top +
-                    legend.lineHeight * config.pagination.limit +
-                    legend.lineHeight / 2,
-            ].join(',')})`;
-            appendPaginator({
-                container: svgElement,
-                offset: paginationOffset,
-                maxPage: config.pagination.maxPage,
-                legend,
-                transform,
-                onArrowClick: setPaginationOffset,
+            // ticks
+            const xAxisGenerator = axisBottom({
+                scale: scaleLinear(domain, [0, legend.width]),
+                ticks: {
+                    items: [[0, -rectHeight]],
+                    labelsMargin: legend.ticks.labelsMargin,
+                    labelsLineHeight: legend.ticks.labelsLineHeight,
+                    maxTickCount: 4,
+                    tickColor: '#fff',
+                },
+                domain: {
+                    size: legend.width,
+                    color: 'transparent',
+                },
             });
+            const tickTop = legend.title.height + legend.title.margin + rectHeight;
+            svgElement
+                .append('g')
+                .attr('transform', `translate(0, ${tickTop})`)
+                .call(xAxisGenerator);
+            legendWidth = legend.width;
         }
+        if (legend.title.enable) {
+            const { maxWidth: labelWidth } = getLabelsSize({
+                labels: [legend.title.text],
+                style: legend.title.style,
+            });
+            svgElement
+                .append('g')
+                .attr('class', b('title'))
+                .append('text')
+                .attr('dx', legend.width / 2 - labelWidth / 2)
+                .attr('font-weight', (_c = legend.title.style.fontWeight) !== null && _c !== void 0 ? _c : null)
+                .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
+                .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
+                .style('alignment-baseline', 'before-edge')
+                .text(legend.title.text);
+        }
+        const { left } = getLegendPosition({
+            align: legend.align,
+            width: boundsWidth,
+            offsetWidth: config.offset.left,
+            contentWidth: legendWidth,
+        });
+        svgElement.attr('transform', `translate(${[left, config.offset.top].join(',')})`);
     }, [boundsWidth, chartSeries, onItemClick, legend, items, config, paginationOffset]);
-    return React.createElement("g", { ref: ref, width: boundsWidth, height: legend.height });
+    return React.createElement("g", { className: b(), ref: ref, width: boundsWidth, height: legend.height });
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -32,6 +32,14 @@
   alignment-baseline: after-edge;
 }
 
+.chartkit-d3-legend {
+  color: var(--g-color-text-secondary);
+}
+
+.chartkit-d3-legend__title {
+  fill: var(--g-color-text-secondary);
+}
+
 .chartkit-d3-legend__item {
   cursor: pointer;
   user-select: none;

package/build/plugins/d3/renderer/constants/defaults/legend.d.ts

@@ -1,4 +1,12 @@
-import type { ChartKitWidgetLegend } from '../../../../../types';
-type LegendDefaults = Required<Omit<ChartKitWidgetLegend, 'enabled'>> & Pick<ChartKitWidgetLegend, 'enabled'>;
-export declare const legendDefaults: LegendDefaults;
-export {};
+export declare const legendDefaults: {
+    align: "left" | "center" | "right";
+    itemDistance: number;
+    margin: number;
+    itemStyle: {
+        fontSize: string;
+    };
+};
+export declare const CONTINUOUS_LEGEND_SIZE: {
+    height: number;
+    width: number;
+};

package/build/plugins/d3/renderer/constants/defaults/legend.js

@@ -6,3 +6,7 @@ export const legendDefaults = {
         fontSize: '12px',
     },
 };
+export const CONTINUOUS_LEGEND_SIZE = {
+    height: 12,
+    width: 200,
+};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-area.js

@@ -52,6 +52,7 @@ export function prepareArea(args) {
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
+                html: get(series, 'dataLabels.html', false),
             },
             marker: prepareMarker(series, seriesOptions),
             cursor: get(series, 'cursor', null),

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-x.js

@@ -29,6 +29,7 @@ export function prepareBarXSeries(args) {
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
                 allowOverlap: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.allowOverlap) || false,
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                html: get(series, 'dataLabels.html', false),
             },
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.js

@@ -7,12 +7,13 @@ function prepareDataLabels(series) {
     var _a;
     const enabled = get(series, 'dataLabels.enabled', false);
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
-    const { maxHeight = 0, maxWidth = 0 } = enabled
-        ? getLabelsSize({
-            labels: series.data.map((d) => String(d.label || d.x)),
-            style,
-        })
-        : {};
+    const html = get(series, 'dataLabels.html', false);
+    const labels = enabled ? series.data.map((d) => String(d.label || d.x)) : [];
+    const { maxHeight = 0, maxWidth = 0 } = getLabelsSize({
+        labels,
+        style,
+        html,
+    });
     const inside = series.stacking === 'percent' ? true : get(series, 'dataLabels.inside', false);
     return {
         enabled,
@@ -20,6 +21,7 @@ function prepareDataLabels(series) {
         style,
         maxHeight,
         maxWidth,
+        html,
     };
 }
 export function prepareBarYSeries(args) {

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.js

@@ -2,18 +2,52 @@ import { select } from 'd3';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { legendDefaults } from '../../constants';
-import { getHorisontalSvgTextHeight } from '../../utils';
+import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
+import { getDefaultColorStops, getDomainForContinuousColorScale, getHorisontalSvgTextHeight, getLabelsSize, } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
 import { getYAxisWidth } from '../useChartDimensions/utils';
 export const getPreparedLegend = (args) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
     const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);
     const lineHeight = getHorisontalSvgTextHeight({ text: 'Tmp', style: computedItemStyle });
-    const height = enabled ? lineHeight : 0;
+    const legendType = get(legend, 'type', 'discrete');
+    const isTitleEnabled = Boolean((_a = legend === null || legend === void 0 ? void 0 : legend.title) === null || _a === void 0 ? void 0 : _a.text);
+    const titleMargin = isTitleEnabled ? get(legend, 'title.margin', 4) : 0;
+    const titleStyle = Object.assign({ fontSize: '12px', fontWeight: 'bold' }, get(legend, 'title.style'));
+    const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
+    const titleHeight = isTitleEnabled
+        ? getLabelsSize({ labels: [titleText], style: titleStyle }).maxHeight
+        : 0;
+    const ticks = {
+        labelsMargin: 4,
+        labelsLineHeight: 12,
+    };
+    const colorScale = {
+        colors: [],
+        domain: [],
+        stops: [],
+    };
+    let height = 0;
+    if (enabled) {
+        height += titleHeight + titleMargin;
+        if (legendType === 'continuous') {
+            height += CONTINUOUS_LEGEND_SIZE.height;
+            height += ticks.labelsLineHeight + ticks.labelsMargin;
+            colorScale.colors = (_c = (_b = legend === null || legend === void 0 ? void 0 : legend.colorScale) === null || _b === void 0 ? void 0 : _b.colors) !== null && _c !== void 0 ? _c : [];
+            colorScale.stops =
+                (_e = (_d = legend === null || legend === void 0 ? void 0 : legend.colorScale) === null || _d === void 0 ? void 0 : _d.stops) !== null && _e !== void 0 ? _e : getDefaultColorStops(colorScale.colors.length);
+            colorScale.domain =
+                (_g = (_f = legend === null || legend === void 0 ? void 0 : legend.colorScale) === null || _f === void 0 ? void 0 : _f.domain) !== null && _g !== void 0 ? _g : getDomainForContinuousColorScale({ series });
+        }
+        else {
+            height += lineHeight;
+        }
+    }
+    const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
     return {
         align: get(legend, 'align', legendDefaults.align),
         enabled,
@@ -22,6 +56,17 @@ export const getPreparedLegend = (args) => {
         itemStyle: computedItemStyle,
         lineHeight,
         margin: get(legend, 'margin', legendDefaults.margin),
+        type: legendType,
+        title: {
+            enable: isTitleEnabled,
+            text: titleText,
+            margin: titleMargin,
+            style: titleStyle,
+            height: titleHeight,
+        },
+        width: legendWidth,
+        ticks,
+        colorScale,
     };
 };
 const getFlattenLegendItems = (series) => {
@@ -78,16 +123,18 @@ export const getLegendComponents = (args) => {
         items: flattenLegendItems,
         preparedLegend,
     });
-    let legendHeight = preparedLegend.lineHeight * items.length;
     let pagination;
-    if (maxLegendHeight < legendHeight) {
-        // extra line for paginator
-        const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
-        const maxPage = Math.ceil(items.length / limit);
-        pagination = { limit, maxPage };
-        legendHeight = maxLegendHeight;
+    if (preparedLegend.type === 'discrete') {
+        let legendHeight = preparedLegend.lineHeight * items.length;
+        if (maxLegendHeight < legendHeight) {
+            // extra line for paginator
+            const limit = Math.floor(maxLegendHeight / preparedLegend.lineHeight) - 1;
+            const maxPage = Math.ceil(items.length / limit);
+            pagination = { limit, maxPage };
+            legendHeight = maxLegendHeight;
+        }
+        preparedLegend.height = legendHeight;
     }
-    preparedLegend.height = legendHeight;
     const top = chartHeight - chartMargin.bottom - preparedLegend.height;
     const offset = {
         left: chartMargin.left + getYAxisWidth(preparedYAxis[0]),

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line.js

@@ -68,6 +68,7 @@ export function prepareLineSeries(args) {
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
+                html: get(series, 'dataLabels.html', false),
             },
             marker: prepareMarker(series, seriesOptions),
             dashStyle: dashStyle,

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

@@ -18,6 +18,7 @@ export function prepareTreemap(args) {
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = s.dataLabels) === null || _a === void 0 ? void 0 : _a.style),
                 padding: get(s, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(s, 'dataLabels.allowOverlap', false),
+                html: get(series, 'dataLabels.html', false),
             },
             id,
             type: s.type,

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

@@ -28,6 +28,7 @@ export function prepareWaterfallSeries(args) {
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
                 allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                html: get(series, 'dataLabels.html', false),
             },
             cursor: get(series, 'cursor', null),
         };

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -13,9 +13,25 @@ export type SymbolLegendSymbol = {
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
 export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
-export type PreparedLegend = Required<ChartKitWidgetLegend> & {
+export type PreparedLegend = Required<Omit<ChartKitWidgetLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;
+    title: {
+        enable: boolean;
+        text: string;
+        margin: number;
+        style: BaseTextStyle;
+        height: number;
+    };
+    ticks: {
+        labelsMargin: number;
+        labelsLineHeight: number;
+    };
+    colorScale: {
+        colors: string[];
+        domain: number[];
+        stops: number[];
+    };
 };
 export type OnLegendItemClick = (data: {
     name: string;
@@ -89,6 +105,7 @@ export type PreparedBarXSeries = {
         style: BaseTextStyle;
         allowOverlap: boolean;
         padding: number;
+        html: boolean;
     };
     yAxis: number;
 } & BasePreparedSeries;
@@ -103,6 +120,7 @@ export type PreparedBarYSeries = {
         style: BaseTextStyle;
         maxHeight: number;
         maxWidth: number;
+        html: boolean;
     };
 } & BasePreparedSeries;
 export type PreparedPieSeries = {
@@ -145,6 +163,7 @@ export type PreparedLineSeries = {
         style: BaseTextStyle;
         padding: number;
         allowOverlap: boolean;
+        html: boolean;
     };
     marker: {
         states: {
@@ -181,6 +200,7 @@ export type PreparedAreaSeries = {
         style: BaseTextStyle;
         padding: number;
         allowOverlap: boolean;
+        html: boolean;
     };
     marker: {
         states: {
@@ -210,6 +230,7 @@ export type PreparedTreemapSeries = {
         style: BaseTextStyle;
         padding: number;
         allowOverlap: boolean;
+        html: boolean;
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
@@ -221,6 +242,7 @@ export type PreparedWaterfallSeries = {
         style: BaseTextStyle;
         allowOverlap: boolean;
         padding: number;
+        html: boolean;
     };
     positiveColor: string;
     negativeColor: string;

package/build/plugins/d3/renderer/hooks/useShapes/HtmlLayer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ShapeDataWithHtmlItems } from '../../types';
+type Props = {
+    htmlLayout: HTMLElement | null;
+    preparedData: ShapeDataWithHtmlItems | ShapeDataWithHtmlItems[];
+};
+export declare const HtmlLayer: (props: Props) => React.JSX.Element | null;
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/HtmlLayer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Portal } from '@gravity-ui/uikit';
+export const HtmlLayer = (props) => {
+    const { htmlLayout, preparedData } = props;
+    const items = React.useMemo(() => {
+        if (Array.isArray(preparedData)) {
+            return preparedData.reduce((result, d) => {
+                result.push(...d.htmlElements);
+                return result;
+            }, []);
+        }
+        else {
+            return preparedData.htmlElements;
+        }
+    }, [preparedData]);
+    if (!htmlLayout) {
+        return null;
+    }
+    return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
+        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: { position: 'absolute', left: item.x, top: item.y } }));
+    })));
+};

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

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

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

@@ -3,11 +3,12 @@ import { area as areaGenerator, color, line as lineGenerator, select } from 'd3'
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('d3-area');
 export const AreaSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         var _a;
@@ -137,5 +138,7 @@ export const AreaSeriesShapes = (args) => {
             dispatcher.on('hover-shape.area', 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/area/prepare-data.js

@@ -4,7 +4,7 @@ import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
     const style = series.dataLabels.style;
-    const size = getLabelsSize({ labels: [text], style });
+    const size = getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
     const labelData = {
         text,
         x: point.x,
@@ -22,7 +22,7 @@ function getLabelData(point, series, xMax) {
     else {
         const right = left + labelData.size.width;
         if (right > xMax) {
-            labelData.x = labelData.x - xMax - right;
+            labelData.x = labelData.x - (right - xMax);
         }
     }
     return labelData;
@@ -97,8 +97,22 @@ export const prepareAreaData = (args) => {
                 return pointsAcc;
             }, []);
             let labels = [];
+            const htmlElements = [];
             if (s.dataLabels.enabled) {
-                labels = points.map((p) => getLabelData(p, s, xMax));
+                const labelItems = points.map((p) => getLabelData(p, s, xMax));
+                if (s.dataLabels.html) {
+                    const htmlLabels = labelItems.map((l) => {
+                        return {
+                            x: l.x - l.size.width / 2,
+                            y: l.y,
+                            content: l.text,
+                        };
+                    });
+                    htmlElements.push(...htmlLabels);
+                }
+                else {
+                    labels = labelItems;
+                }
             }
             let markers = [];
             if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
@@ -119,6 +133,7 @@ export const prepareAreaData = (args) => {
                 hovered: false,
                 active: true,
                 id: s.id,
+                htmlElements,
             });
             return acc;
         }, []);

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

@@ -1,5 +1,5 @@
 import { AreaSeriesData } from '../../../../../../types';
-import { LabelData } from '../../../types';
+import { HtmlItem, LabelData } from '../../../types';
 import { PreparedAreaSeries } from '../../useSeries/types';
 export type PointData = {
     y0: number;
@@ -24,4 +24,5 @@ export type PreparedAreaData = {
     hovered: boolean;
     active: boolean;
     labels: LabelData[];
+    htmlElements: HtmlItem[];
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/index.d.ts

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