@evergis/charts 4.0.47 → 4.0.48

package/dist/charts/LineChart/drawLabel/index.d.ts

@@ -1,3 +1,3 @@
 import { DrawLabelProps } from './types';
 export declare const labelClassName = "d3-chart-label";
-export declare const drawLabel: ({ node, data, yScale, xScale, formatLabel, eachLabel, }: DrawLabelProps) => void;
+export declare const drawLabel: ({ node, data, yScaleOf, xScale, formatLabel, eachLabel, }: DrawLabelProps) => void;

package/dist/charts/LineChart/drawLabel/types.d.ts

@@ -1,7 +1,8 @@
-import { LineChartProps } from '../types';
+import { LineChartProps, LineChartScaleResolver } from '../types';
 import * as d3 from 'd3';
 export type DrawLabelProps = {
     node: HTMLElement;
-    yScale: d3.ScaleLinear<number, number>;
+    /** Шкала значений выбирается по серии: у правой оси она своя. */
+    yScaleOf: LineChartScaleResolver;
     xScale: d3.ScaleLinear<number, number>;
 } & Pick<LineChartProps, 'data' | 'formatLabel' | 'eachLabel'>;

package/dist/charts/LineChart/drawTooltip/index.d.ts

@@ -1,2 +1,2 @@
 import { DrawTooltipProps } from './types';
-export declare const drawTooltip: ({ svg, node, data: argData, xScale, yScale, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }: DrawTooltipProps) => void;
+export declare const drawTooltip: ({ svg, node, data: argData, xScale, yScale, yScaleOf, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }: DrawTooltipProps) => void;

package/dist/charts/LineChart/drawTooltip/types.d.ts

@@ -1,9 +1,12 @@
-import { LineChartProps } from '../types';
+import { LineChartProps, LineChartScaleResolver } from '../types';
 import * as d3 from 'd3';
 export type DrawTooltipProps = {
     svg: d3.Selection<SVGSVGElement, unknown, null, undefined>;
     node: HTMLElement;
+    /** Основная шкала — нужна только для вертикальных границ области наведения. */
     yScale: d3.ScaleLinear<number, number>;
+    /** Шкала значений выбирается по серии: у правой оси она своя. */
+    yScaleOf: LineChartScaleResolver;
     xScale: d3.ScaleLinear<number, number>;
     lastIndex: number;
 } & Pick<LineChartProps, 'data' | 'dynamicCircleRadius' | 'formatDynamicTooltip' | 'renderTooltip' | 'stackedTooltipIndex' | 'stackedTooltip' | 'tooltipLineTop' | 'tooltipRoot' | 'tooltipClassName' | 'dotSnapping'>;

package/dist/charts/LineChart/types.d.ts

@@ -3,6 +3,10 @@ import { Margin } from '../../common/types/margin';
 import { BarChartMarker } from '../BarChart/types';
 import * as d3 from 'd3';
 export type LineChartCustomAxis = (axis: d3.Axis<d3.NumberValue>) => void;
