@gravity-ui/charts 1.11.4 → 1.13.0

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.js

@@ -0,0 +1,126 @@
+import get from 'lodash/get';
+import { i18n } from '../../../i18n';
+import { getDataCategoryValue } from '../../../utils';
+import { getFormattedValue } from '../../../utils/chart/format';
+const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+function getRowData(fieldName, data, axis) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'category': {
+            const categories = get(axis, 'categories', []);
+            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
+        }
+        default: {
+            return get(data, fieldName);
+        }
+    }
+}
+export function getXRowData(data, xAxis) {
+    return getRowData('x', data, xAxis);
+}
+function getYRowData(data, yAxis) {
+    return getRowData('y', data, yAxis);
+}
+export function getDefaultValueFormat({ axis, }) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'linear':
+        case 'logarithmic': {
+            return {
+                type: 'number',
+            };
+        }
+        case 'datetime': {
+            return {
+                type: 'date',
+                format: DEFAULT_DATE_FORMAT,
+            };
+        }
+        default:
+            return undefined;
+    }
+}
+export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
+    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')) {
+        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
+        return getFormattedValue({
+            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
+            format,
+        });
+    }
+    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
+    return getFormattedValue({
+        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
+        format,
+    });
+};
+export function getHoveredValues(args) {
+    const { hovered, xAxis, yAxis } = args;
+    return hovered.map((seriesItem) => {
+        var _a;
+        const { data, series } = seriesItem;
+        switch (series.type) {
+            case 'area':
+            case 'line':
+            case 'bar-x':
+            case 'scatter': {
+                return getYRowData(data, yAxis);
+            }
+            case 'bar-y': {
+                return getXRowData(data, xAxis);
+            }
+            case 'pie':
+            case 'radar':
+            case 'treemap': {
+                const seriesData = data;
+                return seriesData.value;
+            }
+            case 'sankey': {
+                const { target, data: source } = seriesItem;
+                return (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+            }
+            case 'waterfall': {
+                return getYRowData(data, yAxis);
+            }
+            default: {
+                return undefined;
+            }
+        }
+    });
+}
+export function getBuiltInAggregatedValue(args) {
+    const { aggregation, values } = args;
+    switch (aggregation) {
+        case 'sum':
+            return values.reduce((acc, value) => {
+                return acc + (typeof value === 'number' ? value : 0);
+            }, 0);
+        default:
+            return undefined;
+    }
+}
+export function getBuiltInAggregationLabel(args) {
+    const { aggregation } = args;
+    switch (aggregation) {
+        case 'sum':
+            return i18n('tooltip', 'label_totals_sum');
+        default:
+            return '';
+    }
+}
+export function getPreparedAggregation(args) {
+    const { hovered, totals, xAxis, yAxis } = args;
+    const aggregation = totals === null || totals === void 0 ? void 0 : totals.aggregation;
+    if (typeof aggregation === 'string') {
+        return aggregation;
+    }
+    if (typeof aggregation === 'function') {
+        return () => aggregation({ hovered, xAxis, yAxis });
+    }
+    return 'sum';
+}

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('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer, valueFormat: tooltip.valueFormat, totals: tooltip.totals })))) : null;
 };

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

@@ -17,18 +17,30 @@
 .gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
+  column-gap: 8px;
   padding: 2px 14px;
   font-size: 12px;
 }
+.gcharts-tooltip__content-row_striped {
+  background-color: var(--g-color-base-generic);
+}
 .gcharts-tooltip__content-row_active {
   font-weight: 600;
   background-color: var(--g-color-base-info-medium);
 }
