@gravity-ui/charts 1.12.0 → 1.13.0

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

@@ -51,17 +51,6 @@ export const AxisX = React.memo(function AxisX(props) {
             }
             const svgElement = select(ref.current);
             svgElement.selectAll('*').remove();
-            const plotDataAttr = 'data-plot-x';
-            let plotBeforeContainer = null;
-            let plotAfterContainer = null;
-            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
-                plotBeforeContainer = select(plotBeforeRef.current);
-                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
-            }
-            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
-                plotAfterContainer = select(plotAfterRef.current);
-                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
-            }
             if (!axis.visible) {
                 return;
             }
@@ -122,6 +111,17 @@ export const AxisX = React.memo(function AxisX(props) {
                     }
                 });
             }
+            const plotDataAttr = 'data-plot-x';
+            let plotBeforeContainer = null;
+            let plotAfterContainer = null;
+            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+                plotBeforeContainer = select(plotBeforeRef.current);
+                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+                plotAfterContainer = select(plotAfterRef.current);
+                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
             // add plot bands
             if (axis.plotBands.length > 0) {
                 const plotBandDataAttr = 'plot-x-band';
@@ -136,25 +136,38 @@ export const AxisX = React.memo(function AxisX(props) {
                         .join('g')
                         .attr(plotDataAttr, 1)
                         .attr(plotBandDataAttr, 1);
-                    plotBandsSelection
-                        .append('rect')
-                        .attr('x', (band) => {
-                        var _a, _b;
+                    plotBandsSelection.each(function () {
+                        var _a, _b, _c, _e;
+                        const plotBandSelection = select(this);
+                        const band = plotBandSelection.datum();
                         const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
                         const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
                         const startPos = halfBandwidth + Math.min(from, to);
-                        return Math.max(0, startPos);
-                    })
-                        .attr('width', (band) => {
-                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                        const startPos = width - Math.min(from, to);
-                        const endPos = Math.min(Math.abs(to - from), startPos);
-                        return Math.min(endPos, width);
-                    })
-                        .attr('y', 0)
-                        .attr('height', totalHeight)
-                        .attr('fill', (band) => band.color)
-                        .attr('opacity', (band) => band.opacity);
+                        const x = Math.max(0, startPos);
+                        plotBandSelection
+                            .append('rect')
+                            .attr('x', x)
+                            .attr('width', () => {
+                            const endPos = Math.min(Math.abs(to - from), width - Math.min(from, to));
+                            return Math.min(endPos, width);
+                        })
+                            .attr('y', 0)
+                            .attr('height', totalHeight)
+                            .attr('fill', () => band.color)
+                            .attr('opacity', () => band.opacity);
+                        if (band.label.text) {
+                            const labelPadding = (_e = (_c = band.label) === null || _c === void 0 ? void 0 : _c.padding) !== null && _e !== void 0 ? _e : 0;
+                            plotBandSelection
+                                .append('text')
+                                .text(band.label.text)
+                                .style('fill', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontColor) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-size', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-weight', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontWeight) !== null && _b !== void 0 ? _b : null; })
+                                .style('dominant-baseline', 'text-before-edge')
+                                .style('text-anchor', 'end')
+                                .style('transform', `translate(${x + labelPadding}px, ${labelPadding}px) rotate(-90deg)`);
+                        }
+                    });
                 };
                 setPlotBands(plotBeforeContainer, axis.plotBands.filter((d) => d.layerPlacement === 'before'));
                 setPlotBands(plotAfterContainer, axis.plotBands.filter((d) => d.layerPlacement === 'after'));