+/** Сторона, на которой выводится шкала значений и к которой привязана серия. */
+export type LineChartAxisSide = 'left' | 'right';
+/** Возвращает шкалу значений, по которой строится переданная серия. */
+export type LineChartScaleResolver = (series: Pick<LineChartData, 'axis'> | undefined) => d3.ScaleLinear<number, number>;
 type LineChartCustomAxisSelection = (selection: d3.Selection<SVGGElement, unknown, null, undefined>) => void;
 export interface LineChartProps extends PropsWithChildren {
     className?: string;
@@ -13,6 +17,8 @@ export interface LineChartProps extends PropsWithChildren {
     margin?: Margin;
     labels?: (string | number)[];
     customYAxis?: LineChartCustomAxis;
+    /** Применяется к правой шкале; если не задан — используется customYAxis. */
+    customYAxisRight?: LineChartCustomAxis;
     customXAxis?: LineChartCustomAxis;
     customYAxisSelection?: LineChartCustomAxisSelection;
     customXAxisSelection?: LineChartCustomAxisSelection;
@@ -22,8 +28,12 @@ export interface LineChartProps extends PropsWithChildren {
     areaCurve?: d3.CurveFactory;
     drawGridY?: boolean;
     drawGridX?: boolean;
+    /** Границы левой шкалы. По умолчанию считаются по сериям с axis !== "right". */
     min?: number;
     max?: number;
+    /** Границы правой шкалы. По умолчанию считаются по сериям с axis === "right". */
+    rightMin?: number;
+    rightMax?: number;
     stacked?: boolean;
     formatLabel?: (value: number, index: number, label: HTMLDivElement[]) => string | number;
     withLabels?: boolean;
@@ -42,7 +52,10 @@ export interface LineChartProps extends PropsWithChildren {
     tooltipLineTop?: boolean;
     customize?: (args: {
         svg: d3.Selection<SVGSVGElement, unknown, null, undefined>;
+        /** Левая шкала. */
         yScale: d3.ScaleLinear<number, number>;
+        /** Правая шкала; undefined, если серий на правой оси нет. */
+        yScaleRight?: d3.ScaleLinear<number, number>;
         xScale: d3.ScaleLinear<number, number>;
     }) => void;
     customYScale?: (yScale: (value: number) => number) => void;
@@ -51,7 +64,6 @@ export interface LineChartProps extends PropsWithChildren {
     tooltipClassName?: string;
     xScaleItemWidth?: number;
     dotSnapping?: boolean;
-    rightAxis?: number[];
     markers?: BarChartMarker[];
     transitionDuration?: number;
 }
@@ -62,6 +74,8 @@ export type LineChartDot = {
 };
 export type LineChartData = {
     name?: string;
+    /** Шкала значений, по которой строится серия. По умолчанию "left". */
+    axis?: LineChartAxisSide;
     values: (number | null)[];
     minAreaValues?: (number | null)[];
     stroke?: string;

package/dist/charts.esm.js

@@ -1644,14 +1644,15 @@ const Label = styled.div `
 `;
 
 const labelClassName = "d3-chart-label";
-const drawLabel = ({ node, data, yScale, xScale, formatLabel, eachLabel, }) => {
+const drawLabel = ({ node, data, yScaleOf, xScale, formatLabel, eachLabel, }) => {
     const labelsDiv = d3
         .select(node)
         .append("div")
         .attr("class", labelClassName);
     const format = d3.format(",");
-    // @ts-ignore
-    data.forEach(({ values }) => {
+    data.forEach(series => {
+        const values = series.values;
+        const yScale = yScaleOf(series);
         labelsDiv
             .append("div")
             .selectAll("div")
@@ -1670,7 +1671,7 @@ const drawLabel = ({ node, data, yScale, xScale, formatLabel, eachLabel, }) => {
     });
 };
 
-const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }) => {
+const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, yScaleOf, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }) => {
     const container = tooltipRoot || document.querySelector("body");
     const format = d3.format(",");
     const chartData = argData.filter(({ tooltipOff }) => !tooltipOff);
@@ -1779,7 +1780,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
                 positions[index] = {
                     x: x1 + Math.round(currIndex) * step,
                     y: typeof argData[index].values[Math.round(currIndex)] === "number"
-                        ? yScale(argData[index].values[Math.round(currIndex)])
+                        ? yScaleOf(argData[index])(argData[index].values[Math.round(currIndex)])
                         : 0,
                 };
             }
@@ -1795,7 +1796,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
         const datas = chartData.map(({ values, ...rest }, i) => ({
             ...rest,
             value: getValue(values),
-            invertValue: positions[i] ? yScale.invert(positions[i].y) : 0,
+            invertValue: positions[i] ? yScaleOf(rest).invert(positions[i].y) : 0,
         }));
         const noHasData = datas.every(({ value }) => isVoid(value));
         if (noHasData && isVisible) {
@@ -1883,7 +1884,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
 };
 
 const draw$2 = (node, props) => {
-    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, transitionDuration = 300, } = props;
+    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customYAxisRight, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, markers, transitionDuration = 300, } = props;
     if (node !== null && chartData.length) {
         const data = stacked ? stackedData(chartData) : chartData;
         const marginTop = margin ? margin.top : 0;
@@ -1893,12 +1894,21 @@ const draw$2 = (node, props) => {
         const { width: nodeWidth } = node.getBoundingClientRect();
         const width = props.width || nodeWidth;
         const height = props.height || 0;
-        const min = typeof props.min === 'number'
-            ? props.min
-            : d3.min(data, ({ values }) => d3.min(values));
-        const max = typeof props.max === 'number'
-            ? props.max
-            : d3.max(data, ({ values }) => d3.max(values));
+        // Серии разводятся по двум шкалам: без axis серия считается левой, поэтому график с одной
+        // осью ведёт себя ровно как раньше — правая шкала не создаётся и геометрия не меняется.
+        const isRightSeries = ({ axis }) => axis === 'right';
+        const leftData = data.filter(series => !isRightSeries(series));
+        const rightData = data.filter(isRightSeries);
+        const hasLeftAxis = leftData.length > 0;
+        const hasRightAxis = rightData.length > 0;
+        const domainOf = (series, propMin, propMax) => [
+            typeof propMin === 'number'
+                ? propMin
+                : d3.min(series, ({ values }) => d3.min(values)) || 0,
+            typeof propMax === 'number'
+                ? propMax
+                : d3.max(series, ({ values }) => d3.max(values)) || 0,
+        ];
         const prevStrokes = new Map();
         if (transitionDuration > 0) {
             d3.select(node)
@@ -1914,32 +1924,48 @@ const draw$2 = (node, props) => {
         ];
         const yScale = d3
             .scaleLinear()
-            .domain([min || 0, max || 0])
+            .domain(domainOf(hasLeftAxis ? leftData : data, props.min, props.max))
             .range(yRange)
             .nice();
+        const yScaleRight = hasRightAxis
+            ? d3
+                .scaleLinear()
+                .domain(domainOf(rightData, props.rightMin, props.rightMax))
+                .range(yRange)
+                .nice()
+            : undefined;
+        // Основная шкала — левая; если левых серий нет, её место занимает правая, чтобы сетка,
+        // маркеры и customize получили осмысленную шкалу.
+        const primaryScale = hasLeftAxis || !yScaleRight ? yScale : yScaleRight;
+        const scaleOf = series => series && isRightSeries(series) && yScaleRight ? yScaleRight : primaryScale;
         customYScale && customYScale(yScale);
         const yTicksCountDefault = 8;
         const yAxisLeft = d3.axisLeft(yScale).ticks(yTicksCountDefault);
         customYAxis && customYAxis(yAxisLeft);
-        const yTicksCount = yAxisLeft.tickArguments()[0];
-        const yAxis = svg
-            .append('g')
-            .attr('class', lineChartClassNames.lineChartYScaleGlobal)
-            .call(yAxisLeft)
-            .call(customYAxisSelection ? customYAxisSelection : none);
-        const { width: yAxisWidth } = computeDimensions(yAxis);
-        yAxis.attr('transform', `translate(${marginLeft + yAxisWidth}, 0)`);
+        const yTicksCount = yAxisLeft.tickArguments()[0] ?? yTicksCountDefault;
+        // Деления двух шкал должны попадать на одни и те же высоты, иначе линии сетки идут по левой
+        // оси, а подписи правой висят между ними. `nice` с явным числом делений округляет домен так,
+        // что обе оси дают одинаковое их количество. Для графика с одной осью домен не трогаем —
+        // иначе поменялась бы геометрия уже существующих графиков.
+        if (hasLeftAxis && yScaleRight) {
+            yScale.nice(yTicksCount);
+            yScaleRight.nice(yTicksCount);
+        }
+        let yAxisWidth = 0;
+        if (hasLeftAxis) {
+            const yAxis = svg
+                .append('g')
+                .attr('class', lineChartClassNames.lineChartYScaleGlobal)
+                .call(yAxisLeft)
+                .call(customYAxisSelection ? customYAxisSelection : none);
+            ({ width: yAxisWidth } = computeDimensions(yAxis));
+            yAxis.attr('transform', `translate(${marginLeft + yAxisWidth}, 0)`);
+        }
         let yAxisRightWidth = 0;
         const left = marginLeft + yAxisWidth + (yAxisPadding || 0);
-        if (rightAxis) {
-            const rightAxisMin = d3.min(rightAxis);
-            const rightAxisMax = d3.max(rightAxis);
-            const yRightScale = d3
-                .scaleLinear()
-                .domain([rightAxisMin || 0, rightAxisMax || 0])
-                .range(yRange)
-                .nice();
-            const yAxisRightTicks = d3.axisRight(yRightScale).ticks(yTicksCountDefault);
+        if (yScaleRight) {
+            const yAxisRightTicks = d3.axisRight(yScaleRight).ticks(yTicksCount);
+            (customYAxisRight || customYAxis)?.(yAxisRightTicks);
             const yAxisRight = svg
                 .append('g')
                 .attr('class', `${lineChartClassNames.lineChartYScaleGlobal} ${lineChartClassNames.lineChartYScaleRight}`)
@@ -1975,7 +2001,7 @@ const draw$2 = (node, props) => {
         customXAxis && customXAxis(xAxisBottom);
         drawGrid$2({
             svg,
-            yScale,
+            yScale: primaryScale,
             xScale,
             yTicksCount,
             lastIndex,
@@ -1991,19 +2017,26 @@ const draw$2 = (node, props) => {
             const { height: xAxisHeight } = computeDimensions(xAxis);
             xAxis.attr('transform', `translate(0, ${height - Math.ceil(xAxisHeight) - marginBottom})`);
         }
-        const line = d3
-            .line()
-            .defined(d => d !== null)
-            .x((_, index) => xScale(index))
-            .y((d) => yScale(d))
-            .curve(curve || d3.curveLinear);
-        customLine && customLine(line);
+        const createLine = (scale) => {
+            const generator = d3
+                .line()
+                .defined(d => d !== null)
+                .x((_, index) => xScale(index))
+                .y((d) => scale(d))
+                .curve(curve || d3.curveLinear);
+            customLine && customLine(generator);
+            return generator;
+        };
+        const line = createLine(primaryScale);
+        const lineRight = yScaleRight ? createLine(yScaleRight) : line;
+        const lineOf = (series) => isRightSeries(series) && yScaleRight ? lineRight : line;
         const withAreas = data.some(({ fill }) => fill);
         if (withAreas) {
             let dataIndex = -2;
             const getArea = (d) => {
                 const { minAreaValues } = d;
-                const minTick = yScale.ticks()[0];
+                const scale = scaleOf(d);
+                const minTick = scale.ticks()[0];
                 return d3
                     .area()
                     .defined(d => d !== null)
@@ -2017,18 +2050,18 @@ const draw$2 = (node, props) => {
                         minValue = minAreaValues[index] || minValue;
                     }
                     else if (minAreaValues) {
-                        minValue = yScale((minValue - value));
+                        minValue = scale((minValue - value));
                     }
                     const currData = data[dataIndex];
                     return stacked
                         ? dataIndex > -1
-                            ? yScale(typeof currData.values[index] !== 'number'
+                            ? scale(typeof currData.values[index] !== 'number'
                                 ? 0
                                 : currData.values[index])
-                            : yScale(minValue)
-                        : yScale(minValue);
+                            : scale(minValue)
+                        : scale(minValue);
                 })
-                    .y1((d) => yScale(d))
+                    .y1((d) => scale(d))
                     .curve(areaCurve || curve || d3.curveLinear);
             };
             svg
@@ -2052,7 +2085,7 @@ const draw$2 = (node, props) => {
             .data(data)
             .join('path')
             .attr('class', lineChartClassNames.lineChartLine)
-            .attr('d', (d) => line(d.values))
+            .attr('d', (d) => lineOf(d)(d.values))
             .attr('style', ({ style }) => style || '');
         if (transitionDuration > 0 && prevStrokes.size > 0) {
             lineSelection
@@ -2072,6 +2105,7 @@ const draw$2 = (node, props) => {
             dots.forEach(item => {
                 const { values, dot } = item;
                 const { radius, style, filter } = dot;
+                const scale = scaleOf(item);
                 const dotsGroup = dotsGlobal
                     .append('g')
                     .attr('class', lineChartClassNames.lineChartDotsGlobal);
@@ -2081,7 +2115,7 @@ const draw$2 = (node, props) => {
                     .join('circle')
                     .attr('cx', (_, index) => xScale(index))
                     .attr('class', lineChartClassNames.lineChartDot)
-                    .attr('cy', d => yScale(d))
+                    .attr('cy', d => scale(d))
                     .attr('r', radius || 0)
                     .attr('style', style || '');
                 if (filter) {
@@ -2093,12 +2127,12 @@ const draw$2 = (node, props) => {
             });
         }
         const count = data?.[0]?.values?.length || 0;
-        drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale });
+        drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale: primaryScale });
         d3.select(node)
             .select(`.${labelClassName}`)
             .remove();
         withLabels &&
-            drawLabel({ node, eachLabel, data, yScale, xScale, formatLabel });
+            drawLabel({ node, eachLabel, data, yScaleOf: scaleOf, xScale, formatLabel });
         if (dynamicTooltipEnable) {
             drawTooltip$2({
                 tooltipLineTop,
@@ -2110,14 +2144,15 @@ const draw$2 = (node, props) => {
                 svg,
                 data,
                 xScale,
-                yScale,
+                yScale: primaryScale,
+                yScaleOf: scaleOf,
                 dynamicCircleRadius,
                 tooltipClassName,
                 dotSnapping,
                 lastIndex,
             });
         }
-        customize && customize({ svg, yScale, xScale });
+        customize && customize({ svg, yScale: primaryScale, yScaleRight, xScale });
     }
 };
 

package/dist/charts.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"charts.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -1665,14 +1665,15 @@ const Label = styled.div `
 `;
 
 const labelClassName = "d3-chart-label";
-const drawLabel = ({ node, data, yScale, xScale, formatLabel, eachLabel, }) => {
+const drawLabel = ({ node, data, yScaleOf, xScale, formatLabel, eachLabel, }) => {
     const labelsDiv = d3__namespace
         .select(node)
         .append("div")
         .attr("class", labelClassName);
     const format = d3__namespace.format(",");
-    // @ts-ignore
-    data.forEach(({ values }) => {
+    data.forEach(series => {
+        const values = series.values;
+        const yScale = yScaleOf(series);
         labelsDiv
             .append("div")
             .selectAll("div")
@@ -1691,7 +1692,7 @@ const drawLabel = ({ node, data, yScale, xScale, formatLabel, eachLabel, }) => {
     });
 };
 
-const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }) => {
+const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, yScaleOf, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltipIndex, stackedTooltip, tooltipLineTop, tooltipRoot, tooltipClassName, dotSnapping, lastIndex, }) => {
     const container = tooltipRoot || document.querySelector("body");
     const format = d3__namespace.format(",");
     const chartData = argData.filter(({ tooltipOff }) => !tooltipOff);
@@ -1800,7 +1801,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
                 positions[index] = {
                     x: x1 + Math.round(currIndex) * step,
                     y: typeof argData[index].values[Math.round(currIndex)] === "number"
-                        ? yScale(argData[index].values[Math.round(currIndex)])
+                        ? yScaleOf(argData[index])(argData[index].values[Math.round(currIndex)])
                         : 0,
                 };
             }
@@ -1816,7 +1817,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
         const datas = chartData.map(({ values, ...rest }, i) => ({
             ...rest,
             value: getValue(values),
-            invertValue: positions[i] ? yScale.invert(positions[i].y) : 0,
+            invertValue: positions[i] ? yScaleOf(rest).invert(positions[i].y) : 0,
         }));
         const noHasData = datas.every(({ value }) => isVoid(value));
         if (noHasData && isVisible) {
@@ -1904,7 +1905,7 @@ const drawTooltip$2 = ({ svg, node, data: argData, xScale, yScale, dynamicCircle
 };
 
 const draw$2 = (node, props) => {
-    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, rightAxis, markers, transitionDuration = 300, } = props;
+    const { data: chartData, labels, margin, customYAxisSelection, customXAxisSelection, customYAxis, customYAxisRight, customXAxis, curve, yAxisPadding, xAxisPadding, drawGridY, drawGridX, withLabels, formatLabel, eachLabel, stacked, dynamicTooltipEnable, dynamicCircleRadius, formatDynamicTooltip, renderTooltip, stackedTooltip, stackedTooltipIndex, tooltipLineTop, customize, customYScale, customLine, tooltipClassName, xScaleItemWidth, areaCurve, dotSnapping, markers, transitionDuration = 300, } = props;
     if (node !== null && chartData.length) {
         const data = stacked ? stackedData(chartData) : chartData;
         const marginTop = margin ? margin.top : 0;
@@ -1914,12 +1915,21 @@ const draw$2 = (node, props) => {
         const { width: nodeWidth } = node.getBoundingClientRect();
         const width = props.width || nodeWidth;
         const height = props.height || 0;
-        const min = typeof props.min === 'number'
-            ? props.min
-            : d3__namespace.min(data, ({ values }) => d3__namespace.min(values));
-        const max = typeof props.max === 'number'
-            ? props.max
-            : d3__namespace.max(data, ({ values }) => d3__namespace.max(values));
+        // Серии разводятся по двум шкалам: без axis серия считается левой, поэтому график с одной
+        // осью ведёт себя ровно как раньше — правая шкала не создаётся и геометрия не меняется.
+        const isRightSeries = ({ axis }) => axis === 'right';
+        const leftData = data.filter(series => !isRightSeries(series));
+        const rightData = data.filter(isRightSeries);
+        const hasLeftAxis = leftData.length > 0;
+        const hasRightAxis = rightData.length > 0;
+        const domainOf = (series, propMin, propMax) => [
+            typeof propMin === 'number'
+                ? propMin
+                : d3__namespace.min(series, ({ values }) => d3__namespace.min(values)) || 0,
+            typeof propMax === 'number'
+                ? propMax
+                : d3__namespace.max(series, ({ values }) => d3__namespace.max(values)) || 0,
+        ];
         const prevStrokes = new Map();
         if (transitionDuration > 0) {
             d3__namespace.select(node)
@@ -1935,32 +1945,48 @@ const draw$2 = (node, props) => {
         ];
         const yScale = d3__namespace
             .scaleLinear()
-            .domain([min || 0, max || 0])
+            .domain(domainOf(hasLeftAxis ? leftData : data, props.min, props.max))
             .range(yRange)
             .nice();
+        const yScaleRight = hasRightAxis
+            ? d3__namespace
+                .scaleLinear()
+                .domain(domainOf(rightData, props.rightMin, props.rightMax))
+                .range(yRange)
+                .nice()
+            : undefined;
+        // Основная шкала — левая; если левых серий нет, её место занимает правая, чтобы сетка,
+        // маркеры и customize получили осмысленную шкалу.
+        const primaryScale = hasLeftAxis || !yScaleRight ? yScale : yScaleRight;
+        const scaleOf = series => series && isRightSeries(series) && yScaleRight ? yScaleRight : primaryScale;
         customYScale && customYScale(yScale);
         const yTicksCountDefault = 8;
         const yAxisLeft = d3__namespace.axisLeft(yScale).ticks(yTicksCountDefault);
         customYAxis && customYAxis(yAxisLeft);
-        const yTicksCount = yAxisLeft.tickArguments()[0];
-        const yAxis = svg
-            .append('g')
-            .attr('class', lineChartClassNames.lineChartYScaleGlobal)
-            .call(yAxisLeft)
-            .call(customYAxisSelection ? customYAxisSelection : none);
-        const { width: yAxisWidth } = computeDimensions(yAxis);
-        yAxis.attr('transform', `translate(${marginLeft + yAxisWidth}, 0)`);
+        const yTicksCount = yAxisLeft.tickArguments()[0] ?? yTicksCountDefault;
+        // Деления двух шкал должны попадать на одни и те же высоты, иначе линии сетки идут по левой
+        // оси, а подписи правой висят между ними. `nice` с явным числом делений округляет домен так,
+        // что обе оси дают одинаковое их количество. Для графика с одной осью домен не трогаем —
+        // иначе поменялась бы геометрия уже существующих графиков.
+        if (hasLeftAxis && yScaleRight) {
+            yScale.nice(yTicksCount);
+            yScaleRight.nice(yTicksCount);
+        }
+        let yAxisWidth = 0;
+        if (hasLeftAxis) {
+            const yAxis = svg
+                .append('g')
+                .attr('class', lineChartClassNames.lineChartYScaleGlobal)
+                .call(yAxisLeft)
+                .call(customYAxisSelection ? customYAxisSelection : none);
+            ({ width: yAxisWidth } = computeDimensions(yAxis));
+            yAxis.attr('transform', `translate(${marginLeft + yAxisWidth}, 0)`);
+        }
         let yAxisRightWidth = 0;
         const left = marginLeft + yAxisWidth + (yAxisPadding || 0);
-        if (rightAxis) {
-            const rightAxisMin = d3__namespace.min(rightAxis);
-            const rightAxisMax = d3__namespace.max(rightAxis);
-            const yRightScale = d3__namespace
-                .scaleLinear()
-                .domain([rightAxisMin || 0, rightAxisMax || 0])
-                .range(yRange)
-                .nice();
-            const yAxisRightTicks = d3__namespace.axisRight(yRightScale).ticks(yTicksCountDefault);
+        if (yScaleRight) {
+            const yAxisRightTicks = d3__namespace.axisRight(yScaleRight).ticks(yTicksCount);
+            (customYAxisRight || customYAxis)?.(yAxisRightTicks);
             const yAxisRight = svg
                 .append('g')
                 .attr('class', `${lineChartClassNames.lineChartYScaleGlobal} ${lineChartClassNames.lineChartYScaleRight}`)
@@ -1996,7 +2022,7 @@ const draw$2 = (node, props) => {
         customXAxis && customXAxis(xAxisBottom);
         drawGrid$2({
             svg,
-            yScale,
+            yScale: primaryScale,
             xScale,
             yTicksCount,
             lastIndex,
@@ -2012,19 +2038,26 @@ const draw$2 = (node, props) => {
             const { height: xAxisHeight } = computeDimensions(xAxis);
             xAxis.attr('transform', `translate(0, ${height - Math.ceil(xAxisHeight) - marginBottom})`);
         }
-        const line = d3__namespace
-            .line()
-            .defined(d => d !== null)
-            .x((_, index) => xScale(index))
-            .y((d) => yScale(d))
-            .curve(curve || d3__namespace.curveLinear);
-        customLine && customLine(line);
+        const createLine = (scale) => {
+            const generator = d3__namespace
+                .line()
+                .defined(d => d !== null)
+                .x((_, index) => xScale(index))
+                .y((d) => scale(d))
+                .curve(curve || d3__namespace.curveLinear);
+            customLine && customLine(generator);
+            return generator;
+        };
+        const line = createLine(primaryScale);
+        const lineRight = yScaleRight ? createLine(yScaleRight) : line;
+        const lineOf = (series) => isRightSeries(series) && yScaleRight ? lineRight : line;
         const withAreas = data.some(({ fill }) => fill);
         if (withAreas) {
             let dataIndex = -2;
             const getArea = (d) => {
                 const { minAreaValues } = d;
-                const minTick = yScale.ticks()[0];
+                const scale = scaleOf(d);
+                const minTick = scale.ticks()[0];
                 return d3__namespace
                     .area()
                     .defined(d => d !== null)
@@ -2038,18 +2071,18 @@ const draw$2 = (node, props) => {
                         minValue = minAreaValues[index] || minValue;
                     }
                     else if (minAreaValues) {
-                        minValue = yScale((minValue - value));
+                        minValue = scale((minValue - value));
                     }
                     const currData = data[dataIndex];
                     return stacked
                         ? dataIndex > -1
-                            ? yScale(typeof currData.values[index] !== 'number'
+                            ? scale(typeof currData.values[index] !== 'number'
                                 ? 0
                                 : currData.values[index])
-                            : yScale(minValue)
-                        : yScale(minValue);
+                            : scale(minValue)
+                        : scale(minValue);
                 })
-                    .y1((d) => yScale(d))
+                    .y1((d) => scale(d))
                     .curve(areaCurve || curve || d3__namespace.curveLinear);
             };
             svg
@@ -2073,7 +2106,7 @@ const draw$2 = (node, props) => {
             .data(data)
             .join('path')
             .attr('class', lineChartClassNames.lineChartLine)
-            .attr('d', (d) => line(d.values))
+            .attr('d', (d) => lineOf(d)(d.values))
             .attr('style', ({ style }) => style || '');
         if (transitionDuration > 0 && prevStrokes.size > 0) {
             lineSelection
@@ -2093,6 +2126,7 @@ const draw$2 = (node, props) => {
             dots.forEach(item => {
                 const { values, dot } = item;
                 const { radius, style, filter } = dot;
+                const scale = scaleOf(item);
                 const dotsGroup = dotsGlobal
                     .append('g')
                     .attr('class', lineChartClassNames.lineChartDotsGlobal);
@@ -2102,7 +2136,7 @@ const draw$2 = (node, props) => {
                     .join('circle')
                     .attr('cx', (_, index) => xScale(index))
                     .attr('class', lineChartClassNames.lineChartDot)
-                    .attr('cy', d => yScale(d))
+                    .attr('cy', d => scale(d))
                     .attr('r', radius || 0)
                     .attr('style', style || '');
                 if (filter) {
@@ -2114,12 +2148,12 @@ const draw$2 = (node, props) => {
             });
         }
         const count = data?.[0]?.values?.length || 0;
-        drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale });
+        drawMarkers({ svg, markers, width, left, top: height - marginTop, count, yScale: primaryScale });
         d3__namespace.select(node)
             .select(`.${labelClassName}`)
             .remove();
         withLabels &&
-            drawLabel({ node, eachLabel, data, yScale, xScale, formatLabel });
+            drawLabel({ node, eachLabel, data, yScaleOf: scaleOf, xScale, formatLabel });
         if (dynamicTooltipEnable) {
             drawTooltip$2({
                 tooltipLineTop,
@@ -2131,14 +2165,15 @@ const draw$2 = (node, props) => {
                 svg,
                 data,
                 xScale,
-                yScale,
+                yScale: primaryScale,
+                yScaleOf: scaleOf,
                 dynamicCircleRadius,
                 tooltipClassName,
                 dotSnapping,
                 lastIndex,
             });
         }
-        customize && customize({ svg, yScale, xScale });
+        customize && customize({ svg, yScale: primaryScale, yScaleRight, xScale });
     }
 };
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.47",
+  "version": "4.0.48",
   "name": "@evergis/charts",
   "author": "Everpoint",
   "license": "MIT",
@@ -54,5 +54,5 @@
     "react-is": "^19.1.1",
     "styled-components": "5.3.5"
   },
-  "gitHead": "fcf22699bd4902c77f098e59e2d0c5b5bb2feb00"
+  "gitHead": "00e65767be0339fc7999e3081cb4be3ac3c7e888"
 }