@gravity-ui/charts 0.8.0 → 0.10.0

package/README.md

@@ -1,8 +1,5 @@
 # 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/)
 
-> [!WARNING]
-> The library may have major changes in minor releases while it is on version `0.*.*`.
-
 ## Install
 
 ```shell

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

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

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { line, select } from 'd3';
+import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
-const b = block('d3-axis');
+const b = block('axis');
 function getLabelFormatter({ axis, scale }) {
     const ticks = getScaleTicks(scale);
     const tickStep = getClosestPointsRange(axis, ticks);
@@ -42,7 +42,7 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split } = props;
+    const { axis, width, height: totalHeight, scale, split, plotRef } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -57,8 +57,9 @@ export const AxisX = React.memo(function AxisX(props) {
                 return [-top, -(top + height)];
             });
         }
+        const axisScale = scale;
         const xAxisGenerator = axisBottom({
-            scale: scale,
+            scale: axisScale,
             ticks: {
                 items: tickItems,
                 labelFormat: getLabelFormatter({ axis, scale }),
@@ -103,6 +104,42 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
-    }, [axis, width, totalHeight, scale, split]);
+        // add plot lines
+        if (plotRef && axis.plotLines.length > 0) {
+            const plotLineClassName = b('plotLine');
+            const plotLineContainer = select(plotRef.current);
+            plotLineContainer.selectAll(`.${plotLineClassName}-x`).remove();
+            const plotLinesSelection = plotLineContainer
+                .selectAll(`.${plotLineClassName}-x`)
+                .data(axis.plotLines)
+                .join('g')
+                .attr('class', `${plotLineClassName}-x`);
+            const lineGenerator = line();
+            plotLinesSelection
+                .append('path')
+                .attr('d', (plotLine) => {
+                const plotLineValue = Number(axisScale(plotLine.value));
+                const points = [
+                    [plotLineValue, 0],
+                    [plotLineValue, totalHeight],
+                ];
+                return lineGenerator(points);
+            })
+                .attr('stroke', (plotLine) => plotLine.color)
+                .attr('stroke-width', (plotLine) => plotLine.width)
+                .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                .attr('opacity', (plotLine) => plotLine.opacity);
+            // set layer placement
+            plotLinesSelection.each((plotLineData, i, nodes) => {
+                const plotLineSelection = select(nodes[i]);
+                if (plotLineData.layerPlacement === 'before') {
+                    plotLineSelection.lower();
+                }
+                else {
+                    plotLineSelection.raise();
+                }
+            });
+        }
+    }, [axis, width, totalHeight, scale, split, plotRef]);
     return React.createElement("g", { ref: ref });
 });

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

@@ -2,7 +2,7 @@ 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 './styles.css';
-const b = block('d3-axis');
+const b = block('axis');
 function transformLabel(args) {
     const { node, axis } = args;
     let topOffset = axis.labels.lineHeight / 2;
@@ -56,11 +56,14 @@ function getTitlePosition(args) {
     if (rowCount < 1) {
         return { x: 0, y: 0 };
     }
-    const x = -(axis.title.height -
+    let x = axis.title.height -
         axis.title.height / rowCount +
         axis.title.margin +
         axis.labels.margin +
-        axis.labels.width);
+        axis.labels.width;
+    if (axis.position === 'left') {
+        x = x * -1;
+    }
     let y;
     switch (axis.title.align) {
         case 'left': {
@@ -82,6 +85,7 @@ export const AxisY = (props) => {
     const { axes, width, height: totalHeight, scale, split, plotRef } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
+    const lineGenerator = line();
     React.useEffect(() => {
         if (!ref.current) {
             return;
@@ -174,7 +178,7 @@ export const AxisY = (props) => {
                         [0, plotLineValue],
                         [width, plotLineValue],
                     ];
-                    return line()(points);
+                    return lineGenerator(points);
                 })
                     .attr('stroke', (plotLine) => plotLine.color)
                     .attr('stroke-width', (plotLine) => plotLine.width)
@@ -199,7 +203,7 @@ export const AxisY = (props) => {
                 [0, 0],
                 [0, height],
             ];
-            return line()(points);
+            return lineGenerator(points);
         })
             .style('stroke', (d) => d.lineColor || '');
         svgElement.selectAll('.tick').each((_d, index, nodes) => {

package/dist/cjs/components/Axis/styles.css

@@ -1,17 +1,17 @@
-.gcharts-d3-axis .domain {
+.gcharts-axis .domain {
   stroke: var(--g-color-line-generic-active);
 }
-.gcharts-d3-axis .tick text {
+.gcharts-axis .tick text {
   color: var(--g-color-text-secondary);
   alignment-baseline: after-edge;
 }
-.gcharts-d3-axis .tick line, .gcharts-d3-axis .tick path {
+.gcharts-axis .tick line, .gcharts-axis .tick path {
   stroke: var(--g-color-line-generic);
 }
-.gcharts-d3-axis__title {
+.gcharts-axis__title {
   alignment-baseline: after-edge;
   fill: var(--g-color-text-secondary);
 }
-.gcharts-d3-axis__title tspan {
+.gcharts-axis__title tspan {
   alignment-baseline: after-edge;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventType, block, getD3Dispatcher } from '../../utils';
+import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
 import { PlotTitle } from '../PlotTitle';
@@ -9,14 +9,14 @@ import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
 import './styles.css';
-const b = block('d3');
+const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
     const plotRef = React.useRef(null);
-    const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
+    const dispatcher = React.useMemo(() => getDispatcher(), []);
     const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
@@ -35,6 +35,7 @@ export const ChartInner = (props) => {
         unpinTooltip,
         xAxis,
         yAxis,
+        tooltipThrottle: tooltip.throttle,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -68,7 +69,7 @@ export const ChartInner = (props) => {
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
+                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {

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

@@ -1,10 +1,10 @@
-.gcharts-d3 {
-  --d3-data-labels: var(--g-color-text-secondary);
+.gcharts-chart {
+  --gcharts-data-labels: var(--g-color-text-secondary);
   position: absolute;
 }
-.gcharts-d3__html-layer {
+.gcharts-chart__html-layer {
   display: contents;
 }
-.gcharts-d3__html-layer > * {
+.gcharts-chart__html-layer > * {
   transform: inherit;
 }

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -16,6 +16,7 @@ type Props = {
     unpinTooltip: ChartInnerState['unpinTooltip'];
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
+    tooltipThrottle: number;
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;

package/dist/cjs/components/ChartInner/useChartInnerHandlers.js

@@ -4,9 +4,8 @@ import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
-const THROTTLE_DELAY = 50;
 export function useChartInnerHandlers(props) {
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, } = props;
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, tooltipThrottle, } = props;
     const isOutsideBounds = React.useCallback((x, y) => {
         return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
     }, [boundsHeight, boundsWidth]);
@@ -40,7 +39,7 @@ export function useChartInnerHandlers(props) {
     };
     const throttledHandleMouseMove = IS_TOUCH_ENABLED
         ? undefined
-        : throttle(handleMouseMove, THROTTLE_DELAY);
+        : throttle(handleMouseMove, tooltipThrottle);
     const handleMouseLeave = (event) => {
         if (tooltipPinned) {
             return;
@@ -55,7 +54,7 @@ export function useChartInnerHandlers(props) {
         handleMove([pointerX, pointerY], event);
     };
     const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, THROTTLE_DELAY)
+        ? throttle(handleTouchMove, tooltipThrottle)
         : undefined;
     const handleChartClick = (event) => {
         const [pointerX, pointerY] = pointer(event, svgContainer);

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

@@ -29,11 +29,12 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
-    title: (import("../../types").ChartTitle & {
+    title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../../types").ChartTooltip<any> & {
+    tooltip: import("../..").ChartTooltip<any> & {
         enabled: boolean;
+        throttle: number;
     };
     xAxis: import("../../hooks").PreparedAxis;
     xScale: import("../../hooks").ChartScale | undefined;

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

@@ -5,7 +5,7 @@ import { formatNumber } from '../../libs';
 import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
-const b = block('d3-legend');
+const b = block('legend');
 const getLegendPosition = (args) => {
     const { align, offsetWidth = 0, width, contentWidth } = args;
     const top = 0;

package/dist/cjs/components/Legend/styles.css

@@ -1,47 +1,47 @@
-.gcharts-d3-legend {
+.gcharts-legend {
   color: var(--g-color-text-secondary);
 }
-.gcharts-d3-legend__title {
+.gcharts-legend__title {
   fill: var(--g-color-text-secondary);
 }
-.gcharts-d3-legend__item {
+.gcharts-legend__item {
   cursor: pointer;
   user-select: none;
 }
-.gcharts-d3-legend__item-symbol_shape_rect.gcharts-d3-legend__item-symbol_unselected {
+.gcharts-legend__item-symbol_shape_rect.gcharts-legend__item-symbol_unselected {
   fill: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-symbol_shape_path.gcharts-d3-legend__item-symbol_unselected {
+.gcharts-legend__item-symbol_shape_path.gcharts-legend__item-symbol_unselected {
   stroke: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-symbol_shape_symbol.gcharts-d3-legend__item-symbol_unselected {
+.gcharts-legend__item-symbol_shape_symbol.gcharts-legend__item-symbol_unselected {
   fill: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-text {
+.gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
   alignment-baseline: before-edge;
 }
-.gcharts-d3-legend__item-text_unselected {
+.gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);
 }
-.gcharts-d3-legend__item-text:hover {
+.gcharts-legend__item-text:hover {
   fill: var(--g-color-text-complementary);
 }
-.gcharts-d3-legend__pagination {
+.gcharts-legend__pagination {
   user-select: none;
   fill: var(--g-color-text-primary);
 }
-.gcharts-d3-legend__pagination-counter, .gcharts-d3-legend__pagination-arrow {
+.gcharts-legend__pagination-counter, .gcharts-legend__pagination-arrow {
   alignment-baseline: middle;
 }
-.gcharts-d3-legend__pagination-arrow {
+.gcharts-legend__pagination-arrow {
   cursor: pointer;
   fill: var(--g-color-text-brand);
 }
-.gcharts-d3-legend__pagination-arrow_inactive {
+.gcharts-legend__pagination-arrow_inactive {
   cursor: inherit;
   fill: var(--g-color-base-generic-accent-disabled);
 }
-.gcharts-d3-legend__pagination-arrow:hover:not(.gcharts-d3-legend__pagination-arrow_inactive) {
+.gcharts-legend__pagination-arrow:hover:not(.gcharts-legend__pagination-arrow_inactive) {
   fill: var(--g-color-base-brand-hover);
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import './styles.css';
-const b = block('d3-title');
+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) },

package/dist/cjs/components/Title/styles.css

@@ -1,4 +1,4 @@
-.gcharts-d3-title {
+.gcharts-title {
   font-size: var(--g-text-subheader-2-font-size);
   font-weight: var(--g-text-subheader-font-weight);
   fill: var(--g-color-text-primary);

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

@@ -28,14 +28,17 @@ 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 }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
@@ -109,6 +112,18 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             ": ",
                             value)));
                 }
+                case 'radar': {
+                    const radarSeries = series;
+                    const seriesData = data;
+                    const value = (React.createElement(React.Fragment, null,
+                        React.createElement("span", null,
+                            radarSeries.name || radarSeries.id,
+                            "\u00A0"),
+                        React.createElement("span", null, seriesData.value)));
+                    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/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/useChartOptions/tooltip.js

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
 export const getPreparedTooltip = (args) => {
+    var _a;
     const { tooltip } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true) });
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0 });
 };

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

@@ -19,7 +19,7 @@ export type PreparedAxisPlotLine = {
     opacity: number;
     layerPlacement: AxisPlotLine['layerPlacement'];
 };
-export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
+export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
     title: {
@@ -48,6 +48,7 @@ export type PreparedTitle = ChartData['title'] & {
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;
+    throttle: number;
 };
 export type ChartOptions = {
     chart: PreparedChart;

package/dist/cjs/hooks/useChartOptions/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DashStyle, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {
@@ -102,7 +102,14 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         },
         position: 'bottom',
         plotIndex: 0,
-        plotLines: [],
+        plotLines: get(xAxis, 'plotLines', []).map((d) => ({
+            value: get(d, 'value', 0),
+            color: get(d, 'color', 'var(--g-color-base-brand)'),
+            width: get(d, 'width', 1),
+            dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+            opacity: get(d, 'opacity', 1),
+            layerPlacement: get(d, 'layerPlacement', 'before'),
+        })),
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/dist/cjs/hooks/useSeries/constants.js

@@ -4,7 +4,7 @@ export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',
     fontWeight: 'bold',
-    fontColor: 'var(--d3-data-labels)',
+    fontColor: 'var(--gcharts-data-labels)',
 };
 export const DEFAULT_HALO_OPTIONS = {
     enabled: true,

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,63 @@
+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;
+        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),
+            },
+            cursor: get(series, 'cursor', null),
+            marker: prepareMarker(series, seriesOptions),
+        };
+        return preparedSeries;
+    });
+}

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`,