@@ -174,20 +187,33 @@ export const AxisX = React.memo(function AxisX(props) {
                         .attr(plotDataAttr, 1)
                         .attr(plotLineDataAttr, 1);
                     const lineGenerator = line();
-                    plotLinesSelection
-                        .append('path')
-                        .attr('d', (plotLine) => {
+                    plotLinesSelection.each(function () {
+                        const itemSelection = select(this);
+                        const plotLine = itemSelection.datum();
                         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);
+                        itemSelection
+                            .append('path')
+                            .attr('d', lineGenerator(points))
+                            .attr('stroke', plotLine.color)
+                            .attr('stroke-width', plotLine.width)
+                            .attr('stroke-dasharray', getLineDashArray(plotLine.dashStyle, plotLine.width))
+                            .attr('opacity', plotLine.opacity);
+                        if (plotLine.label.text) {
+                            itemSelection
+                                .append('text')
+                                .text(plotLine.label.text)
+                                .style('fill', () => { var _a; return (_a = plotLine.label.style.fontColor) !== null && _a !== void 0 ? _a : null; })
+                                .attr('font-size', plotLine.label.style.fontSize)
+                                .style('font-weight', () => { var _a; return (_a = plotLine.label.style.fontWeight) !== null && _a !== void 0 ? _a : null; })
+                                .style('dominant-baseline', 'text-after-edge')
+                                .style('text-anchor', 'end')
+                                .style('transform', `translate(${plotLineValue - plotLine.label.padding}px, ${plotLine.label.padding}px) rotate(-90deg)`);
+                        }
+                    });
                 };
                 setPlotLines(plotBeforeContainer, axis.plotLines.filter((d) => d.layerPlacement === 'before'));
                 setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));

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

