@gravity-ui/charts 1.0.1 → 1.2.0

package/dist/cjs/validation/index.js

@@ -95,6 +95,148 @@ const validateXYSeries = (args) => {
         }
     });
 };
+const validateAxisPlotValues = (args) => {
+    const { series, xAxis, yAxis = [] } = args;
+    const yAxisIndex = get(series, 'yAxis', 0);
+    const seriesYAxis = yAxis[yAxisIndex];
+    if (yAxisIndex !== 0 && typeof seriesYAxis === 'undefined') {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-y-axis-index', {
+                index: yAxisIndex,
+            }),
+        });
+    }
+    const xPlotBands = get(xAxis, 'plotBands', []);
+    const yPlotBands = get(yAxis, 'plotBands', []);
+    if (!xPlotBands.length && !yPlotBands.length) {
+        return;
+    }
+    const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);
+    const yType = get(seriesYAxis, 'type', DEFAULT_AXIS_TYPE);
+    xPlotBands.forEach(({ from = 0, to = 0 }) => {
+        const fromNotEqualTo = typeof to !== typeof from;
+        if (fromNotEqualTo) {
+            throw new ChartError({
+                code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                message: i18n('error', 'label_axis-plot-band-options-not-equal', {
+                    axis: 'x',
+                    option: 'from',
+                }),
+            });
+        }
+        switch (xType) {
+            case 'category': {
+                const invalidFrom = typeof from !== 'string' && typeof from !== 'number';
+                const invalidTo = typeof to !== 'string' && typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear':
+            case 'datetime': {
+                const invalidFrom = typeof from !== 'number';
+                const invalidTo = typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'x',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+        }
+    });
+    yPlotBands.forEach(({ from = 0, to = 0 }) => {
+        const fromNotEqualTo = typeof to !== typeof from;
+        if (fromNotEqualTo) {
+            throw new ChartError({
+                code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                message: i18n('error', 'label_axis-plot-band-options-not-equal', {
+                    axis: 'x',
+                    option: 'from',
+                }),
+            });
+        }
+        switch (yType) {
+            case 'category': {
+                const invalidFrom = typeof from !== 'string' && typeof from !== 'number';
+                const invalidTo = typeof to !== 'string' && typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear':
+            case 'datetime': {
+                const invalidFrom = typeof from !== 'number';
+                const invalidTo = typeof to !== 'number';
+                if (invalidFrom) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'from',
+                        }),
+                    });
+                }
+                if (invalidTo) {
+                    throw new ChartError({
+                        code: CHART_ERROR_CODE.INVALID_OPTION_TYPE,
+                        message: i18n('error', 'label_invalid-axis-plot-band-option', {
+                            axis: 'y',
+                            option: 'to',
+                        }),
+                    });
+                }
+                break;
+            }
+        }
+    });
+};
 const validatePieSeries = ({ series }) => {
     series.data.forEach(({ value }) => {
         if (typeof value !== 'number') {
@@ -163,12 +305,14 @@ const validateSeries = (args) => {
         case 'area':
         case 'bar-y':
         case 'bar-x': {
+            validateAxisPlotValues({ series, xAxis, yAxis });
             validateXYSeries({ series, xAxis, yAxis });
             validateStacking({ series });
             break;
         }
         case 'line':
         case 'scatter': {
+            validateAxisPlotValues({ series, xAxis, yAxis });
             validateXYSeries({ series, xAxis, yAxis });
             break;
         }

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

@@ -8,6 +8,7 @@ type Props = {
     scale: ChartScale;
     split: PreparedSplit;
     plotRef?: React.MutableRefObject<SVGGElement | null>;
+    leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {
     axis: PreparedAxis;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { line, select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { block, formatAxisTickLabel, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('axis');
@@ -42,12 +42,23 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotRef } = props;
+    const { axis, width, height: totalHeight, scale, split, plotRef, leftmostLimit } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const plotClassName = b('plot-x');
+        let plotContainer = null;
+        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
+            plotContainer = select(plotRef.current);
+            plotContainer.selectAll(`.${plotClassName}`).remove();
+        }
+        if (!axis.visible) {
+            return;
+        }
         let tickItems = [];
         if (axis.grid.enabled) {
             tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
@@ -59,6 +70,7 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         const axisScale = scale;
         const xAxisGenerator = axisBottom({
+            leftmostLimit,
             scale: axisScale,
             ticks: {
                 items: tickItems,
@@ -77,8 +89,6 @@ export const AxisX = React.memo(function AxisX(props) {
                 color: axis.lineColor,
             },
         });
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
         svgElement.call(xAxisGenerator).attr('class', b());
         // add an axis header if necessary
         if (axis.title.text) {
@@ -104,16 +114,51 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
+        // add plot bands
+        if (plotContainer && axis.plotBands.length > 0) {
+            const plotBandClassName = b('plot-x-band');
+            const plotBandsSelection = plotContainer
+                .selectAll(`.${plotBandClassName}-x`)
+                .data(axis.plotBands)
+                .join('g')
+                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
+            plotBandsSelection
+                .append('rect')
+                .attr('x', (band) => {
+                var _a, _b;
+                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                const startPos = halfBandwidth + Math.min(from, to);
+                return Math.max(0, startPos);
+            })
+                .attr('width', (band) => {
+                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                const startPos = width - Math.min(from, to);
+                const endPos = Math.min(Math.abs(to - from), startPos);
+                return Math.min(endPos, width);
+            })
+                .attr('y', 0)
+                .attr('height', totalHeight)
+                .attr('fill', (band) => band.color)
+                .attr('opacity', (band) => band.opacity);
+            plotBandsSelection.each((plotBandData, i, nodes) => {
+                const plotLineSelection = select(nodes[i]);
+                if (plotBandData.layerPlacement === 'before') {
+                    plotLineSelection.lower();
+                }
+                else {
+                    plotLineSelection.raise();
+                }
+            });
+        }
         // add plot lines
-        if (plotRef && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plotLine');
-            const plotLineContainer = select(plotRef.current);
-            plotLineContainer.selectAll(`.${plotLineClassName}-x`).remove();
-            const plotLinesSelection = plotLineContainer
-                .selectAll(`.${plotLineClassName}-x`)
+        if (plotContainer && axis.plotLines.length > 0) {
+            const plotLineClassName = b('plot-x-line');
+            const plotLinesSelection = plotContainer
+                .selectAll(`.${plotLineClassName}`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotLineClassName}-x`);
+                .attr('class', `${plotClassName} ${plotLineClassName}`);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')
@@ -140,6 +185,6 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
-    }, [axis, width, totalHeight, scale, split, plotRef]);
+    }, [axis, width, totalHeight, scale, split, plotRef, leftmostLimit]);
     return React.createElement("g", { ref: ref });
 });

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

@@ -8,6 +8,7 @@ type Props = {
     height: number;
     split: PreparedSplit;
     plotRef?: React.MutableRefObject<SVGGElement | null>;
+    bottomLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
-    const { node, axis } = args;
+    const { node, axis, isTopOffsetOverload = false } = args;
     let topOffset = axis.labels.lineHeight / 2;
+    if (isTopOffsetOverload) {
+        topOffset = 0;
+    }
     let leftOffset = axis.labels.margin;
     if (axis.position === 'left') {
         leftOffset = leftOffset * -1;
@@ -82,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, bottomLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -90,8 +93,15 @@ export const AxisY = (props) => {
         if (!ref.current) {
             return;
         }
+        const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        let plotContainer = null;
+        const plotClassName = b('plot-y');
+        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
+            plotContainer = select(plotRef.current);
+            plotContainer.selectAll(`.${plotClassName}`).remove();
+        }
         const getAxisPosition = (axis) => {
             var _a;
             const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
@@ -108,6 +118,12 @@ export const AxisY = (props) => {
             }
             return acc;
         }, []);
+        const plotBands = axes.reduce((acc, axis) => {
+            if (axis.plotBands.length) {
+                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
@@ -127,8 +143,8 @@ export const AxisY = (props) => {
             });
             yAxisGenerator(axisItem);
             if (d.labels.enabled) {
-                const tickTexts = axisItem
-                    .selectAll('.tick text')
+                const labels = axisItem.selectAll('.tick text');
+                const tickTexts = labels
                     // The offset must be applied before the labels are rotated.
                     // Therefore, we reset the values and make an offset in transform  attribute.
                     // FIXME: give up axisLeft(d3) and switch to our own generation method
@@ -138,6 +154,26 @@ export const AxisY = (props) => {
                     .style('transform', function () {
                     return transformLabel({ node: this, axis: d });
                 });
+                labels.each(function (_d, i) {
+                    if (i === 0) {
+                        const currentElement = this;
+                        const currentElementPosition = currentElement.getBoundingClientRect();
+                        const text = select(currentElement);
+                        if (currentElementPosition.bottom > bottomLimit) {
+                            const transform = transformLabel({
+                                node: this,
+                                axis: d,
+                                isTopOffsetOverload: true,
+                            });
+                            text.style('transform', transform);
+                            if (d.labels.rotation) {
+                                text.attr('text-anchor', () => {
+                                    return d.labels.rotation < 0 ? 'start' : 'end';
+                                });
+                            }
+                        }
+                    }
+                });
                 const textMaxWidth = !d.labels.rotation || Math.abs(d.labels.rotation) % 360 !== 90
                     ? d.labels.maxWidth
                     : (height - d.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
@@ -160,15 +196,50 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
-            if (plotRef && d.plotLines.length > 0) {
-                const plotLineClassName = b('plotLine');
-                const plotLineContainer = select(plotRef.current);
-                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
-                const plotLinesSelection = plotLineContainer
+            if (plotContainer && d.plotBands.length > 0) {
+                const plotBandClassName = b('plot-y-band');
+                const plotBandsSelection = plotContainer
+                    .selectAll(`.${plotBandClassName}`)
+                    .data(plotBands)
+                    .join('g')
+                    .attr('class', `${plotClassName} ${plotBandClassName}`)
+                    .style('transform', (plotBand) => plotBand.transform);
+                plotBandsSelection
+                    .append('rect')
+                    .attr('x', 0)
+                    .attr('width', width)
+                    .attr('y', (band) => {
+                    var _a, _b;
+                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                    const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                    const startPos = halfBandwidth + Math.min(from, to);
+                    return Math.max(0, startPos);
+                })
+                    .attr('height', (band) => {
+                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                    const startPos = height - Math.min(from, to);
+                    const endPos = Math.min(Math.abs(to - from), startPos);
+                    return Math.min(endPos, height);
+                })
+                    .attr('fill', (band) => band.color)
+                    .attr('opacity', (band) => band.opacity);
+                plotBandsSelection.each((plotBandData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotBandData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
+            if (plotContainer && d.plotLines.length > 0) {
+                const plotLineClassName = b('plot-y-line');
+                const plotLinesSelection = plotContainer
                     .selectAll(`.${plotLineClassName}`)
                     .data(plotLines)
                     .join('g')
-                    .attr('class', plotLineClassName)
+                    .attr('class', `${plotClassName} ${plotLineClassName}`)
                     .style('transform', (plotLine) => plotLine.transform);
                 plotLinesSelection
                     .append('path')
@@ -240,6 +311,6 @@ export const AxisY = (props) => {
                 handleOverflowingText(nodes[index], height);
             }
         });
-    }, [axes, width, height, scale, split]);
+    }, [allAxes, width, height, scale, split, bottomLimit]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -17,7 +17,7 @@ export const ChartInner = (props) => {
     const htmlLayerRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current, svgContainer: svgRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -67,9 +67,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, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
+                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {

package/dist/esm/components/ChartInner/styles.css

@@ -1,6 +1,8 @@
 .gcharts-chart {
   --gcharts-data-labels: var(--g-color-text-secondary);
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 .gcharts-chart__html-layer {
   display: contents;

package/dist/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -4,8 +4,11 @@ import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
+    svgContainer: SVGGElement | null;
 };
 export declare function useChartInnerProps(props: Props): {
+    svgBottomPos: number | undefined;
+    svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;

package/dist/esm/components/ChartInner/useChartInnerProps.js

@@ -4,7 +4,8 @@ import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
 export function useChartInnerProps(props) {
-    const { width, height, data, dispatcher, htmlLayout } = props;
+    var _a;
+    const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const { chart, title, tooltip } = useChartOptions({ data });
@@ -54,9 +55,19 @@ export function useChartInnerProps(props) {
         htmlLayout,
     });
     const boundsOffsetTop = chart.margin.top;
-    // We only need to consider the width of the first left axis
-    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    // We need to calculate the width of each axis because the first axis can be hidden
+    const boundsOffsetLeft = chart.margin.left +
+        yAxis.reduce((acc, axis) => {
+            const axisWidth = getYAxisWidth(axis);
+            if (acc < axisWidth) {
+                acc = axisWidth;
+            }
+            return acc;
+        }, 0);
+    const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
+        svgBottomPos: bottom,
+        svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,

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

@@ -185,7 +185,7 @@ export const Legend = (props) => {
                     const mods = { selected: d.visible, unselected: !d.visible };
                     return b('item-text', mods);
                 })
-                    .text(function (d) {
+                    .html(function (d) {
                     return ('name' in d && d.name);
                 })
                     .style('font-size', legend.itemStyle.fontSize);
@@ -283,7 +283,7 @@ export const Legend = (props) => {
                 .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);
+                .html(legend.title.text);
         }
         const { left } = getLegendPosition({
             align: legend.align,

package/dist/esm/components/Title/index.js

@@ -5,5 +5,5 @@ const b = block('title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
     return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
-        React.createElement("tspan", null, text)));
+        React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
 };