-.gcharts-tooltip__color {
+.gcharts-tooltip__content-row-color {
   display: inline-block;
   width: 16px;
   height: 8px;
-  margin-inline-end: 8px;
   border-radius: 2px;
   background-color: #dddddd;
+}
+.gcharts-tooltip__content-row-value {
+  margin-inline-start: auto;
+}
+.gcharts-tooltip__content-row-totals {
+  color: var(--g-color-text-complementary);
+}
+.gcharts-tooltip__content-row-totals-divider {
+  margin-block: 5px 5px;
 }

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

@@ -0,0 +1,30 @@
+import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../types';
+export type HoveredValue = string | number | null | undefined;
+export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
+export declare function getDefaultValueFormat({ axis, }: {
+    axis?: ChartXAxis | ChartYAxis | null;
+}): ValueFormat | undefined;
+export declare const getMeasureValue: ({ data, xAxis, yAxis, valueFormat, }: {
+    data: TooltipDataChunk[];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+    valueFormat?: ValueFormat;
+}) => string | null;
+export declare function getHoveredValues(args: {
+    hovered: TooltipDataChunk[];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+}): HoveredValue[];
+export declare function getBuiltInAggregatedValue(args: {
+    aggregation: ChartTooltipTotalsBuiltInAggregation;
+    values: HoveredValue[];
+}): number | undefined;
+export declare function getBuiltInAggregationLabel(args: {
+    aggregation: ChartTooltipTotalsBuiltInAggregation;
+}): string;
+export declare function getPreparedAggregation(args: {
+    hovered: TooltipDataChunk[];
+    totals?: ChartTooltip['totals'];
+    xAxis?: ChartXAxis | null;
+    yAxis?: ChartYAxis;
+}): ChartTooltipTotalsBuiltInAggregation | (() => ChartTooltipTotalsAggregationValue);

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

@@ -0,0 +1,126 @@
+import get from 'lodash/get';
+import { i18n } from '../../i18n';
+import { getDataCategoryValue } from '../../utils';
+import { getFormattedValue } from '../../utils/chart/format';
+const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+function getRowData(fieldName, data, axis) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'category': {
+            const categories = get(axis, 'categories', []);
+            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
+        }
+        default: {
+            return get(data, fieldName);
+        }
+    }
+}
+export function getXRowData(data, xAxis) {
+    return getRowData('x', data, xAxis);
+}
+function getYRowData(data, yAxis) {
+    return getRowData('y', data, yAxis);
+}
+export function getDefaultValueFormat({ axis, }) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'linear':
+        case 'logarithmic': {
+            return {
+                type: 'number',
+            };
+        }
+        case 'datetime': {
+            return {
+                type: 'date',
+                format: DEFAULT_DATE_FORMAT,
+            };
+        }
+        default:
+            return undefined;
+    }
+}
+export const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
+    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')) {
+        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
+        return getFormattedValue({
+            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
+            format,
+        });
+    }
+    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
+    return getFormattedValue({
+        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
+        format,
+    });
+};
+export function getHoveredValues(args) {
+    const { hovered, xAxis, yAxis } = args;
+    return hovered.map((seriesItem) => {
+        var _a;
+        const { data, series } = seriesItem;
+        switch (series.type) {
+            case 'area':
+            case 'line':
+            case 'bar-x':
+            case 'scatter': {
+                return getYRowData(data, yAxis);
+            }
+            case 'bar-y': {
+                return getXRowData(data, xAxis);
+            }
+            case 'pie':
+            case 'radar':
+            case 'treemap': {
+                const seriesData = data;
+                return seriesData.value;
+            }
+            case 'sankey': {
+                const { target, data: source } = seriesItem;
+                return (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+            }
+            case 'waterfall': {
+                return getYRowData(data, yAxis);
+            }
+            default: {
+                return undefined;
+            }
+        }
+    });
+}
+export function getBuiltInAggregatedValue(args) {
+    const { aggregation, values } = args;
+    switch (aggregation) {
+        case 'sum':
+            return values.reduce((acc, value) => {
+                return acc + (typeof value === 'number' ? value : 0);
+            }, 0);
+        default:
+            return undefined;
+    }
+}
+export function getBuiltInAggregationLabel(args) {
+    const { aggregation } = args;
+    switch (aggregation) {
+        case 'sum':
+            return i18n('tooltip', 'label_totals_sum');
+        default:
+            return '';
+    }
+}
+export function getPreparedAggregation(args) {
+    const { hovered, totals, xAxis, yAxis } = args;
+    const aggregation = totals === null || totals === void 0 ? void 0 : totals.aggregation;
+    if (typeof aggregation === 'string') {
+        return aggregation;
+    }
+    if (typeof aggregation === 'function') {
+        return () => aggregation({ hovered, xAxis, yAxis });
+    }
+    return 'sum';
+}

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

@@ -0,0 +1,6 @@
+export declare const AXIS_TYPE: {
+    readonly CATEGORY: "category";
+    readonly DATETIME: "datetime";
+    readonly LINEAR: "linear";
+    readonly LOGARITHMIC: "logarithmic";
+};

package/dist/cjs/constants/axis.js

@@ -0,0 +1,6 @@
+export const AXIS_TYPE = {
+    CATEGORY: 'category',
+    DATETIME: 'datetime',
+    LINEAR: 'linear',
+    LOGARITHMIC: 'logarithmic',
+};

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

@@ -1,8 +1,10 @@
-export * from './defaults';
-export * from './misc';
+export * from './axis';
 export * from './chart-types';
-export * from './line-styles';
-export * from './symbol-types';
+export * from './defaults';
 export * from './layout-algorithms';
+export * from './line-styles';
+export * from './misc';
 export * from './palette';
+export * from './symbol-types';
+export * from './tooltip';
 export * from './typography';

package/dist/cjs/constants/index.js

@@ -1,8 +1,10 @@
-export * from './defaults';
-export * from './misc';
+export * from './axis';
 export * from './chart-types';
-export * from './line-styles';
-export * from './symbol-types';
+export * from './defaults';
 export * from './layout-algorithms';
+export * from './line-styles';
+export * from './misc';
 export * from './palette';
+export * from './symbol-types';
+export * from './tooltip';
 export * from './typography';

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

@@ -0,0 +1,3 @@
+export declare const TOOLTIP_TOTALS_BUILT_IN_AGGREGATION: {
+    readonly SUM: "sum";
+};

package/dist/cjs/constants/tooltip.js

@@ -0,0 +1,3 @@
+export const TOOLTIP_TOTALS_BUILT_IN_AGGREGATION = {
+    SUM: 'sum',
+};

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -1,13 +1,14 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
 import type { ChartAxis, ChartSeries } from '../../types';
 import type { PreparedAxis } from '../useChartOptions/types';
-import type { PreparedSeries } from '../useSeries/types';
+import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedSplit } from '../useSplit/types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
+    seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
@@ -18,8 +19,18 @@ type ReturnValue = {
     xScale?: ChartScale;
     yScale?: ChartScale[];
 };
