@gravity-ui/charts 1.38.3 → 1.38.5

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

@@ -155,7 +155,11 @@ export const ChartInner = (props) => {
         }
         return items;
     }, [boundsHeight, boundsOffsetTop, boundsWidth, preparedSeries, preparedSplit, yAxis, yScale]);
-    const yAxisDataItems = useAsyncState([], setYAxisDataItems);
+    // Gate axis data computation until the legend has been computed at least once.
+    // Using legendConfig (undefined → value, never reverts) avoids false→true toggling
+    // on every zoom/range-slider interaction that would otherwise stall axis rendering.
+    const axisDataReady = !(preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) || Boolean(legendConfig);
+    const yAxisDataItems = useAsyncState([], setYAxisDataItems, axisDataReady);
     const setXAxisDataItems = React.useCallback(async () => {
         const items = [];
         const axis = xAxis;
@@ -186,7 +190,7 @@ export const ChartInner = (props) => {
         xScale,
         yAxis,
     ]);
-    const xAxisDataItems = useAsyncState([], setXAxisDataItems);
+    const xAxisDataItems = useAsyncState([], setXAxisDataItems, axisDataReady);
     React.useEffect(() => {
         if (!initialized && xScale) {
             if (!preparedRangeSlider.enabled || isBandScale(xScale)) {
@@ -237,7 +241,7 @@ export const ChartInner = (props) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
         React.createElement("g", { className: b('content'), width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
-            xScale && xAxisDataItems.length && (React.createElement(React.Fragment, null, xAxisDataItems.map((axisData) => {
+            Boolean(xScale && xAxisDataItems.length) && (React.createElement(React.Fragment, null, xAxisDataItems.map((axisData) => {
                 return (React.createElement(AxisX, { key: axisData.id, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
             }))),
             Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {

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

@@ -8,15 +8,13 @@ export function useLegend({ preparedLegend, preparedChart, preparedSeries, width
     });
     const legendStateRunRef = React.useRef(0);
     const prevLegendStateValue = React.useRef(legendState);
-    const legendStateReady = React.useRef(false);
     React.useEffect(() => {
         legendStateRunRef.current++;
-        legendStateReady.current = false;
+        const currentRun = legendStateRunRef.current;
+        if (!preparedLegend) {
+            return;
+        }
         (async function () {
-            const currentRun = legendStateRunRef.current;
-            if (!preparedLegend) {
-                return;
-            }
             const newStateValue = await getLegendComponents({
                 chartWidth: width,
                 chartHeight: height,
@@ -29,7 +27,6 @@ export function useLegend({ preparedLegend, preparedChart, preparedSeries, width
                     setLegend(newStateValue);
                     prevLegendStateValue.current = newStateValue;
                 }
-                legendStateReady.current = true;
             }
         })();
     }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { PreparedAxis, PreparedSeries, PreparedZoom } from '../../hooks';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
-export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;
+export declare function useAsyncState<T>(value: T, setState: () => Promise<T>, isReady?: boolean): T;
 export declare function getResetZoomButtonStyle(args: {
     boundsHeight: number;
     boundsOffsetLeft: number;

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

@@ -29,23 +29,25 @@ export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     });
     return [...hasDataMap.values()].every((hasData) => hasData);
 }
-export function useAsyncState(value, setState) {
+export function useAsyncState(value, setState, isReady = true) {
     const [stateValue, setValue] = React.useState(value);
     const countedRef = React.useRef(0);
     const prevValue = React.useRef(value);
-    const ready = React.useRef(false);
     React.useEffect(() => {
+        // Always increment to invalidate any in-flight run from the previous cycle.
         countedRef.current++;
+        if (!isReady) {
+            return;
+        }
+        const currentRun = countedRef.current;
         (async function () {
-            const currentRun = countedRef.current;
             const newValue = await setState();
-            ready.current = true;
             if (countedRef.current === currentRun && !isEqual(prevValue.current, newValue)) {
                 setValue(newValue);
                 prevValue.current = newValue;
             }
         })();
-    }, [setState]);
+    }, [setState, isReady]);
     return stateValue;
 }
 export function getResetZoomButtonStyle(args) {

package/dist/cjs/hooks/useAxis/index.js

@@ -81,8 +81,11 @@ export function useAxis(props) {
     ]);
     const isAxesReady = axesStateReady.current;
     const result = React.useMemo(() => {
-        return isAxesReady ? Object.assign(Object.assign({}, axesState), { setAxes }) : { xAxis: null, yAxis: [], setAxes };
+        if (isAxesReady) {
+            return Object.assign(Object.assign({}, axesState), { setAxes });
+        }
+        prevAxesStateValue.current = { xAxis: null, yAxis: [] };
+        return Object.assign(Object.assign({}, prevAxesStateValue.current), { setAxes });
     }, [isAxesReady, axesState]);
-    prevAxesStateValue.current = result;
     return result;
 }

package/dist/cjs/hooks/useChartDimensions/index.js

@@ -49,7 +49,7 @@ const getLeftOffset = ({ preparedLegend, legendConfig, }) => {
 export const useChartDimensions = (args) => {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width, legendConfig, } = args;
     return React.useMemo(() => {
-        if (!preparedLegend || (!legendConfig && (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled))) {
+        if (!preparedLegend || !legendConfig) {
             return { boundsWidth: 0, boundsHeight: 0 };
         }
         const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);

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

@@ -40,14 +40,22 @@ const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLe
 export const useSeries = (args) => {
     const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
     const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
+    const legendRunRef = React.useRef(0);
     React.useEffect(() => {
         if (!preparedLegendProps) {
-            getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
+            const currentRun = ++legendRunRef.current;
+            getPreparedLegend({ legend, series: seriesData }).then((value) => {
+                if (legendRunRef.current === currentRun) {
+                    setPreparedLegend(value);
+                }
+            });
         }
     }, [legend, preparedLegendProps, seriesData]);
     const [preparedSeries, setPreparedSeries] = React.useState([]);
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
+    const seriesRunRef = React.useRef(0);
     React.useEffect(() => {
+        const currentRun = ++seriesRunRef.current;
         (async () => {
             const items = await getPreparedSeries({
                 seriesData,
@@ -55,8 +63,10 @@ export const useSeries = (args) => {
                 preparedLegend,
                 colors,
             });
-            setPreparedSeries(items);
-            setActiveLegendItems(getActiveLegendItems(items));
+            if (seriesRunRef.current === currentRun) {
+                setPreparedSeries(items);
+                setActiveLegendItems(getActiveLegendItems(items));
+            }
         })();
     }, [seriesData, seriesOptions, preparedLegend, colors]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);

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

@@ -34,7 +34,6 @@ async function getLabelData(d, xMax) {
         series: d.series,
     };
 }
-// eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
     var _a, _b, _c, _d, _e;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;

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

@@ -161,7 +161,6 @@ export function preparePieData(args) {
              * on the left side (x < 0) and shifts up by the label height when above the
              * horizontal center (y < 0). For SVG text, only the vertical shift is applied
              * to compensate for text baseline.
-             *
              * @param {number} angle - Angle in radians at which the label should be placed.
              * @returns {[number, number]} A tuple [x, y] relative to the pie center.
              */

package/dist/cjs/hooks/useShapes/pie/utils.d.ts

@@ -7,7 +7,6 @@ export declare function getCurveFactory(data: PreparedPieData): CurveFactory | u
  * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
  *
  * The order of B and C does not affect the result.
- *
  * @see: https://en.wikipedia.org/wiki/Inscribed_angle
  * @returns The angle in degrees, in the range [0, 180].
  */

package/dist/cjs/hooks/useShapes/pie/utils.js

@@ -18,7 +18,6 @@ export function getCurveFactory(data) {
  * Inscribed angle at vertex A (opposite side/chord BC): the angle between rays AB and AC.
  *
  * The order of B and C does not affect the result.
- *
  * @see: https://en.wikipedia.org/wiki/Inscribed_angle
  * @returns The angle in degrees, in the range [0, 180].
  */

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

@@ -5,7 +5,7 @@ export function prepareSankeyData(args) {
     const htmlElements = [];
     const sankeyGenerator = sankey()
         .nodeId((d) => d.name)
-        .nodeSort((d) => d.index)
+        .nodeSort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); })
         .nodeWidth(15)
         .nodePadding(10)
         .extent([

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

@@ -29,9 +29,8 @@ export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
             normal?: {
                 /**
                  * Enable or disable the point marker.
-                 *
                  * @default false
-                 * */
+                 */
                 enabled: boolean;
             };
         };
@@ -46,25 +45,25 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
     data: AreaSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;
-    /** Whether to stack the values of each series on top of each other.
+    /**
+     * Whether to stack the values of each series on top of each other.
      * Possible values are undefined to disable, "normal" to stack by value or "percent"
-     *
      * @default undefined
-     * */
+     */
     stacking?: 'normal' | 'percent';
     /** This option allows grouping series in a stacked chart */
     stackId?: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
-    /** Fill opacity for the area
-     *
+    /**
+     * Fill opacity for the area
      * @default 0.75
-     * */
+     */
     opacity?: number;
-    /** Pixel width of the graph line.
-     *
+    /**
+     * Pixel width of the graph line.
      * @default 1
-     * */
+     */
     lineWidth?: number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
     legend?: BaseSeriesLegend & {
@@ -80,7 +79,6 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
      * - `'connect'`: Connect points across null values (skip nulls in rendering)
      * - `'zero'`: Treat null values as zero
      * - `'skip'`: Omit the data point (creates gap in area)
-     *
      * @default 'skip'
      */
     nullMode?: 'connect' | 'zero' | 'skip';

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

@@ -9,11 +9,13 @@ export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
 export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
-    /** The label's pixel distance from the perimeter of the plot area.
+    /**
+     * The label's pixel distance from the perimeter of the plot area.
      * @default 10
      */
     margin?: number;
-    /** The pixel padding for axis labels, to ensure white space between them.
+    /**
+     * The pixel padding for axis labels, to ensure white space between them.
      * @default 4
      */
     padding?: number;
@@ -26,11 +28,11 @@ export interface ChartAxisLabels {
      * As the chart gets narrower, it will start rotating the labels -45 degrees.
      *
      * Does not apply to html labels.
-     *
      * @default true for all axis types except `datetime` (defaults to false)
      */
     autoRotation?: boolean;
-    /** Rotation of the labels in degrees.
+    /**
+     * Rotation of the labels in degrees.
      *
      * Does not apply to html labels.
      * @default 0
@@ -39,11 +41,12 @@ export interface ChartAxisLabels {
     /**
      * Allows to use any html-tags to display labels content. Supports only for axis with type "category".
      * @default false
-     * */
+     */
     html?: boolean;
-    /** The maximum width of the axis labels(absolute or relative to the chart area).
+    /**
+     * The maximum width of the axis labels(absolute or relative to the chart area).
      * If more than that, it collapses into three points.
-     * */
+     */
     maxWidth?: number | string;
 }
 export interface ChartAxisRangeSlider {
@@ -84,26 +87,29 @@ export interface ChartAxisTitle {
     text?: string;
     /** CSS styles for the title */
     style?: Partial<BaseTextStyle>;
-    /** The pixel distance between the axis labels or line and the title.
+    /**
+     * The pixel distance between the axis labels or line and the title.
      * @default 4 for horizontal axes, 8 for vertical
      */
     margin?: number;
     /** Alignment of the title. */
     align?: ChartAxisTitleAlignment;
-    /** Allows limiting of the contents of a title block to the specified number of lines.
+    /**
+     * Allows limiting of the contents of a title block to the specified number of lines.
      * @default 1
      */
     maxRowCount?: number;
 }
 export interface ChartAxisTickMarks {
-    /** Enable or disable the tick marks on the axis.
+    /**
+     * Enable or disable the tick marks on the axis.
      *
      * Note: tick marks are always hidden when the axis `visible` is set to `false`.
-     *
      * @default false
      */
     enabled?: boolean;
-    /** The length of the tick marks in pixels (perpendicular to the axis).
+    /**
+     * The length of the tick marks in pixels (perpendicular to the axis).
      * @default 6
      */
     length?: number;
@@ -141,33 +147,38 @@ export interface ChartAxis {
      * Note: min/max is not supported for category axes in waterfall and heatmap visualizations.
      */
     max?: number;
-    /** The grid lines settings.
+    /**
+     * The grid lines settings.
      * Unavailable for some visualizations, such as a heatmap.
      */
     grid?: {
-        /** Enable or disable the grid lines.
+        /**
+         * Enable or disable the grid lines.
          * @default true
          */
         enabled?: boolean;
     };
     ticks?: {
-        /** Pixel interval of the tick marks. Not applicable to categorized axis.
+        /**
+         * Pixel interval of the tick marks. Not applicable to categorized axis.
          * The specified value is only a hint; the interval between ticks can be greater or less depending on the data.
-         *
          * @deprecated use `interval` instead
-         * */
+         */
         pixelInterval?: number;
-        /** Interval of the tick marks(absolute or relative to the chart area). Not applicable to categorized axis.
-         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
+        /**
+         * Interval of the tick marks(absolute or relative to the chart area). Not applicable to categorized axis.
+         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data.
+         */
         interval?: number | string;
     };
-    /** Padding of the max value relative to the length of the axis.
+    /**
+     * Padding of the max value relative to the length of the axis.
      * A padding of 0.05 will make a 100px axis 5px longer.
      *
+     *
      * Does not apply:
      * - for series with data normalization along on a specific axis (stacking: 'percent')
      * - to the X axis when rangeSlider is used
-     *
      * @default 0.05 for Y axis, 0.01 for X axis
      */
     maxPadding?: number;
@@ -175,14 +186,16 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
-    /** Small perpendicular marks on the axis line at each tick position.
+    /**
+     * Small perpendicular marks on the axis line at each tick position.
      *
      * Hidden when the axis `visible` is set to `false`.
      */
     tickMarks?: ChartAxisTickMarks;
     /** Whether axis, including axis title, line, tick marks, and labels, should be visible. */
     visible?: boolean;
-    /** Setting the order of the axis values. It is not applied by default.
+    /**
+     * Setting the order of the axis values. It is not applied by default.
      * the "reverse" value is needed to use the reverse order without sorting
      */
     order?: 'sortAsc' | 'sortDesc' | 'reverse';
@@ -195,7 +208,6 @@ export interface ChartAxis {
      *
      * Use `startOnTick: false` to make the chart start exactly at the data minimum,
      * preventing gaps at the chart start.
-     *
      * @default true for X axis and datetime Y axis, false for linear/logarithmic Y axis
      */
     startOnTick?: boolean;
@@ -207,7 +219,6 @@ export interface ChartAxis {
      * if the data maximum doesn't align with the tick.
      *
      * Use `endOnTick: false` to make the chart end closer to the data maximum.
-     *
      * @default true for X axis and datetime Y axis, false for linear/logarithmic Y axis
      */
     endOnTick?: boolean;
@@ -232,17 +243,20 @@ export interface AxisPlot {
     /**
      * Individual opacity for the line.
      * @default 1
-     * */
+     */
     opacity?: number;
     label?: {
         text: string;
         style?: Partial<BaseTextStyle>;
-        /** The pixel padding for label.
+        /**
+         * The pixel padding for label.
          * @default 5
          */
         padding?: number;
-        /** Can be used for the UI automated test.
-         * It is assigned as a data-qa attribute to an element. */
+        /**
+         * Can be used for the UI automated test.
+         * It is assigned as a data-qa attribute to an element.
+         */
         qa?: string;
     };
     /** Custom data associated with the plot line/band, accessible in tooltip renderer args. */
@@ -253,9 +267,10 @@ export interface AxisPlotLine extends AxisPlot {
     value?: number;
     /** The color of the plot line (hex, rgba). */
     color?: string;
-    /** Pixel width of the plot line.
+    /**
+     * Pixel width of the plot line.
      * @default 1
-     * */
+     */
     width?: number;
     /** Option for line stroke style. */
     dashStyle?: DashStyle;
@@ -281,23 +296,27 @@ export interface AxisPlotBand extends AxisPlot {
     to: number | string | null;
 }
 export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label' | 'custom'> {
-    /** Whether the crosshair should snap to the point or follow the pointer independent of points.
+    /**
+     * Whether the crosshair should snap to the point or follow the pointer independent of points.
      * @default true
      */
     snap?: boolean;
-    /** Enable or disable the axis crosshair.
+    /**
+     * Enable or disable the axis crosshair.
      * @default false
      */
     enabled?: boolean;
 }
 export interface ChartYAxisTitle extends ChartAxisTitle {
-    /** Rotation of the title in degrees.
+    /**
+     * Rotation of the title in degrees.
      * Currently, the available values are only for rotation in multiples of 90 degrees.
      *
      * The default values are -90 for the left axis and 90 for the right.
      */
     rotation?: 0 | 90 | -90;
-    /** Interval of the tick marks(absolute or relative to the chart area).
+    /**
+     * Interval of the tick marks(absolute or relative to the chart area).
      *
      * For a title with rotation = 0, the relative value is calculated based on the chart width, otherwise on the chart height.
      * The default value for the title with rotation: 0 is 20%, for the rest - not defined.
@@ -306,9 +325,8 @@ export interface ChartYAxisTitle extends ChartAxisTitle {
     /**
      * Allows to use any html-tags to display the content.
      * The element will be displayed outside the box of the SVG element.
-     *
      * @default false
-     * */
+     */
     html?: boolean;
 }
 export interface ChartYAxis extends ChartAxis {

package/dist/cjs/types/chart/bar-x.d.ts

@@ -20,7 +20,6 @@ export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     y?: string | number | null;
     /**
      * Corresponding value of axis category.
-     *
      * @deprecated use `x` or `y` instead
      */
     category?: string;
@@ -41,26 +40,25 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
      * @default 0
      */
     borderRadius?: number;
-    /** Whether to stack the values of each series on top of each other.
+    /**
+     * Whether to stack the values of each series on top of each other.
      * Possible values are undefined to disable, "normal" to stack by value or "percent"
-     *
      * @default undefined
-     * */
+     */
     stacking?: 'normal' | 'percent';
     /** This option allows grouping series in a stacked chart */
     stackId?: string;
-    /** Whether to group non-stacked columns or to let them render independent of each other.
+    /**
+     * Whether to group non-stacked columns or to let them render independent of each other.
      * When false columns will be laid out individually and overlap each other.
-     *
      * @default true
-     * */
+     */
     grouping?: boolean;
     dataLabels?: BaseSeries['dataLabels'] & ChartSeriesOptions['dataLabels'] & {
         /**
          * Whether to align the data label inside or outside the box
-         *
          * @default false
-         * */
+         */
         inside?: boolean;
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */
@@ -74,7 +72,6 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
      *
      * - `'skip'`: Omit data points with null values (no bar shown)
      * - `'zero'`: Treat null values as zero
-     *
      * @default 'skip'
      */
     nullMode?: 'zero' | 'skip';

package/dist/cjs/types/chart/bar-y.d.ts

@@ -31,7 +31,6 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
     color?: string;
     /**
      * The width of the border surrounding each bar.
-     *
      * @default 0
      */
     borderWidth?: number;
@@ -44,27 +43,26 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
      * @default 0
      */
     borderRadius?: number;
-    /** Whether to stack the values of each series on top of each other.
+    /**
+     * Whether to stack the values of each series on top of each other.
      * Possible values are undefined to disable, "normal" to stack by value or "percent"
-     *
      * @default undefined
-     * */
+     */
     stacking?: 'normal' | 'percent';
     /** This option allows grouping series in a stacked chart */
     stackId?: string;
-    /** Whether to group non-stacked columns or to let them render independent of each other.
+    /**
+     * Whether to group non-stacked columns or to let them render independent of each other.
      * When false columns will be laid out individually and overlap each other.
-     *
      * @default true
-     * */
+     */
     grouping?: boolean;
     dataLabels?: BaseSeries['dataLabels'] & {
         /**
          * Whether to align the data label inside or outside the box.
          * For charts with a percentage stack, it is always true.
-         *
          * @default false
-         * */
+         */
         inside?: boolean;
     };
     /** Individual series legend options. Has higher priority than legend options in widget data */
@@ -76,7 +74,6 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
      *
      * - `'skip'`: Omit data points with null values (no bar shown)
      * - `'zero'`: Treat null values as zero
-     *
      * @default 'skip'
      */
     nullMode?: 'zero' | 'skip';

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

@@ -25,18 +25,17 @@ export interface BaseDataLabels {
     style?: Partial<BaseTextStyle>;
     /**
      * @default 5
-     * */
+     */
     padding?: number;
     /**
      * @default false
-     * */
+     */
     allowOverlap?: boolean;
     /**
      * Allows to use any html-tags to display the content.
      * The element will be displayed outside the box of the SVG element.
-     *
      * @default false
-     * */
+     */
     html?: boolean;
     /** Formatting settings for labels. */
     format?: ValueFormat;
@@ -46,7 +45,7 @@ export interface BaseSeries {
     visible?: boolean;
     /**
      * Options for the series data labels, appearing next to each data point.
-     * */
+     */
     dataLabels?: BaseDataLabels;
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;
@@ -58,7 +57,6 @@ export interface BaseSeries {
         valueFormat?: ValueFormat;
         /**
          * Enable or disable the visibility of this series in the tooltip.
-         *
          * @default true
          */
         enabled?: boolean;
@@ -75,7 +73,8 @@ export interface BaseSeriesData<T = MeaningfulAny> {
     color?: string;
 }
 export interface BaseSeriesLegend extends ChartLegendItem {
-    /** For multiple series with the same groupId, only one label in the legend will be displayed.
+    /**
+     * For multiple series with the same groupId, only one label in the legend will be displayed.
      * The legend element uses the name and symbol from the first series of the group.
      */
     groupId?: string;