@@ -172,16 +172,28 @@ export const AxisY = (props) => {
                 let elementY = 0;
                 axisItem
                     .selectAll('.tick')
-                    .filter(function (_d, tickIndex) {
-                    const tickNode = this;
-                    const r = tickNode.getBoundingClientRect();
-                    if (r.bottom > elementY && tickIndex !== 0) {
+                    .nodes()
+                    .map((element) => {
+                    const r = element.getBoundingClientRect();
+                    return {
+                        top: r.top,
+                        bottom: r.bottom,
+                        node: element,
+                    };
+                }, {})
+                    .sort((item1, item2) => {
+                    return item2.top - item1.top;
+                })
+                    .filter(function ({ top, bottom }, tickIndex) {
+                    if (bottom > elementY && tickIndex !== 0) {
                         return true;
                     }
-                    elementY = r.top - d.labels.padding;
+                    elementY = top - d.labels.padding;
                     return false;
                 })
-                    .remove();
+                    .forEach((item) => {
+                    item.node.remove();
+                });
             }
             if (d.plotBands.length > 0) {
                 const plotBandDataAttr = `data-plot-y-band-${index}`;
@@ -197,25 +209,36 @@ export const AxisY = (props) => {
                         .attr(plotDataAttr, 1)
                         .attr(plotBandDataAttr, 1)
                         .style('transform', getAxisPlotsPosition(d, split));
-                    plotBandsSelection
-                        .append('rect')
-                        .attr('x', 0)
-                        .attr('width', width)
-                        .attr('y', (band) => {
-                        var _a, _b;
+                    plotBandsSelection.each(function () {
+                        var _a, _b, _c, _e;
+                        const plotBandSelection = select(this);
+                        const band = plotBandSelection.datum();
                         const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
                         const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
                         const startPos = halfBandwidth + Math.min(from, to);
-                        return Math.max(0, startPos);
-                    })
-                        .attr('height', (band) => {
-                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
-                        const startPos = height - Math.min(from, to);
-                        const endPos = Math.min(Math.abs(to - from), startPos);
-                        return Math.min(endPos, height);
-                    })
-                        .attr('fill', (band) => band.color)
-                        .attr('opacity', (band) => band.opacity);
+                        const endPos = Math.min(Math.abs(to - from), height - Math.min(from, to));
+                        const y = Math.max(0, startPos);
+                        plotBandSelection
+                            .append('rect')
+                            .attr('x', 0)
+                            .attr('width', width)
+                            .attr('y', y)
+                            .attr('height', Math.min(endPos, height))
+                            .attr('fill', () => band.color)
+                            .attr('opacity', () => band.opacity);
+                        if (band.label.text) {
+                            const labelPadding = (_e = (_c = band.label) === null || _c === void 0 ? void 0 : _c.padding) !== null && _e !== void 0 ? _e : 0;
+                            plotBandSelection
+                                .append('text')
+                                .text(band.label.text)
+                                .style('fill', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontColor) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-size', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : null; })
+                                .style('font-weight', () => { var _a, _b; return (_b = (_a = band.label.style) === null || _a === void 0 ? void 0 : _a.fontWeight) !== null && _b !== void 0 ? _b : null; })
+                                .style('dominant-baseline', 'text-before-edge')
+                                .attr('x', labelPadding)
+                                .attr('y', y + labelPadding);
+                        }
+                    });
                 };
                 setPlotBands(plotBeforeContainer, d.plotBands.filter((item) => item.layerPlacement === 'before'));
                 setPlotBands(plotAfterContainer, d.plotBands.filter((item) => item.layerPlacement === 'after'));
@@ -234,20 +257,32 @@ export const AxisY = (props) => {
                         .attr(plotDataAttr, 1)
                         .attr(plotLineDataAttr, 1)
                         .style('transform', getAxisPlotsPosition(d, split));
-                    plotLinesSelection
-                        .append('path')
-                        .attr('d', (plotLine) => {
+                    plotLinesSelection.each(function () {
+                        const itemSelection = select(this);
+                        const plotLine = itemSelection.datum();
                         const plotLineValue = Number(axisScale(plotLine.value));
                         const points = [
                             [0, plotLineValue],
                             [width, plotLineValue],
                         ];
-                        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);
+                        itemSelection
+                            .append('path')
+                            .attr('d', lineGenerator(points))
+                            .attr('stroke', plotLine.color)
+                            .attr('stroke-width', plotLine.width)
+                            .attr('stroke-dasharray', getLineDashArray(plotLine.dashStyle, plotLine.width))
+                            .attr('opacity', plotLine.opacity);
+                        if (plotLine.label.text) {
+                            itemSelection
+                                .append('text')
+                                .text(plotLine.label.text)
+                                .style('fill', () => { var _a; return (_a = plotLine.label.style.fontColor) !== null && _a !== void 0 ? _a : null; })
+                                .attr('font-size', plotLine.label.style.fontSize)
+                                .style('font-weight', () => { var _a; return (_a = plotLine.label.style.fontWeight) !== null && _a !== void 0 ? _a : null; })
+                                .attr('x', plotLine.label.padding)
+                                .attr('y', plotLineValue - plotLine.label.padding);
+                        }
+                    });
                 };
                 setPlotLines(plotBeforeContainer, d.plotLines.filter((item) => item.layerPlacement === 'before'));
                 setPlotLines(plotAfterContainer, d.plotLines.filter((item) => item.layerPlacement === 'after'));
@@ -317,6 +352,7 @@ export const AxisY = (props) => {
         lineGenerator,
         plotBeforeRef,
         plotAfterRef,
+        topLimit,
     ]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -1,5 +1,6 @@
 .gcharts-chart {
   --gcharts-data-labels: var(--g-color-text-secondary);
+  --gcharts-shape-border-color: var(--g-color-base-background);
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;

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

@@ -26,8 +26,8 @@ export function useChartInnerProps(props) {
     }, [data.series.options]);
     const [zoomState, setZoomState] = React.useState({});
     const sortedSeriesData = React.useMemo(() => {
-        return getSortedSeriesData(data.series.data);
-    }, [data.series.data]);
+        return getSortedSeriesData({ seriesData: data.series.data, yAxes: data.yAxis });
+    }, [data.series.data, data.yAxis]);
     const { zoomedSeriesData, zoomedShapesSeriesData } = React.useMemo(() => {
         return getZoomedSeriesData({
             seriesData: sortedSeriesData,
@@ -54,7 +54,7 @@ export function useChartInnerProps(props) {
     const { preparedSeries, preparedLegend, handleLegendItemClick } = useSeries({
         colors,
         legend: data.legend,
-        originalSeriesData: data.series.data,
+        originalSeriesData: sortedSeriesData,
         seriesData: zoomedSeriesData,
         seriesOptions: data.series.options,
     });

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

@@ -17,7 +17,7 @@ export const DefaultTooltipContent = ({ hovered, xAxis, yAxis, valueFormat, tota
             var _a;
             const { data, series, closest } = seriesItem;
             const id = `${get(series, 'id')}_${i}`;
-            const color = get(series, 'color');
+            const color = get(data, 'color') || get(series, 'color');
             const active = closest && hovered.length > 1;
             const striped = (i + 1) % 2 === 0;
             switch (series.type) {

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

@@ -3,7 +3,7 @@ import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 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 } from '../utils';
+import { getBarYLayoutForNumericScale, groupBarYDataByYValue } from '../utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function isNumericalArrayData(data) {
     return data.every((d) => typeof d === 'number' || d === null);
@@ -28,11 +28,19 @@ function getYScaleRange(args) {
         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,
-                    series: barYSeries,
+                    groupedData,
                     seriesOptions: seriesOptions,
                 });
                 if (dataLength > 1) {
@@ -51,12 +59,10 @@ function getYScaleRange(args) {
                         return acc + count;
                     }, 0);
                     const offset = (barSize * Math.max(offsetMultiplier, 1)) / 2;
-                    const start = boundsHeight - offset;
-                    const end = boundsHeight * axis.maxPadding + offset;
-                    return [start, end];
+                    range = [range[0] - offset, range[1] + offset];
                 }
             }
-            return [boundsHeight, boundsHeight * axis.maxPadding];
+            return range;
         }
         case 'category': {
             return [boundsHeight, 0];
@@ -151,6 +157,13 @@ export function createXScale(args) {
     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': {

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;

package/dist/cjs/hooks/useChartOptions/utils.js

@@ -0,0 +1,27 @@
+import { ascending, descending, reverse, sort } from 'd3';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
+export function prepareAxisPlotLabel(d) {
+    var _a, _b, _c, _d, _e;
+    return {
+        text: (_b = (_a = d.label) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
+        style: Object.assign({ fontSize: DEFAULT_AXIS_LABEL_FONT_SIZE, fontColor: 'var(--g-color-text-secondary)' }, (_c = d.label) === null || _c === void 0 ? void 0 : _c.style),
+        padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
+    };
+}
+export function getAxisCategories(axis) {
+    const categories = axis === null || axis === void 0 ? void 0 : axis.categories;
+    if (categories) {
+        switch (axis.order) {
+            case 'reverse': {
+                return reverse(categories);
+            }
+            case 'sortAsc': {
+                return sort(categories, (a, b) => ascending(a, b));
+            }
+            case 'sortDesc': {
+                return sort(categories, (a, b) => descending(a, b));
+            }
+        }
+    }
+    return categories;
+}

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

@@ -2,6 +2,7 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
+import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
     const scale = createXScale({ axis, series: seriesData, boundsWidth: width });
     const tickCount = getTicksCount({ axis, range: width });
@@ -69,7 +70,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
         },
         lineColor: get(xAxis, 'lineColor'),
-        categories: get(xAxis, 'categories'),
+        categories: getAxisCategories(xAxis),
         timestamps: get(xAxis, 'timestamps'),
         title: {
             text: titleText,
@@ -98,6 +99,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            label: prepareAxisPlotLabel(d),
         })),
         plotBands: get(xAxis, 'plotBands', []).map((d) => ({
             color: get(d, 'color', 'var(--g-color-base-brand)'),
@@ -105,6 +107,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             from: get(d, 'from', 0),
             to: get(d, 'to', 0),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            label: prepareAxisPlotLabel(d),
         })),
         crosshair: {
             enabled: get(xAxis, 'crosshair.enabled', axisCrosshairDefaults.enabled),
@@ -116,6 +119,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             opacity: get(xAxis, 'crosshair.opacity', axisCrosshairDefaults.opacity),
         },
         visible: get(xAxis, 'visible', true),
+        order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
     };
     const { height, rotation } = await getLabelSettings({
         axis: preparedXAxis,

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

@@ -2,6 +2,7 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
+import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
     const { axis, seriesData, seriesOptions } = args;
     if (!axis.labels.enabled) {
@@ -78,7 +79,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
             },
             lineColor: get(axisItem, 'lineColor'),
-            categories: get(axisItem, 'categories'),
+            categories: getAxisCategories(axisItem),
             timestamps: get(axisItem, 'timestamps'),
             title: {
                 text: titleText,
@@ -108,6 +109,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                label: prepareAxisPlotLabel(d),
             })),
             plotBands: get(axisItem, 'plotBands', []).map((d) => ({
                 color: get(d, 'color', 'var(--g-color-base-brand)'),
@@ -115,6 +117,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 from: get(d, 'from', 0),
                 to: get(d, 'to', 0),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                label: prepareAxisPlotLabel(d),
             })),
             crosshair: {
                 enabled: get(axisItem, 'crosshair.enabled', axisCrosshairDefaults.enabled),
@@ -126,6 +129,7 @@ export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, })
                 opacity: get(axisItem, 'crosshair.opacity', axisCrosshairDefaults.opacity),
             },
             visible: get(axisItem, 'visible', true),
+            order: axisItem.order,
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = await getAxisLabelMaxWidth({

package/dist/cjs/hooks/useSeries/prepare-area.d.ts

@@ -6,8 +6,8 @@ export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
     radius: number;
-    borderColor: string;
     borderWidth: number;
+    borderColor: string;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/dist/cjs/hooks/useSeries/prepare-bar-y.d.ts

@@ -20,8 +20,11 @@ export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<
         maxWidth: number;
         html: boolean;
         format?: import("../../types").ValueFormat;
+        allowOverlap: boolean;
     };
     borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
 } & {
     color: string;
     name: string;

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

@@ -4,7 +4,7 @@ import { getLabelsSize, getUniqId } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 async function prepareDataLabels(series) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     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);
@@ -25,12 +25,13 @@ async function prepareDataLabels(series) {
         maxWidth,
         html,
         format: (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
+        allowOverlap: (_d = (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) !== null && _d !== void 0 ? _d : false,
     };
 }
 export function prepareBarYSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return Promise.all(seriesList.map(async (series) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -49,6 +50,8 @@ export function prepareBarYSeries(args) {
             dataLabels: await prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
             borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
+            borderWidth: (_f = (_d = series.borderWidth) !== null && _d !== void 0 ? _d : (_e = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _e === void 0 ? void 0 : _e.borderWidth) !== null && _f !== void 0 ? _f : 0,
+            borderColor: (_j = (_g = series.borderColor) !== null && _g !== void 0 ? _g : (_h = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _h === void 0 ? void 0 : _h.borderColor) !== null && _j !== void 0 ? _j : 'var(--gcharts-shape-border-color)',
         };
     }));
 }

package/dist/cjs/hooks/useSeries/prepare-line.d.ts

@@ -8,8 +8,8 @@ export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
     radius: number;
-    borderColor: string;
     borderWidth: number;
+    borderColor: string;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/dist/cjs/hooks/useSeries/prepare-radar.d.ts

@@ -10,8 +10,8 @@ export declare const DEFAULT_MARKER: {
     enabled: boolean;
     radius: number;
     symbol: `${import("../../constants").SymbolType}`;
-    borderColor: string;
     borderWidth: number;
+    borderColor: string;
 };
 export declare function prepareRadarSeries(args: PrepareRadarSeriesArgs): PreparedRadarSeries[];
 export {};

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

@@ -130,8 +130,11 @@ export type PreparedBarYSeries = {
         maxWidth: number;
         html: boolean;
         format?: ValueFormat;
+        allowOverlap: boolean;
     };
     borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
 } & BasePreparedSeries;
 export type PreparedPieSeries = {
     type: PieSeries['type'];