-export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
-export declare function createXScale(axis: PreparedAxis | ChartAxis, series: (PreparedSeries | ChartSeries)[], boundsWidth: number, hasZoomX?: boolean): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+export declare function createYScale(args: {
+    axis: PreparedAxis;
+    boundsHeight: number;
+    series: (PreparedSeries | ChartSeries)[];
+    seriesOptions: PreparedSeriesOptions;
+}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+export declare function createXScale(args: {
+    axis: PreparedAxis | ChartAxis;
+    boundsWidth: number;
+    series: (PreparedSeries | ChartSeries)[];
+    hasZoomX?: boolean;
+}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**
  * Uses to create scales for axis related series
  */

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
-import { DEFAULT_AXIS_TYPE } from '../../constants';
+import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
-const isNumericalArrayData = (data) => {
+function isNumericalArrayData(data) {
     return data.every((d) => typeof d === 'number' || d === null);
-};
-const filterCategoriesByVisibleSeries = (args) => {
+}
+function filterCategoriesByVisibleSeries(args) {
     const { axisDirection, categories, series } = args;
     const visibleCategories = new Set();
     series.forEach((s) => {
@@ -18,18 +19,67 @@ const filterCategoriesByVisibleSeries = (args) => {
         }
     });
     return categories.filter((c) => visibleCategories.has(c));
-};
-export function createYScale(axis, series, boundsHeight) {
-    const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
+}
+// axis is validated in `validation/index.ts`, so the value of `axis.type` is definitely valid.
+// eslint-disable-next-line consistent-return
+function getYScaleRange(args) {
+    const { axis, boundsHeight, series, seriesOptions } = args;
+    switch (axis.type) {
+        case 'datetime':
+        case 'linear':
+        case 'logarithmic': {
+            let range = [boundsHeight, boundsHeight * axis.maxPadding];
+            switch (axis.order) {
+                case 'sortDesc':
+                case 'reverse': {
+                    range.reverse();
+                }
+            }
+            const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
+            if (barYSeries.length) {
+                const groupedData = groupBarYDataByYValue(barYSeries, [axis]);
+                const { barSize, dataLength } = getBarYLayoutForNumericScale({
+                    plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
+                    groupedData,
+                    seriesOptions: seriesOptions,
+                });
+                if (dataLength > 1) {
+                    const alreadyCountedStackingIds = new Set();
+                    const offsetMultiplier = barYSeries.reduce((acc, s) => {
+                        let count = 0;
+                        if (s.stackId) {
+                            if (!alreadyCountedStackingIds.has(s.stackId)) {
+                                alreadyCountedStackingIds.add(s.stackId);
+                                count = 1;
+                            }
+                        }
+                        else {
+                            count = 1;
+                        }
+                        return acc + count;
+                    }, 0);
+                    const offset = (barSize * Math.max(offsetMultiplier, 1)) / 2;
+                    range = [range[0] - offset, range[1] + offset];
+                }
+            }
+            return range;
+        }
+        case 'category': {
+            return [boundsHeight, 0];
+        }
+    }
+}
+export function createYScale(args) {
+    const { axis, boundsHeight, series, seriesOptions } = args;
     const yMinProps = get(axis, 'min');
     const yMaxProps = get(axis, 'max');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
-    switch (yType) {
+    const range = getYScaleRange({ axis, boundsHeight, series, seriesOptions });
+    switch (axis.type) {
         case 'linear':
         case 'logarithmic': {
             const domain = getDomainDataYBySeries(series);
-            const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
                 const yMin = typeof yMinProps === 'number' ? yMinProps : yMinDomain;
@@ -41,7 +91,7 @@ export function createYScale(axis, series, boundsHeight) {
                     const hasSeriesWithVolumeOnYAxis = series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type));
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
-                const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
+                const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 return scaleFn().domain([yMin, yMax]).range(range).nice();
             }
             break;
@@ -53,12 +103,11 @@ export function createYScale(axis, series, boundsHeight) {
                     categories: yCategories,
                     series: series,
                 });
-                return scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+                return scaleBand().domain(filteredCategories).range(range);
             }
             break;
         }
         case 'datetime': {
-            const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (yTimestamps) {
                 const [yMinTimestamp, yMaxTimestamp] = extent(yTimestamps);
                 const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
@@ -74,7 +123,6 @@ export function createYScale(axis, series, boundsHeight) {
                     return scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
             }
-            break;
         }
     }
     throw new Error('Failed to create yScale');
@@ -97,7 +145,8 @@ function calculateXAxisPadding(series) {
     return result;
 }
 // eslint-disable-next-line complexity
-export function createXScale(axis, series, boundsWidth, hasZoomX) {
+export function createXScale(args) {
+    const { axis, boundsWidth, series, hasZoomX } = args;
     const xMinProps = get(axis, 'min');
     const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
@@ -108,6 +157,13 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth - xAxisMaxPadding];
     const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
+    switch (axis.order) {
+        case 'sortDesc':
+        case 'reverse': {
+            xRange.reverse();
+            xRangeZoom.reverse();
+        }
+    }
     switch (xType) {
         case 'linear':
         case 'logarithmic': {
@@ -193,13 +249,15 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX } = args;
+    const { boundsWidth, boundsHeight, hasZoomX, series, seriesOptions, split, xAxis, yAxis } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
-        xScale: xAxis ? createXScale(xAxis, visibleSeries, boundsWidth, hasZoomX) : undefined,
+        xScale: xAxis
+            ? createXScale({ axis: xAxis, boundsWidth, series: visibleSeries, hasZoomX })
+            : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {
                 const seriesAxisIndex = get(s, 'yAxis', 0);
@@ -207,7 +265,12 @@ const createScales = (args) => {
             });
             const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
             const axisHeight = getAxisHeight({ boundsHeight, split });
-            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, axisHeight);
+            return createYScale({
+                axis,
+                boundsHeight: axisHeight,
+                series: visibleAxisSeries.length ? visibleAxisSeries : axisSeries,
+                seriesOptions,
+            });
         }),
     };
 };
