@gravity-ui/charts 1.1.0 → 1.3.0

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

@@ -75,12 +75,27 @@ export interface ChartAxis {
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
+    /** An array of colored bands stretching across the plot area marking an interval on the axis. */
+    plotBands?: AxisPlotBand[];
     /** Whether axis, including axis title, line, ticks and labels, should be visible. */
     visible?: boolean;
 }
 export interface ChartXAxis extends ChartAxis {
 }
-export interface AxisPlotLine {
+export type PlotLayerPlacement = 'before' | 'after';
+export interface AxisPlot {
+    /** Place the line behind or above the chart. */
+    layerPlacement?: PlotLayerPlacement;
+    /** The color of the plot line (hex, rgba). */
+    color?: string;
+    /**
+     * Individual opacity for the line.
+     *
+     * @default 1
+     * */
+    opacity?: number;
+}
+export interface AxisPlotLine extends AxisPlot {
     /** The position of the line in axis units. */
     value?: number;
     /** The color of the plot line (hex, rgba). */
@@ -92,14 +107,22 @@ export interface AxisPlotLine {
     width?: number;
     /** Option for line stroke style. */
     dashStyle?: `${DashStyle}`;
+}
+export interface AxisPlotBand extends AxisPlot {
     /**
-     * Individual opacity for the line.
+     * The start position of the plot band in axis units.
      *
-     * @default 1
-     * */
-    opacity?: number;
-    /** Place the line behind or above the chart. */
-    layerPlacement?: 'before' | 'after';
+     * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    from: number | string;
+    /**
+     * The end position of the plot band in axis units.
+     *
+     * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    to: number | string;
 }
 export interface ChartYAxis extends ChartAxis {
     /** Axis location.

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

@@ -15,6 +15,12 @@ export interface ChartLegend {
      * @default center
      * */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Defines how items should be positioned in the legend when overflowing (moving to the next line).
+     *
+     * @default center
+     * */
+    justifyContent?: 'start' | 'center';
     /**
      * Defines the pixel distance between each legend item
      *

package/dist/cjs/types/chart-ui.d.ts

@@ -22,6 +22,7 @@ export interface HtmlItem {
         width: number;
         height: number;
     };
+    style?: BaseTextStyle;
 }
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];

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

@@ -1,6 +1,7 @@
 import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
-import type { PreparedAxis, PreparedSplit } from '../../hooks';
+import type { PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../hooks';
 import type { TextRow } from './text';
+import type { AxisDirection } from './types';
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;
@@ -29,3 +30,13 @@ export declare function getAxisTitleRows(args: {
     axis: PreparedAxis;
     textMaxWidth: number;
 }): TextRow[];
+interface GetBandsPositionArgs {
+    band: PreparedAxisPlotBand;
+    axisScale: AxisScale<AxisDomain>;
+    axis: AxisDirection;
+}
+export declare function getBandsPosition(args: GetBandsPositionArgs): {
+    from: number;
+    to: number;
+};
+export {};

package/dist/cjs/utils/chart/axis.js

@@ -1,3 +1,4 @@
+import clamp from 'lodash/clamp';
 import { wrapText } from './text';
 export function getTicksCount({ axis, range }) {
     let ticksCount;
@@ -69,3 +70,37 @@ export function getAxisTitleRows(args) {
         return acc;
     }, []);
 }
+export function getBandsPosition(args) {
+    var _a, _b, _c;
+    const { band, axisScale } = args;
+    const scalePosTo = axisScale(band.to);
+    const scalePosFrom = axisScale(band.from);
+    const isX = args.axis === 'x';
+    if (scalePosTo !== undefined && scalePosFrom !== undefined) {
+        return {
+            from: Math.max(scalePosFrom, 0),
+            to: Math.max(scalePosTo, 0),
+        };
+    }
+    if (typeof band.from !== 'number' || typeof band.to !== 'number') {
+        throw new Error('Filed to create plot band');
+    }
+    const category = axisScale.domain();
+    const bandwidth = (_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 1;
+    const halfBandwidth = bandwidth / 2;
+    const calcPosition = (value) => {
+        var _a, _b;
+        if (value >= category.length) {
+            return ((_a = axisScale(category[category.length - 1])) !== null && _a !== void 0 ? _a : 0) + halfBandwidth * (isX ? 1 : -1);
+        }
+        return (((_b = axisScale(category[clamp(Math.floor(value), 0, category.length - 1)])) !== null && _b !== void 0 ? _b : 0) +
+            bandwidth * (value - Math.floor(Math.abs(value))) * (isX ? 1 : -1));
+    };
+    const to = calcPosition(band.to);
+    const from = calcPosition(band.from);
+    const maxPos = ((_c = axisScale(category[isX ? category.length - 1 : 0])) !== null && _c !== void 0 ? _c : 0) + halfBandwidth;
+    return {
+        from: clamp(from, -halfBandwidth, maxPos),
+        to: clamp(to, -halfBandwidth, maxPos),
+    };
+}

package/dist/cjs/utils/chart/index.d.ts

@@ -1,6 +1,7 @@
 import type { AxisDomain } from 'd3';
 import type { PreparedAxis } from '../../hooks';
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
+import type { AxisDirection } from './types';
 export * from './math';
 export * from './text';
 export * from './time';
@@ -12,7 +13,6 @@ export * from './series';
 export * from './color';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
-export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartSeries['type'];
     data: unknown;
@@ -76,3 +76,4 @@ export declare const getDataCategoryValue: (args: {
     data: ChartSeriesData;
 }) => string;
 export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
+export { AxisDirection };

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

@@ -0,0 +1 @@
+export type AxisDirection = 'x' | 'y';

package/dist/cjs/utils/chart/types.js

@@ -0,0 +1 @@
+export {};

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.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');
@@ -114,14 +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 (plotContainer && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plotLine');
+            const plotLineClassName = b('plot-x-line');
             const plotLinesSelection = plotContainer
-                .selectAll(`.${plotLineClassName}-x`)
+                .selectAll(`.${plotLineClassName}`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotClassName} ${plotLineClassName}-x`);
+                .attr('class', `${plotClassName} ${plotLineClassName}`);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')
@@ -148,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,7 +8,7 @@ type Props = {
     height: number;
     split: PreparedSplit;
     plotRef?: React.MutableRefObject<SVGGElement | null>;
-    lowerLimit?: number;
+    bottomLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 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) {
@@ -85,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, lowerLimit = 0, } = 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();
@@ -118,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)
@@ -153,7 +159,7 @@ export const AxisY = (props) => {
                         const currentElement = this;
                         const currentElementPosition = currentElement.getBoundingClientRect();
                         const text = select(currentElement);
-                        if (currentElementPosition.bottom > lowerLimit) {
+                        if (currentElementPosition.bottom > bottomLimit) {
                             const transform = transformLabel({
                                 node: this,
                                 axis: d,
@@ -190,8 +196,45 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
+            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('plotLine');
+                const plotLineClassName = b('plot-y-line');
                 const plotLinesSelection = plotContainer
                     .selectAll(`.${plotLineClassName}`)
                     .data(plotLines)
@@ -268,6 +311,6 @@ export const AxisY = (props) => {
                 handleOverflowingText(nodes[index], height);
             }
         });
-    }, [allAxes, 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

@@ -67,7 +67,7 @@ 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, { lowerLimit: svgBottomPos, 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, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),

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.js

@@ -58,9 +58,9 @@ export function useChartInnerProps(props) {
     // 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 width = getYAxisWidth(axis);
-            if (acc < width) {
-                acc = width;
+            const axisWidth = getYAxisWidth(axis);
+            if (acc < axisWidth) {
+                acc = axisWidth;
             }
             return acc;
         }, 0);

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

@@ -114,6 +114,7 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const y = legend.lineHeight / 2;
+                const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => {
@@ -123,7 +124,7 @@ function renderLegendSymbol(args) {
                     return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
                 })
                     .attr('transform', () => {
-                    return 'translate(' + x + ',' + y + ')';
+                    return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
                     .style('fill', color);
@@ -185,21 +186,32 @@ 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);
                 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,
-                });
+                let left = 0;
+                switch (legend.justifyContent) {
+                    case 'center': {
+                        const legendLinePostion = getLegendPosition({
+                            align: legend.align,
+                            width: boundsWidth,
+                            offsetWidth: 0,
+                            contentWidth,
+                        });
+                        left = legendLinePostion.left;
+                        legendWidth = boundsWidth;
+                        break;
+                    }
+                    case 'start': {
+                        legendWidth = Math.max(legendWidth, contentWidth);
+                        break;
+                    }
+                }
                 const top = legend.lineHeight * lineIndex;
                 legendLine.attr('transform', `translate(${[left, top].join(',')})`);
             });
-            legendWidth = boundsWidth;
             if (config.pagination) {
                 const transform = `translate(${[
                     0,
@@ -283,7 +295,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 } })));
 };

package/dist/esm/constants/defaults/legend.d.ts

@@ -1,6 +1,7 @@
 import type { ChartLegend } from '../../types';
 export declare const legendDefaults: {
     align: Required<ChartLegend>["align"];
+    justifyContent: Required<ChartLegend>["justifyContent"];
     itemDistance: number;
     margin: number;
     itemStyle: {

package/dist/esm/constants/defaults/legend.js

@@ -1,5 +1,6 @@
 export const legendDefaults = {
     align: 'center',
+    justifyContent: 'center',
     itemDistance: 20,
     margin: 15,
     itemStyle: {