@gravity-ui/charts 0.10.0 → 0.11.1

package/README.md

@@ -1,4 +1,4 @@
-# Gravity Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
+# Gravity UI Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
 ## Install
 

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -5,5 +5,6 @@ export interface ChartTooltipContentProps {
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
+    valueFormat?: ChartTooltip['valueFormat'];
 }
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -2,10 +2,10 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultContent } from './DefaultContent';
 export const ChartTooltipContent = (props) => {
-    const { hovered, xAxis, yAxis, renderer } = props;
+    const { hovered, xAxis, yAxis, renderer, valueFormat } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({ hovered, xAxis, yAxis });
-    return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+    return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, valueFormat: valueFormat })) : (customTooltip);
 };

package/dist/cjs/components/Tooltip/DefaultContent.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
+import type { ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../types';
 type Props = {
     hovered: TooltipDataChunk[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
+    valueFormat?: ValueFormat;
 };
-export declare const DefaultContent: ({ hovered, xAxis, yAxis }: Props) => React.JSX.Element;
+export declare const DefaultContent: ({ hovered, xAxis, yAxis, valueFormat }: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -3,6 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
 import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
+import { getFormattedValue } from '../../utils/chart/format';
 const b = block('tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, data, axis) => {
@@ -40,7 +41,7 @@ const getMeasureValue = (data, xAxis, yAxis) => {
     }
     return getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis);
 };
-export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
+export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
@@ -54,17 +55,29 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                 case 'line':
                 case 'area':
                 case 'bar-x': {
+                    const formattedValue = getFormattedValue({
+                        value: getYRowData(data, yAxis),
+                        format: valueFormat,
+                    });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
                         ": ",
-                        getYRowData(data, yAxis)));
+                        formattedValue));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
                 }
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
-                    const subTotal = getWaterfallPointSubtotal(data, series);
+                    const subTotalValue = getWaterfallPointSubtotal(data, series);
+                    const subTotal = getFormattedValue({
+                        value: subTotalValue,
+                        format: valueFormat,
+                    });
+                    const formattedValue = getFormattedValue({
+                        value: getYRowData(data, yAxis),
+                        format: valueFormat,
+                    });
                     return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
                         !isTotal && (React.createElement(React.Fragment, null,
                             React.createElement("div", { key: id, className: b('content-row') },
@@ -73,17 +86,21 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                                 React.createElement("span", null,
                                     series.name,
                                     "\u00A0"),
-                                React.createElement("span", null, getYRowData(data, yAxis))))),
+                                React.createElement("span", null, formattedValue)))),
                         React.createElement("div", { key: id, className: b('content-row') },
                             isTotal ? 'Total' : 'Subtotal',
                             ": ",
                             subTotal)));
                 }
                 case 'bar-y': {
+                    const formattedValue = getFormattedValue({
+                        value: getXRowData(data, xAxis),
+                        format: valueFormat,
+                    });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
                         ": ",
-                        getXRowData(data, xAxis)));
+                        formattedValue));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
@@ -91,16 +108,24 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                 case 'pie':
                 case 'treemap': {
                     const seriesData = data;
+                    const formattedValue = getFormattedValue({
+                        value: seriesData.value,
+                        format: valueFormat,
+                    });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("span", null,
                             seriesData.name || seriesData.id,
                             "\u00A0"),
-                        React.createElement("span", null, seriesData.value)));
+                        React.createElement("span", null, formattedValue)));
                 }
                 case 'sankey': {
                     const { target, data: source } = seriesItem;
                     const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+                    const formattedValue = getFormattedValue({
+                        value,
+                        format: valueFormat,
+                    });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
                         React.createElement("div", { style: { display: 'flex', gap: 8, verticalAlign: 'center' } },
@@ -110,16 +135,20 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             " ", target === null || target === void 0 ? void 0 :
                             target.name,
                             ": ",
-                            value)));
+                            formattedValue)));
                 }
                 case 'radar': {
                     const radarSeries = series;
                     const seriesData = data;
+                    const formattedValue = getFormattedValue({
+                        value: seriesData.value,
+                        format: valueFormat,
+                    });
                     const value = (React.createElement(React.Fragment, null,
                         React.createElement("span", null,
                             radarSeries.name || radarSeries.id,
                             "\u00A0"),
-                        React.createElement("span", null, seriesData.value)));
+                        React.createElement("span", null, formattedValue)));
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));

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