@@ -215,7 +278,7 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY } = args;
+    const { boundsWidth, boundsHeight, hasZoomX, hasZoomY, series, seriesOptions, split, xAxis, yAxis, } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -224,14 +287,15 @@ export const useAxisScales = (args) => {
             ({ xScale, yScale } = createScales({
                 boundsWidth,
                 boundsHeight,
+                hasZoomX,
+                hasZoomY,
                 series,
+                seriesOptions,
+                split,
                 xAxis,
                 yAxis,
-                split,
-                hasZoomX,
-                hasZoomY,
             }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY]);
+    }, [boundsWidth, boundsHeight, hasZoomX, hasZoomY, series, seriesOptions, split, xAxis, yAxis]);
 };

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

@@ -22,6 +22,11 @@ export type PreparedAxisPlotLine = {
     dashStyle: DashStyle;
     opacity: number;
     layerPlacement: PlotLayerPlacement;
+    label: {
+        text: string;
+        style: BaseTextStyle;
+        padding: number;
+    };
 };
 export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
     type: ChartAxisType;

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

@@ -0,0 +1,11 @@
+import type { AxisPlot, ChartYAxis } from '../../types';
+export declare function prepareAxisPlotLabel(d: AxisPlot): {
+    text: string;
+    style: {
+        fontSize: string;
+        fontWeight?: string;
+        fontColor: string;
+    };
+    padding: number;
+};
+export declare function getAxisCategories(axis?: ChartYAxis): string[] | undefined;