@gravity-ui/charts 0.9.0 → 0.11.0

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) => {
@@ -28,16 +29,19 @@ const getRowData = (fieldName, data, axis) => {
 const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
     }
+    if (data.some((item) => item.series.type === 'radar')) {
+        return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
+    }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData((_a = data[0]) === null || _a === void 0 ? void 0 : _a.data, yAxis);
+        return getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
     }
-    return getXRowData((_b = data[0]) === null || _b === void 0 ? void 0 : _b.data, xAxis);
+    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),
@@ -51,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') },
@@ -70,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))));
@@ -88,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' } },
@@ -107,7 +135,23 @@ 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, 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))));
                 }
                 default: {
                     return null;

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/constants/defaults/series-options.js

@@ -89,6 +89,18 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    radar: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
     waterfall: {
         barMaxWidth: 50,
         barPadding: 0.1,

package/dist/cjs/constants/index.d.ts

@@ -10,6 +10,7 @@ export declare const SeriesType: {
     readonly Treemap: "treemap";
     readonly Waterfall: "waterfall";
     readonly Sankey: "sankey";
+    readonly Radar: "radar";
 };
 export declare enum DashStyle {
     Dash = "Dash",

package/dist/cjs/constants/index.js

@@ -10,6 +10,7 @@ export const SeriesType = {
     Treemap: 'treemap',
     Waterfall: 'waterfall',
     Sankey: 'sankey',
+    Radar: 'radar',
 };
 export var DashStyle;
 (function (DashStyle) {

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) {

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.d.ts

@@ -0,0 +1,16 @@
+import type { ChartSeriesOptions, RadarSeries } from '../../types';
+import type { PreparedLegend, PreparedRadarSeries } from './types';
+type PrepareRadarSeriesArgs = {
+    series: RadarSeries[];
+    seriesOptions?: ChartSeriesOptions;
+    legend: PreparedLegend;
+};
+export declare const DEFAULT_MARKER: {
+    enabled: boolean;
+    radius: number;
+    symbol: `${import("../../constants").SymbolType}`;
+    borderColor: string;
+    borderWidth: number;
+};
+export declare function prepareRadarSeries(args: PrepareRadarSeriesArgs): PreparedRadarSeries[];
+export {};

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

@@ -0,0 +1,64 @@
+import { scaleOrdinal } from 'd3';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import { DEFAULT_PALETTE } from '../../constants';
+import { getUniqId } from '../../utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
+import { prepareLegendSymbol } from './utils';
+export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: true, radius: 2 });
+function prepareMarker(series, seriesOptions) {
+    var _a;
+    const seriesHoverState = get(seriesOptions, 'radar.states.hover');
+    const markerNormalState = Object.assign({}, DEFAULT_MARKER, (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.radar) === null || _a === void 0 ? void 0 : _a.marker, series.marker);
+    const hoveredMarkerDefaultOptions = {
+        enabled: true,
+        radius: markerNormalState.radius + 1,
+        borderWidth: 1,
+        borderColor: '#ffffff',
+        halo: DEFAULT_HALO_OPTIONS,
+    };
+    return {
+        states: {
+            normal: markerNormalState,
+            hover: merge(hoveredMarkerDefaultOptions, seriesHoverState === null || seriesHoverState === void 0 ? void 0 : seriesHoverState.marker),
+        },
+    };
+}
+export function prepareRadarSeries(args) {
+    var _a, _b;
+    const { series: radarSeries, seriesOptions, legend } = 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, _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 = {
+            type: 'radar',
+            data: series.data,
+            categories,
+            id: getUniqId(),
+            name,
+            color,
+            visible: typeof series.visible === 'boolean' ? series.visible : true,
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            borderColor: series.borderColor || color,
+            borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
+            fillOpacity: (_d = series.fillOpacity) !== null && _d !== void 0 ? _d : 0.25,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', true),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.style),
+                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),
+        };
+        return preparedSeries;
+    });
+}

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

@@ -4,6 +4,7 @@ import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
 import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
+import { prepareRadarSeries } from './prepare-radar';
 import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
@@ -75,6 +76,13 @@ export function prepareSeries(args) {
                 legend,
             });
         }
+        case 'radar': {
+            return prepareRadarSeries({
+                series: series,
+                seriesOptions,
+                legend,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

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, 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,9 +263,44 @@ export type PreparedSankeySeries = {
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;
+        format?: ValueFormat;
     };
 } & BasePreparedSeries & Omit<SankeySeries, keyof BasePreparedSeries>;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries;
+export type PreparedRadarSeries = {
+    type: RadarSeries['type'];
+    data: RadarSeriesData[];
+    categories: RadarSeriesCategory[];
+    borderColor: string;
+    borderWidth: number;
+    fillOpacity: number;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+        html: boolean;
+        format?: ValueFormat;
+    };
+    marker: {
+        states: {
+            normal: {
+                symbol: `${SymbolType}`;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries | PreparedRadarSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

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,