@gravity-ui/chartkit 5.4.0 → 5.6.0

package/build/plugins/d3/examples/scatter/TwoYAxis.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TwoYAxis: () => React.JSX.Element;

package/build/plugins/d3/examples/scatter/TwoYAxis.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import marsWeatherData from '../mars-weather';
+export const TwoYAxis = () => {
+    const data = marsWeatherData;
+    const minTempData = data.map((d) => ({
+        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
+        y: d.min_temp,
+    }));
+    const maxTempData = data.map((d) => ({
+        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
+        y: d.max_temp,
+    }));
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'scatter',
+                    data: minTempData,
+                    name: 'Min Temperature',
+                    yAxis: 0,
+                },
+                {
+                    type: 'scatter',
+                    data: maxTempData,
+                    name: 'Max Temperature',
+                    yAxis: 1,
+                },
+            ],
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'Min',
+                },
+            },
+            {
+                title: {
+                    text: 'Max',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Terrestrial date',
+            },
+            ticks: { pixelInterval: 200 },
+        },
+        title: {
+            text: 'Mars weather',
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/renderer/components/AxisY.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { ChartScale, PreparedAxis } from '../hooks';
 type Props = {
     axises: PreparedAxis[];
+    scale: ChartScale[];
     width: number;
     height: number;
-    scale: ChartScale;
 };
 export declare const AxisY: ({ axises, width, height, scale }: Props) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import { axisLeft, select } from 'd3';
+import { axisLeft, axisRight, line, select } from 'd3';
 import { block } from '../../../../utils/cn';
 import { calculateCos, calculateSin, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
 const b = block('d3-axis');
-function transformLabel(node, axis) {
+function transformLabel(args) {
+    const { node, axis } = args;
     let topOffset = axis.labels.lineHeight / 2;
-    let leftOffset = -axis.labels.margin;
+    let leftOffset = axis.labels.margin;
+    if (axis.position === 'left') {
+        leftOffset = leftOffset * -1;
+    }
     if (axis.labels.rotation) {
         if (axis.labels.rotation > 0) {
             leftOffset -= axis.labels.lineHeight * calculateSin(axis.labels.rotation);
@@ -24,92 +28,121 @@ function transformLabel(node, axis) {
     }
     return `translate(${leftOffset}px, ${topOffset}px)`;
 }
+function getAxisGenerator(args) {
+    const { preparedAxis, axisGenerator: generator, width, height, scale } = args;
+    const tickSize = preparedAxis.grid.enabled ? width * -1 : 0;
+    const step = getClosestPointsRange(preparedAxis, getScaleTicks(scale));
+    let axisGenerator = generator
+        .tickSize(tickSize)
+        .tickPadding(preparedAxis.labels.margin)
+        .tickFormat((value) => {
+        if (!preparedAxis.labels.enabled) {
+            return '';
+        }
+        return formatAxisTickLabel({
+            axis: preparedAxis,
+            value,
+            step,
+        });
+    });
+    const ticksCount = getTicksCount({ axis: preparedAxis, range: height });
+    if (ticksCount) {
+        axisGenerator = axisGenerator.ticks(ticksCount);
+    }
+    return axisGenerator;
+}
 export const AxisY = ({ axises, width, height, scale }) => {
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
-        const axis = axises[0];
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const tickSize = axis.grid.enabled ? width * -1 : 0;
-        const step = getClosestPointsRange(axis, getScaleTicks(scale));
-        let yAxisGenerator = axisLeft(scale)
-            .tickSize(tickSize)
-            .tickPadding(axis.labels.margin)
-            .tickFormat((value) => {
-            if (!axis.labels.enabled) {
-                return '';
-            }
-            return formatAxisTickLabel({
-                axis,
-                value,
-                step,
+        const axisSelection = svgElement
+            .selectAll('axis')
+            .data(axises)
+            .join('g')
+            .attr('class', b())
+            .style('transform', (_d, index) => (index === 0 ? '' : `translate(${width}px, 0)`));
+        axisSelection.each((d, index, node) => {
+            const seriesScale = scale[index];
+            const axisItem = select(node[index]);
+            const yAxisGenerator = getAxisGenerator({
+                axisGenerator: index === 0
+                    ? axisLeft(seriesScale)
+                    : axisRight(seriesScale),
+                preparedAxis: d,
+                height,
+                width,
+                scale: seriesScale,
             });
+            yAxisGenerator(axisItem);
+            if (d.labels.enabled) {
+                const tickTexts = axisItem
+                    .selectAll('.tick text')
+                    // The offset must be applied before the labels are rotated.
+                    // Therefore, we reset the values and make an offset in transform  attribute.
+                    // FIXME: give up axisLeft(d3) and switch to our own generation method
+                    .attr('x', null)
+                    .attr('dy', null)
+                    .style('font-size', d.labels.style.fontSize)
+                    .style('transform', function () {
+                    return transformLabel({ node: this, axis: d });
+                });
+                const textMaxWidth = !d.labels.rotation || Math.abs(d.labels.rotation) % 360 !== 90
+                    ? d.labels.maxWidth
+                    : (height - d.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
+                tickTexts.call(setEllipsisForOverflowTexts, textMaxWidth);
+            }
+            // remove overlapping ticks
+            // Note: this method do not prepared for rotated labels
+            if (!d.labels.rotation) {
+                let elementY = 0;
+                axisItem
+                    .selectAll('.tick')
+                    .filter(function (_d, tickIndex) {
+                    const tickNode = this;
+                    const r = tickNode.getBoundingClientRect();
+                    if (r.bottom > elementY && tickIndex !== 0) {
+                        return true;
+                    }
+                    elementY = r.top - d.labels.padding;
+                    return false;
+                })
+                    .remove();
+            }
+            return axisItem;
         });
-        const ticksCount = getTicksCount({ axis, range: height });
-        if (ticksCount) {
-            yAxisGenerator = yAxisGenerator.ticks(ticksCount);
-        }
-        svgElement.call(yAxisGenerator).attr('class', b());
-        svgElement
+        axisSelection
             .select('.domain')
-            .attr('d', `M0,${height}H0V0`)
-            .style('stroke', axis.lineColor || '');
-        if (axis.labels.enabled) {
-            const tickTexts = svgElement
-                .selectAll('.tick text')
-                // The offset must be applied before the labels are rotated.
-                // Therefore, we reset the values and make an offset in transform  attribute.
-                // FIXME: give up axisLeft(d3) and switch to our own generation method
-                .attr('x', null)
-                .attr('dy', null)
-                .style('font-size', axis.labels.style.fontSize)
-                .style('transform', function () {
-                return transformLabel(this, axis);
-            });
-            const textMaxWidth = !axis.labels.rotation || Math.abs(axis.labels.rotation) % 360 !== 90
-                ? axis.labels.maxWidth
-                : (height - axis.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
-            tickTexts.call(setEllipsisForOverflowTexts, textMaxWidth);
-        }
-        const transformStyle = svgElement.select('.tick').attr('transform');
-        const { y } = parseTransformStyle(transformStyle);
-        if (y === height) {
-            // Remove stroke from tick that has the same y coordinate like domain
-            svgElement.select('.tick line').style('stroke', 'none');
-        }
-        // remove overlapping ticks
-        // Note: this method do not prepared for rotated labels
-        if (!axis.labels.rotation) {
-            let elementY = 0;
-            svgElement
-                .selectAll('.tick')
-                .filter(function (_d, index) {
-                const node = this;
-                const r = node.getBoundingClientRect();
-                if (r.bottom > elementY && index !== 0) {
-                    return true;
-                }
-                elementY = r.top - axis.labels.padding;
-                return false;
-            })
-                .remove();
-        }
-        if (axis.title.text) {
-            const textY = axis.title.margin + axis.labels.margin + axis.labels.width;
-            svgElement
-                .append('text')
-                .attr('class', b('title'))
-                .attr('text-anchor', 'middle')
-                .attr('dy', -textY)
-                .attr('dx', -height / 2)
-                .attr('font-size', axis.title.style.fontSize)
-                .attr('transform', 'rotate(-90)')
-                .text(axis.title.text)
-                .call(setEllipsisForOverflowText, height);
-        }
+            .attr('d', () => {
+            const points = [
+                [0, 0],
+                [0, height],
+            ];
+            return line()(points);
+        })
+            .style('stroke', (d) => d.lineColor || '');
+        svgElement.selectAll('.tick').each((_d, index, nodes) => {
+            const tickNode = select(nodes[index]);
+            if (parseTransformStyle(tickNode.attr('transform')).y === height) {
+                // Remove stroke from tick that has the same y coordinate like domain
+                tickNode.select('line').style('stroke', 'none');
+            }
+        });
+        axisSelection
+            .append('text')
+            .attr('class', b('title'))
+            .attr('text-anchor', 'middle')
+            .attr('dy', (d) => -(d.title.margin + d.labels.margin + d.labels.width))
+            .attr('dx', (_d, index) => (index === 0 ? -height / 2 : height / 2))
+            .attr('font-size', (d) => d.title.style.fontSize)
+            .attr('transform', (_d, index) => (index === 0 ? 'rotate(-90)' : 'rotate(90)'))
+            .text((d) => d.title.text)
+            .each((_d, index, node) => {
+            return setEllipsisForOverflowText(select(node[index]), height);
+        });
     }, [axises, width, height, scale]);
-    return React.createElement("g", { ref: ref });
+    return React.createElement("g", { ref: ref, className: b('container') });
 };

package/build/plugins/d3/renderer/components/Chart.js

@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle';
 import { block } from '../../../../utils/cn';
 import { getD3Dispatcher } from '../d3-dispatcher';
 import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes } from '../hooks';
-import { getWidthOccupiedByYAxis } from '../hooks/useChartDimensions/utils';
+import { getYAxisWidth } from '../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
 import { getClosestPoints } from '../utils/get-closest-data';
@@ -73,7 +73,8 @@ export const Chart = (props) => {
         };
     }, [dispatcher, clickHandler]);
     const boundsOffsetTop = chart.margin.top;
-    const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
+    // We only need to consider the width of the first left axis
+    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
     const handleMouseMove = (event) => {
         const [pointerX, pointerY] = pointer(event, svgRef.current);
         const x = pointerX - boundsOffsetLeft;
@@ -97,7 +98,7 @@ export const Chart = (props) => {
         React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
-                xScale && yScale && (React.createElement(React.Fragment, null,
+                xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -3,7 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
 import { formatNumber } from '../../../../shared';
-import { getDataCategoryValue } from '../../utils';
+import { getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 const b = block('d3-tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, axis, data) => {
@@ -30,7 +30,7 @@ const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
 const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
-    if (data.every((item) => item.series.type === 'pie' || item.series.type === 'treemap')) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
@@ -58,6 +58,23 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
                 }
+                case 'waterfall': {
+                    const isTotal = get(data, 'total', false);
+                    const subTotal = getWaterfallPointSubtotal(data, series);
+                    return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
+                        !isTotal && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { key: id, className: b('content-row') },
+                                React.createElement("b", null, getXRowData(xAxis, data))),
+                            React.createElement("div", { className: b('content-row') },
+                                React.createElement("span", null,
+                                    series.name,
+                                    "\u00A0"),
+                                React.createElement("span", null, getYRowData(yAxis, data))))),
+                        React.createElement("div", { key: id, className: b('content-row') },
+                            isTotal ? 'Total' : 'Subtotal',
+                            ": ",
+                            subTotal)));
+                }
                 case 'bar-y': {
                     const value = (React.createElement(React.Fragment, null,
                         series.name,

package/build/plugins/d3/renderer/constants/defaults/series-options.d.ts

@@ -13,6 +13,12 @@ type DefaultBarYSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> &
         groupPadding: number;
     };
 };
-export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions;
+type DefaultWaterfallSeriesOptions = Partial<ChartKitWidgetSeriesOptions['waterfall']> & {
+    waterfall: {
+        barMaxWidth: number;
+        barPadding: number;
+    };
+};
+export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions;
 export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
 export {};

package/build/plugins/d3/renderer/constants/defaults/series-options.js

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

package/build/plugins/d3/renderer/hooks/useAxisScales/index.d.ts

@@ -12,7 +12,7 @@ type Args = {
 };
 type ReturnValue = {
     xScale?: ChartScale;
-    yScale?: 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 | ChartKitWidgetAxis, series: (PreparedSeries | ChartKitWidgetSeries)[], boundsWidth: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -135,7 +135,14 @@ const createScales = (args) => {
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
         xScale: createXScale(xAxis, visibleSeries, boundsWidth),
-        yScale: createYScale(yAxis[0], visibleSeries, boundsHeight),
+        yScale: yAxis.map((axis, index) => {
+            const axisSeries = series.filter((s) => {
+                const seriesAxisIndex = get(s, 'yAxis', 0);
+                return seriesAxisIndex === index;
+            });
+            const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
+            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, boundsHeight);
+        }),
     };
 };
 /**

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.d.ts

@@ -4,6 +4,7 @@ export declare const getBoundsWidth: (args: {
     chartMargin: PreparedChart['margin'];
     preparedYAxis: PreparedAxis[];
 }) => number;
+export declare function getYAxisWidth(axis: PreparedAxis | undefined): number;
 export declare function getWidthOccupiedByYAxis(args: {
     preparedAxis: PreparedAxis[];
 }): number;

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.js

@@ -5,16 +5,17 @@ export const getBoundsWidth = (args) => {
         chartMargin.left -
         getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }));
 };
-export function getWidthOccupiedByYAxis(args) {
-    const { preparedAxis } = args;
+export function getYAxisWidth(axis) {
     let result = 0;
-    preparedAxis.forEach((axis) => {
-        if (axis.title.text) {
-            result += axis.title.height + axis.title.margin;
-        }
-        if (axis.labels.enabled) {
-            result += axis.labels.margin + axis.labels.width;
-        }
-    });
+    if (axis === null || axis === void 0 ? void 0 : axis.title.text) {
+        result += axis.title.height + axis.title.margin;
+    }
+    if (axis === null || axis === void 0 ? void 0 : axis.labels.enabled) {
+        result += axis.labels.margin + axis.labels.width;
+    }
     return result;
 }
+export function getWidthOccupiedByYAxis(args) {
+    const { preparedAxis = [] } = args;
+    return preparedAxis.reduce((sum, axis) => sum + getYAxisWidth(axis), 0);
+}

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -27,6 +27,7 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     ticks: {
         pixelInterval?: number;
     };
+    position: 'left' | 'right' | 'top' | 'bottom';
 };
 export type PreparedTitle = ChartKitWidgetData['title'] & {
     height: number;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -79,6 +79,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         ticks: {
             pixelInterval: get(xAxis, 'ticks.pixelInterval'),
         },
+        position: 'bottom',
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, } from '../../utils';
+import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -24,61 +24,77 @@ const getAxisLabelMaxWidth = (args) => {
 };
 function getAxisMin(axis, series) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    const seriesWithVolume = ['bar-x', 'area'];
+    const seriesWithVolume = ['bar-x', 'area', 'waterfall'];
     if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => seriesWithVolume.includes(s.type)))) {
-        return 0;
+        return series.reduce((minValue, s) => {
+            switch (s.type) {
+                case 'waterfall': {
+                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
+                    return Math.min(minValue, minSubTotal);
+                }
+                default: {
+                    return minValue;
+                }
+            }
+        }, 0);
     }
     return min;
 }
 export const getPreparedYAxis = ({ series, yAxis, }) => {
-    // FIXME: add support for n axises
-    const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
-    const labelsEnabled = get(yAxis1, 'labels.enabled', true);
-    const y1LabelsStyle = {
-        fontSize: get(yAxis1, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
-    };
-    const y1TitleText = get(yAxis1, 'title.text', '');
-    const y1TitleStyle = {
-        fontSize: get(yAxis1, 'title.style.fontSize', yAxisTitleDefaults.fontSize),
-    };
-    const axisType = get(yAxis1, 'type', 'linear');
-    const preparedY1Axis = {
-        type: axisType,
-        labels: {
-            enabled: labelsEnabled,
-            margin: labelsEnabled ? get(yAxis1, 'labels.margin', axisLabelsDefaults.margin) : 0,
-            padding: labelsEnabled ? get(yAxis1, 'labels.padding', axisLabelsDefaults.padding) : 0,
-            dateFormat: get(yAxis1, 'labels.dateFormat'),
-            numberFormat: get(yAxis1, 'labels.numberFormat'),
-            style: y1LabelsStyle,
-            rotation: get(yAxis1, 'labels.rotation', 0),
-            width: 0,
-            height: 0,
-            lineHeight: getHorisontalSvgTextHeight({ text: 'TmpLabel', style: y1LabelsStyle }),
-            maxWidth: get(yAxis1, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
-        },
-        lineColor: get(yAxis1, 'lineColor'),
-        categories: get(yAxis1, 'categories'),
-        timestamps: get(yAxis1, 'timestamps'),
-        title: {
-            text: y1TitleText,
-            margin: get(yAxis1, 'title.margin', yAxisTitleDefaults.margin),
-            style: y1TitleStyle,
-            height: y1TitleText
-                ? getHorisontalSvgTextHeight({ text: y1TitleText, style: y1TitleStyle })
-                : 0,
-        },
-        min: getAxisMin(yAxis1, series),
-        maxPadding: get(yAxis1, 'maxPadding', 0.05),
-        grid: {
-            enabled: get(yAxis1, 'grid.enabled', true),
-        },
-        ticks: {
-            pixelInterval: get(yAxis1, 'ticks.pixelInterval'),
-        },
-    };
-    if (labelsEnabled) {
-        preparedY1Axis.labels.width = getAxisLabelMaxWidth({ axis: preparedY1Axis, series });
-    }
-    return [preparedY1Axis];
+    return (yAxis || [{}]).map((axisItem, index) => {
+        const axisPosition = index === 0 ? 'left' : 'right';
+        const labelsEnabled = get(axisItem, 'labels.enabled', true);
+        const labelsStyle = {
+            fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
+        };
+        const titleText = get(axisItem, 'title.text', '');
+        const titleStyle = {
+            fontSize: get(axisItem, 'title.style.fontSize', yAxisTitleDefaults.fontSize),
+        };
+        const axisType = get(axisItem, 'type', 'linear');
+        const preparedAxis = {
+            type: axisType,
+            labels: {
+                enabled: labelsEnabled,
+                margin: labelsEnabled
+                    ? get(axisItem, 'labels.margin', axisLabelsDefaults.margin)
+                    : 0,
+                padding: labelsEnabled
+                    ? get(axisItem, 'labels.padding', axisLabelsDefaults.padding)
+                    : 0,
+                dateFormat: get(axisItem, 'labels.dateFormat'),
+                numberFormat: get(axisItem, 'labels.numberFormat'),
+                style: labelsStyle,
+                rotation: get(axisItem, 'labels.rotation', 0),
+                width: 0,
+                height: 0,
+                lineHeight: getHorisontalSvgTextHeight({ text: 'TmpLabel', style: labelsStyle }),
+                maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
+            },
+            lineColor: get(axisItem, 'lineColor'),
+            categories: get(axisItem, 'categories'),
+            timestamps: get(axisItem, 'timestamps'),
+            title: {
+                text: titleText,
+                margin: get(axisItem, 'title.margin', yAxisTitleDefaults.margin),
+                style: titleStyle,
+                height: titleText
+                    ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
+                    : 0,
+            },
+            min: getAxisMin(axisItem, series),
+            maxPadding: get(axisItem, 'maxPadding', 0.05),
+            grid: {
+                enabled: get(axisItem, 'grid.enabled', index === 0),
+            },
+            ticks: {
+                pixelInterval: get(axisItem, 'ticks.pixelInterval'),
+            },
+            position: axisPosition,
+        };
+        if (labelsEnabled) {
+            preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });
+        }
+        return preparedAxis;
+    });
 };

package/build/plugins/d3/renderer/hooks/useSeries/prepare-area.d.ts

@@ -5,9 +5,9 @@ export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
-    radius: number;
     borderColor: string;
     borderWidth: number;
+    radius: number;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/build/plugins/d3/renderer/hooks/useSeries/prepare-area.js

@@ -55,6 +55,7 @@ export function prepareArea(args) {
             },
             marker: prepareMarker(series, seriesOptions),
             cursor: get(series, 'cursor', null),
+            yAxis: get(series, 'yAxis', 0),
         };
         return prepared;
     }, []);