@@ -23,5 +23,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat })))) : null;
 };

package/dist/cjs/hooks/useSeries/prepare-area.js

@@ -28,7 +28,7 @@ export function prepareArea(args) {
     const defaultAreaWidth = get(seriesOptions, 'area.lineWidth', DEFAULT_LINE_WIDTH);
     const defaultOpacity = get(seriesOptions, 'area.opacity', 0.75);
     return seriesList.map((series) => {
-        var _a, _b;
+        var _a, _b, _c;
         const id = getUniqId();
         const name = series.name || '';
         const color = series.color || colorScale(name);
@@ -53,6 +53,7 @@ export function prepareArea(args) {
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
                 html: get(series, 'dataLabels.html', false),
+                format: (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.format,
             },
             marker: prepareMarker(series, seriesOptions),
             cursor: get(series, 'cursor', null),

package/dist/cjs/hooks/useSeries/prepare-bar-x.js

@@ -5,7 +5,7 @@ import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -30,6 +30,7 @@ export function prepareBarXSeries(args) {
                 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),
+                format: (_f = series.dataLabels) === null || _f === void 0 ? void 0 : _f.format,
             },
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -1,13 +1,16 @@
 import get from 'lodash/get';
 import { getLabelsSize, getUniqId } from '../../utils';
+import { getFormattedValue } from '../../utils/chart/format';
 import { DEFAULT_DATALABELS_STYLE } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 function prepareDataLabels(series) {
-    var _a;
+    var _a, _b;
     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 html = get(series, 'dataLabels.html', false);
-    const labels = enabled ? series.data.map((d) => String(d.label || d.x)) : [];
+    const labels = enabled
+        ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.x || d.label }, series.dataLabels)))
+        : [];
     const { maxHeight = 0, maxWidth = 0 } = getLabelsSize({
         labels,
         style,
@@ -21,6 +24,7 @@ function prepareDataLabels(series) {
         maxHeight,
         maxWidth,
         html,
+        format: (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
     };
 }
 export function prepareBarYSeries(args) {
@@ -39,7 +43,7 @@ export function prepareBarYSeries(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: series.data,
+            data: series.data.filter((d) => d.x !== null),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),

package/dist/cjs/hooks/useSeries/prepare-line.js

@@ -46,7 +46,7 @@ export function prepareLineSeries(args) {
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
     const defaultDashStyle = get(seriesOptions, 'line.dashStyle', DEFAULT_DASH_STYLE);
     return seriesList.map((series) => {
-        var _a, _b;
+        var _a, _b, _c;
         const id = getUniqId();
         const name = series.name || '';
         const color = series.color || colorScale(name);
@@ -69,6 +69,7 @@ export function prepareLineSeries(args) {
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
                 html: get(series, 'dataLabels.html', false),
+                format: (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.format,
             },
             marker: prepareMarker(series, seriesOptions),
             dashStyle: dashStyle,

package/dist/cjs/hooks/useSeries/prepare-pie.js

@@ -11,7 +11,7 @@ export function preparePieSeries(args) {
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem, i) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const result = {
             type: 'pie',
             data: dataItem,
@@ -25,6 +25,7 @@ export function preparePieSeries(args) {
                 distance: get(series, 'dataLabels.distance', 25),
                 connectorCurve: get(series, 'dataLabels.connectorCurve', 'basic'),
                 html: get(series, 'dataLabels.html', false),
+                format: (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
             },
             label: dataItem.label,
             value: dataItem.value,
@@ -38,9 +39,9 @@ export function preparePieSeries(args) {
             },
             center: series.center || ['50%', '50%'],
             borderColor: series.borderColor || '',
-            borderRadius: (_b = series.borderRadius) !== null && _b !== void 0 ? _b : 0,
-            borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
-            radius: (_e = (_d = dataItem.radius) !== null && _d !== void 0 ? _d : series.radius) !== null && _e !== void 0 ? _e : '100%',
+            borderRadius: (_c = series.borderRadius) !== null && _c !== void 0 ? _c : 0,
+            borderWidth: (_d = series.borderWidth) !== null && _d !== void 0 ? _d : 1,
+            radius: (_f = (_e = dataItem.radius) !== null && _e !== void 0 ? _e : series.radius) !== null && _f !== void 0 ? _f : '100%',
             innerRadius: series.innerRadius || 0,
             stackId,
             states: {

package/dist/cjs/hooks/useSeries/prepare-radar.js

@@ -30,7 +30,7 @@ export function prepareRadarSeries(args) {
     const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), DEFAULT_PALETTE);
     const categories = (_b = (_a = radarSeries.find((s) => s.categories)) === null || _a === void 0 ? void 0 : _a.categories) !== null && _b !== void 0 ? _b : [];
     return radarSeries.map((series, index) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const name = (_a = series.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`;
         const color = (_b = series.color) !== null && _b !== void 0 ? _b : colorScale(name);
         const preparedSeries = {
@@ -54,6 +54,7 @@ export function prepareRadarSeries(args) {
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
                 html: get(series, 'dataLabels.html', false),
+                format: (_f = series.dataLabels) === null || _f === void 0 ? void 0 : _f.format,
             },
             cursor: get(series, 'cursor', null),
             marker: prepareMarker(series, seriesOptions),

package/dist/cjs/hooks/useSeries/prepare-sankey.js

@@ -5,7 +5,7 @@ import { prepareLegendSymbol } from './utils';
 export function prepareSankeySeries(args) {
     const { colorScale, legend, series } = args;
     return series.map((s) => {
-        var _a;
+        var _a, _b;
         const id = getUniqId();
         const name = s.name || '';
         const color = colorScale(name);
@@ -22,6 +22,7 @@ export function prepareSankeySeries(args) {
             dataLabels: {
                 enabled: get(s, 'dataLabels.enabled', true),
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = s.dataLabels) === null || _a === void 0 ? void 0 : _a.style),
+                format: (_b = s.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
             },
             id,
             type: s.type,

package/dist/cjs/hooks/useSeries/prepare-treemap.js

@@ -6,7 +6,7 @@ import { prepareLegendSymbol } from './utils';
 export function prepareTreemap(args) {
     const { colorScale, legend, series } = args;
     return series.map((s) => {
-        var _a;
+        var _a, _b;
         const id = getUniqId();
         const name = s.name || '';
         const color = s.color || colorScale(name);
@@ -20,6 +20,7 @@ export function prepareTreemap(args) {
                 allowOverlap: get(s, 'dataLabels.allowOverlap', false),
                 html: get(s, 'dataLabels.html', false),
                 align: get(s, 'dataLabels.align', 'left'),
+                format: (_b = s.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
             },
             id,
             type: s.type,

package/dist/cjs/hooks/useSeries/prepare-waterfall.js

@@ -7,7 +7,7 @@ export function prepareWaterfallSeries(args) {
     const { colorScale, series: seriesList, legend } = args;
     const [, negativeColor, positiveColor] = DEFAULT_PALETTE;
     return seriesList.map((series) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         const prepared = {
@@ -29,6 +29,7 @@ export function prepareWaterfallSeries(args) {
                 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),
+                format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
             },
             cursor: get(series, 'cursor', null),
         };

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

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -106,6 +106,7 @@ export type PreparedBarXSeries = {
         allowOverlap: boolean;
         padding: number;
         html: boolean;
+        format?: ValueFormat;
     };
     borderRadius: number;
     yAxis: number;
@@ -122,6 +123,7 @@ export type PreparedBarYSeries = {
         maxHeight: number;
         maxWidth: number;
         html: boolean;
+        format?: ValueFormat;
     };
     borderRadius: number;
 } & BasePreparedSeries;
@@ -147,6 +149,7 @@ export type PreparedPieSeries = {
         distance: number;
         connectorCurve: ConnectorCurve;
         html: boolean;
+        format?: ValueFormat;
     };
     states: {
         hover: {
@@ -166,6 +169,7 @@ export type PreparedLineSeries = {
         padding: number;
         allowOverlap: boolean;
         html: boolean;
+        format?: ValueFormat;
     };
     marker: {
         states: {
@@ -203,6 +207,7 @@ export type PreparedAreaSeries = {
         padding: number;
         allowOverlap: boolean;
         html: boolean;
+        format?: ValueFormat;
     };
     marker: {
         states: {
@@ -234,6 +239,7 @@ export type PreparedTreemapSeries = {
         allowOverlap: boolean;
         html: boolean;
         align: Required<Required<TreemapSeries>['dataLabels']>['align'];
+        format?: ValueFormat;
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
@@ -246,6 +252,7 @@ export type PreparedWaterfallSeries = {
         allowOverlap: boolean;
         padding: number;
         html: boolean;
+        format?: ValueFormat;
     };
     positiveColor: string;
     negativeColor: string;
@@ -256,6 +263,7 @@ export type PreparedSankeySeries = {
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;
+        format?: ValueFormat;
     };
 } & BasePreparedSeries & Omit<SankeySeries, keyof BasePreparedSeries>;
 export type PreparedRadarSeries = {
@@ -271,6 +279,7 @@ export type PreparedRadarSeries = {
         padding: number;
         allowOverlap: boolean;
         html: boolean;
+        format?: ValueFormat;
     };
     marker: {
         states: {

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -1,8 +1,9 @@
 import { group, sort } from 'd3';
 import { getDataCategoryValue, getLabelsSize, getLeftPosition } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
-    const text = String(point.data.label || point.data.y);
+    const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
     const style = series.dataLabels.style;
     const size = getLabelsSize({ labels: [text], style, html: series.dataLabels.html });
     const labelData = {

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

@@ -1,12 +1,13 @@
 import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
 function getLabelData(d) {
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = String(d.data.label || d.data.y);
+    const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.y }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const html = d.series.dataLabels.html;
     const { maxHeight: height, maxWidth: width } = getLabelsSize({

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

@@ -1,6 +1,7 @@
 import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
 const DEFAULT_LABEL_PADDING = 7;
 function groupByYValue(series, yAxis) {
@@ -54,7 +55,7 @@ function setLabel(prepared) {
         return;
     }
     const data = prepared.data;
-    const content = String(data.label || data.x);
+    const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
     const { maxHeight: height, maxWidth: width } = getLabelsSize({
         labels: [content],
         style: dataLabels.style,

package/dist/cjs/hooks/useShapes/line/prepare-data.js

@@ -1,7 +1,8 @@
 import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
-    const text = String(point.data.label || point.data.y);
+    const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
     const style = series.dataLabels.style;
     const size = getLabelsSize({ labels: [text], style });
     const labelData = {

package/dist/cjs/hooks/useShapes/pie/prepare-data.js

@@ -1,5 +1,6 @@
 import { arc, group, line as lineGenerator } from 'd3';
 import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 import { getCurveFactory, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {
@@ -100,7 +101,7 @@ export function preparePieData(args) {
             .outerRadius((d) => d.data.radius + distance + connectorPadding);
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
-            const text = String(d.data.label || d.data.value);
+            const text = getFormattedValue(Object.assign({ value: d.data.label || d.data.value }, d.dataLabels));
             const shouldUseHtml = dataLabels.html;
             const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
             const labelWidth = labelSize.maxWidth;

package/dist/cjs/hooks/useShapes/radar/prepare-data.js

@@ -1,5 +1,6 @@
 import { curveLinearClosed, line, range, scaleLinear } from 'd3';
 import { getLabelsSize } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 export function prepareRadarData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
@@ -112,7 +113,7 @@ export function prepareRadarData(args) {
             const { style } = dataLabels;
             const shouldUseHtml = dataLabels.html;
             data.labels = categories.map((category, index) => {
-                const text = category.key;
+                const text = getFormattedValue(Object.assign({ value: category.key }, dataLabels));
                 const labelSize = getLabelsSize({ labels: [text], style });
                 const angle = index * angleStep - Math.PI / 2;
                 // Position label slightly outside the point

package/dist/cjs/hooks/useShapes/sankey/prepare-data.js

@@ -1,4 +1,5 @@
 import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
+import { getFormattedValue } from '../../../utils/chart/format';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
     const htmlElements = [];
@@ -58,8 +59,9 @@ export function prepareSankeyData(args) {
             const x1 = (_b = d.x1) !== null && _b !== void 0 ? _b : 0;
             const y0 = (_c = d.y0) !== null && _c !== void 0 ? _c : 0;
             const y1 = (_d = d.y1) !== null && _d !== void 0 ? _d : 0;
+            const text = getFormattedValue(Object.assign({ value: d.name }, dataLabels));
             return {
-                text: d.name,
+                text,
                 x: x0 < width / 2 ? x1 + 6 : x0 - 6,
                 y: (y1 + y0) / 2,
                 textAnchor: x0 < width / 2 ? 'start' : 'end',

package/dist/cjs/hooks/useShapes/treemap/prepare-data.js

@@ -1,14 +1,16 @@
 import { stratify, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, } from 'd3';
 import { LayoutAlgorithm } from '../../../constants';
 import { getLabelsSize } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 const DEFAULT_PADDING = 1;
 function getLabels(args) {
-    const { data, html, padding, align } = args;
+    const { data, options: { html, padding, align }, } = args;
     return data.reduce((acc, d) => {
         const texts = Array.isArray(d.data.name) ? d.data.name : [d.data.name];
         texts.forEach((text, index) => {
             var _a;
-            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [text], html })) !== null && _a !== void 0 ? _a : {};
+            const label = getFormattedValue(Object.assign({ value: text }, args.options));
+            const { maxHeight: lineHeight, maxWidth: labelWidth } = (_a = getLabelsSize({ labels: [label], html })) !== null && _a !== void 0 ? _a : {};
             const left = d.x0 + padding;
             const right = d.x1 - padding;
             const width = Math.max(0, right - left);
@@ -30,13 +32,13 @@ function getLabels(args) {
             }
             const item = html
                 ? {
-                    content: text,
+                    content: label,
                     x,
                     y,
                     size: { width, height: lineHeight },
                 }
                 : {
-                    text,
+                    text: label,
                     x,
                     y,
                     width,
@@ -92,8 +94,8 @@ export function prepareTreemapData(args) {
     let labelData = [];
     const htmlElements = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
-        const { html, padding, align } = series.dataLabels;
-        const labels = getLabels({ html, padding, align, data: leaves });
+        const { html } = series.dataLabels;
+        const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
             htmlElements.push(...labels);
         }

package/dist/cjs/hooks/useShapes/waterfall/prepare-data.js

@@ -1,13 +1,14 @@
 import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
 import { getLabelsSize } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(d, plotHeight) {
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = String(d.data.label || d.subTotal);
+    const text = getFormattedValue(Object.assign({ value: d.data.label || d.subTotal }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
     let y;