@evergis/charts 4.0.46 → 4.0.48

package/dist/charts.esm.js

@@ -6,10 +6,10 @@ import ReactDOMServer from 'react-dom/server';
 import { uniqueId } from 'lodash';
 import { unmountComponentAtNode, render } from 'react-dom';
 
-const Wrapper = styled.div `
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
+const Wrapper = styled.div `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 function useNode() {
@@ -107,10 +107,10 @@ const drawMarkers = ({ svg, markers, width, left, top, count, yScale }) => {
     });
 };
 
-const SwipeScrollContainer = styled.div `
-  width: 100%;
-  overflow: hidden;
-  user-select: none;
+const SwipeScrollContainer = styled.div `
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
 `;
 
 function animate({ duration, timing, draw, }) {
@@ -262,37 +262,37 @@ const getTranslate$1 = ({ anchor, index, translateX, translateY, }) => {
     }
     return `translate(${translateX}px, ${translateY}px)`;
 };
-const Label$2 = styled.div `
-  display: flex;
-  align-items: center;
-  font-size: 12px;
+const Label$2 = styled.div `
+  display: flex;
+  align-items: center;
+  font-size: 12px;
 `;
-const Name$1 = styled.div `
-  text-align: center;
-  max-width: 120px;
+const Name$1 = styled.div `
+  text-align: center;
+  max-width: 120px;
 `;
-const middleBadgeStyles = css `
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translate(calc(100% + 6px), -50%);
+const middleBadgeStyles = css `
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate(calc(100% + 6px), -50%);
 `;
-const DefaultBadge = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: rgb(255, 255, 255);
-  background-color: rgb(144, 197, 61);
-  margin-left: 8px;
+const DefaultBadge = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(144, 197, 61);
+  margin-left: 8px;
 `;
-const MiddleBadge = styled(DefaultBadge) `
-  ${middleBadgeStyles}
+const MiddleBadge = styled(DefaultBadge) `
+  ${middleBadgeStyles}
 `;
-const BadgePrefix = styled.div `
-  margin-left: 4px;
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.54);
+const BadgePrefix = styled.div `
+  margin-left: 4px;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.54);
 `;
 
 const radarChartclassNames = {
@@ -307,29 +307,29 @@ const radarChartclassNames = {
     radarLabelBadgePrefix: 'radarLabelBadgePrefix',
     radarCircle: 'radarCircle',
 };
-const SvgWrapper$5 = styled(Wrapper) `
-  .${radarChartclassNames.radarAxis} {
-    path,
-    line,
-    circle {
-      fill: none;
-      stroke-width: 1px;
-      stroke: rgba(149, 149, 149, 0.18);
-    }
-  }
-  .${radarChartclassNames.radarAxisText} {
-    font-size: 12px;
-    fill-opacity: 0.56;
-  }
-  .${radarChartclassNames.radarPolygon} {
-    fill-opacity: 0.06;
-    stroke-width: 2px;
-    fill: rgb(144, 197, 61);
-    stroke: rgb(144, 197, 61);
-  }
-  .${radarChartclassNames.radarCircle} {
-    fill: rgb(144, 197, 61);
-  }
+const SvgWrapper$5 = styled(Wrapper) `
+  .${radarChartclassNames.radarAxis} {
+    path,
+    line,
+    circle {
+      fill: none;
+      stroke-width: 1px;
+      stroke: rgba(149, 149, 149, 0.18);
+    }
+  }
+  .${radarChartclassNames.radarAxisText} {
+    font-size: 12px;
+    fill-opacity: 0.56;
+  }
+  .${radarChartclassNames.radarPolygon} {
+    fill-opacity: 0.06;
+    stroke-width: 2px;
+    fill: rgb(144, 197, 61);
+    stroke: rgb(144, 197, 61);
+  }
+  .${radarChartclassNames.radarCircle} {
+    fill: rgb(144, 197, 61);
+  }
 `;
 
 const getTranslate = ({ anchor, index, translateX, translateY, }) => {
@@ -351,8 +351,8 @@ const LabelContainer$1 = styled.div.attrs(props => ({
     style: {
         transform: getTranslate(props),
     },
-})) `
-  position: absolute;
+})) `
+  position: absolute;
 `;
 
 const degByIndex = (index, count) => {
@@ -616,24 +616,24 @@ const pieChartclassNames = {
     pieTooltipColorBox: 'pieTooltipColorBox',
     pieFullChartTooltipCircle: 'pieFullChartTooltipCircle',
 };
-const SvgWrapper$4 = styled(Wrapper) `
-  .${pieChartclassNames.pieSliceLabel} {
-    fill: #4a4a4a;
-  }
-  
-  .${pieChartclassNames.pieRadialLabel} {
-    position: absolute;
-    max-width: 128px;
-  }
-  
-  .${pieChartclassNames.pieRadialLink} {
-    stroke: #000;
-  }
-  
-  .${pieChartclassNames.pieFullChartTooltipCircle} {
-    fill: transparent;
-    cursor: pointer;
-  }
+const SvgWrapper$4 = styled(Wrapper) `
+  .${pieChartclassNames.pieSliceLabel} {
+    fill: #4a4a4a;
+  }
+  
+  .${pieChartclassNames.pieRadialLabel} {
+    position: absolute;
+    max-width: 128px;
+  }
+  
+  .${pieChartclassNames.pieRadialLink} {
+    stroke: #000;
+  }
+  
+  .${pieChartclassNames.pieFullChartTooltipCircle} {
+    fill: transparent;
+    cursor: pointer;
+  }
 `;
 
 function radiansToDegrees(radians) {
@@ -733,90 +733,90 @@ const drawRadialLabels = ({ arc, enableRadialLabels, global, node, radius, dataR
     }
 };
 
-const TooltipFlex$1 = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  pointer-events: none;
-  white-space: nowrap;
+const TooltipFlex$1 = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+  white-space: nowrap;
 `;
 const LabelFlex = styled(TooltipFlex$1) ``;
-const LabelFlexCenter = styled(LabelFlex) `
-  align-items: center;
+const LabelFlexCenter = styled(LabelFlex) `
+  align-items: center;
 `;
-const TooltipContainer = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  margin-bottom: 8px;
-  padding: 4px 6px;
-  background-color: rgba(48, 69, 79, 1);
-  border-radius: 4px;
-  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
-
-  :before {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 100%);
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 3px 0 3px;
-    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
-  }
+const TooltipContainer = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  margin-bottom: 8px;
+  padding: 4px 6px;
+  background-color: rgba(48, 69, 79, 1);
+  border-radius: 4px;
+  box-shadow: 0 0.1875rem 0.5rem rgba(48, 69, 79, 0.06);
+
+  :before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 3px 0 3px;
+    border-color: rgba(48, 69, 79, 1) transparent transparent transparent;
+  }
 `;
-const TooltipGroupName = styled.div `
-  font-size: 14px;
-  margin-bottom: 6px;
+const TooltipGroupName = styled.div `
+  font-size: 14px;
+  margin-bottom: 6px;
 `;
-const TooltipItem = styled.div `
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+const TooltipItem = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 `;
-const ColFlex = styled.div `
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+const ColFlex = styled.div `
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
 `;
-const ColorBox = styled.div `
-  margin-right: 4px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+const ColorBox = styled.div `
+  margin-right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
 `;
-const ColorLine = styled(ColorBox) `
-  height: 2px;
-  border-radius: 0;
+const ColorLine = styled(ColorBox) `
+  height: 2px;
+  border-radius: 0;
 `;
-const Name = styled.div `
-  margin-right: 4px;
+const Name = styled.div `
+  margin-right: 4px;
 `;
-const Value = styled.div `
-  text-align: right;
-  flex-shrink: 0;
-  flex-grow: 1;
+const Value = styled.div `
+  text-align: right;
+  flex-shrink: 0;
+  flex-grow: 1;
 `;
-const Label$1 = styled.div `
-  position: relative;
-  font-size: 11px;
-  color: #fff;
-  font-weight: bold;
-  letter-spacing: 0.52px;
+const Label$1 = styled.div `
+  position: relative;
+  font-size: 11px;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 0.52px;
 `;
-const LabelTop = styled(Label$1) `
-  top: 6px;
+const LabelTop = styled(Label$1) `
+  top: 6px;
 `;
-const LabelBottom = styled(Label$1) `
-  bottom: 6px;
+const LabelBottom = styled(Label$1) `
+  bottom: 6px;
 `;
 
 const drawTooltip$3 = ({ fullChartTooltip, global, tooltipRoot, data, tooltipClassName, tooltipBind, renderTooltip, arc, allSlices, tooltipStyle, width, height, radius, }) => {
@@ -1261,53 +1261,53 @@ const calendarChartClassNames = {
     ...legendClassNames,
 };
 const headerHeight = "20px";
-const SvgWrapper$3 = styled(Wrapper) `
-  .${calendarChartClassNames.calendarYear} {
-    display: flex;
-    margin-bottom: 16px;
-  }
-
-  .${calendarChartClassNames.calendarYearTitle} {
-    display: inline-flex;
-    align-items: flex-end;
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    font-weight: bold;
-  }
-
-  .${calendarChartClassNames.calendarHeader} {
-    height: ${headerHeight};
-    margin-bottom: 4px;
-    position: relative;
-    display: flex;
-  }
-
-  .${calendarChartClassNames.calendarMonth} {
-    font-size: 14px;
-    bottom: 0;
-    position: absolute;
-  }
-
-  .${calendarChartClassNames.calendarAxis} {
-    display: flex;
-    flex-direction: column;
-    margin-right: 10px;
-  }
-
-  .${calendarChartClassNames.calendarWeekDay} {
-    font-size: 12px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .${calendarChartClassNames.calendarDays} {
-    position: relative;
-  }
-
-  .${calendarChartClassNames.calendarDay} {
-    position: absolute;
-  }
+const SvgWrapper$3 = styled(Wrapper) `
+  .${calendarChartClassNames.calendarYear} {
+    display: flex;
+    margin-bottom: 16px;
+  }
+
+  .${calendarChartClassNames.calendarYearTitle} {
+    display: inline-flex;
+    align-items: flex-end;
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  .${calendarChartClassNames.calendarHeader} {
+    height: ${headerHeight};
+    margin-bottom: 4px;
+    position: relative;
+    display: flex;
+  }
+
+  .${calendarChartClassNames.calendarMonth} {
+    font-size: 14px;
+    bottom: 0;
+    position: absolute;
+  }
+
+  .${calendarChartClassNames.calendarAxis} {
+    display: flex;
+    flex-direction: column;
+    margin-right: 10px;
+  }
+
+  .${calendarChartClassNames.calendarWeekDay} {
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .${calendarChartClassNames.calendarDays} {
+    position: relative;
+  }
+
+  .${calendarChartClassNames.calendarDay} {
+    position: absolute;
+  }
 `;
 
 const draw$3 = (node, props) => {
@@ -1534,67 +1534,67 @@ const lineChartClassNames = {
     lineChartMouseLabelContainer: "lineChartMouseLabelContainer",
     lineChartMouseLabel: "lineChartMouseLabel",
 };
-const SvgWrapper$2 = styled(Wrapper) `
-  .${lineChartClassNames.lineChartYScaleGlobal},
-  .${lineChartClassNames.lineChartXScaleGlobal},
-  .${lineChartClassNames.lineChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartLinesGlobal} {
-    fill: none;
-    stroke: steelblue;
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${lineChartClassNames.lineChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${lineChartClassNames.lineChartGridLineX},
-  .${lineChartClassNames.lineChartGridLineY},
-  .${lineChartClassNames.lineChartMouseLine} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${lineChartClassNames.lineChartMouseLine},
-  .${lineChartClassNames.lineChartMouseCircle} {
-    transition: opacity linear 200ms;
-    pointer-events: none;
-    stroke-width: 1px;
-  }
-
-  .${lineChartClassNames.lineChartDot} {
-    stroke: #fff;
-    stroke-width: 2px;
-  }
-
-  .${lineChartClassNames.lineChartMouseLine} {
-    shape-rendering: crispEdges;
-  }
-
-  .${lineChartClassNames.lineChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
+const SvgWrapper$2 = styled(Wrapper) `
+  .${lineChartClassNames.lineChartYScaleGlobal},
+  .${lineChartClassNames.lineChartXScaleGlobal},
+  .${lineChartClassNames.lineChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartLinesGlobal} {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${lineChartClassNames.lineChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${lineChartClassNames.lineChartGridLineX},
+  .${lineChartClassNames.lineChartGridLineY},
+  .${lineChartClassNames.lineChartMouseLine} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${lineChartClassNames.lineChartMouseLine},
+  .${lineChartClassNames.lineChartMouseCircle} {
+    transition: opacity linear 200ms;
+    pointer-events: none;
+    stroke-width: 1px;
+  }
+
+  .${lineChartClassNames.lineChartDot} {
+    stroke: #fff;
+    stroke-width: 2px;
+  }
+
+  .${lineChartClassNames.lineChartMouseLine} {
+    shape-rendering: crispEdges;
+  }
+
+  .${lineChartClassNames.lineChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
 `;
-const TooltipStyles$2 = createGlobalStyle `
-  .${lineChartClassNames.lineChartMouseLabel} {
-    transition: opacity linear 200ms;
-    z-index: 100;
-
-    .${lineChartClassNames.lineChartLabelFlex} {
-      justify-content: flex-start;
-      align-items: center;
-      pointer-events: none;
-    }
-
-    .${lineChartClassNames.lineChartLabel} {
-      margin: 0 0 0 10px;
-    }
-  }
+const TooltipStyles$2 = createGlobalStyle `
+  .${lineChartClassNames.lineChartMouseLabel} {
+    transition: opacity linear 200ms;
+    z-index: 100;
+
+    .${lineChartClassNames.lineChartLabelFlex} {
+      justify-content: flex-start;
+      align-items: center;
+      pointer-events: none;
+    }
+
+    .${lineChartClassNames.lineChartLabel} {
+      margin: 0 0 0 10px;
+    }
+  }
 `;
 
 const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, drawGridY, }) => {
@@ -1630,28 +1630,29 @@ const drawGrid$2 = ({ svg, yScale, xScale, yTicksCount, lastIndex, drawGridX, dr
     }
 };
 
-const LabelContainer = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const LabelContainer = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
-const Label = styled.div `
-  margin-bottom: 4px;
+const Label = styled.div `
+  margin-bottom: 4px;
 `;
 
 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 });
     }
 };
 
@@ -2251,66 +2286,66 @@ const barChartClassNames = {
     ...labelClassnames,
     ...barChartLinesClassNames,
 };
-const SvgWrapper$1 = styled(Wrapper) `
-  display: ${({ selectable }) => selectable && "inline-block"};
-  user-select: ${({ selectable }) => selectable && "none"};
-  width: ${({ selectable }) => selectable && "auto"};
-
-  line {
-    stroke-width: 1px;
-    shape-rendering: crispEdges;
-  }
-
-  .${barChartClassNames.barChartGridLineX},
-  .${barChartClassNames.barChartGridLineY} {
-    stroke: rgba(48, 69, 79, 0.06);
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-  }
-
-  .${barChartClassNames.barChartMouseRect} {
-    fill: none;
-    pointer-events: all;
-  }
-
-  .${barChartClassNames.barChartLinesGlobal} {
-    stroke-width: 1.5px;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-  }
-
-  .${barChartClassNames.barChartLine} {
-    shape-rendering: auto;
-  }
-
-  .${barChartClassNames.barChartArea} {
-    fill-opacity: 0.24;
-  }
-
-  .${barChartClassNames.barChartSelection} {
-    position: absolute;
-    top: 0;
-    width: 0;
-    background: rgba(0, 170, 255, 0.06);
-    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
-    pointer-events: none;
-  }
+const SvgWrapper$1 = styled(Wrapper) `
+  display: ${({ selectable }) => selectable && "inline-block"};
+  user-select: ${({ selectable }) => selectable && "none"};
+  width: ${({ selectable }) => selectable && "auto"};
+
+  line {
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+  }
+
+  .${barChartClassNames.barChartGridLineX},
+  .${barChartClassNames.barChartGridLineY} {
+    stroke: rgba(48, 69, 79, 0.06);
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+  }
+
+  .${barChartClassNames.barChartMouseRect} {
+    fill: none;
+    pointer-events: all;
+  }
+
+  .${barChartClassNames.barChartLinesGlobal} {
+    stroke-width: 1.5px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  .${barChartClassNames.barChartLine} {
+    shape-rendering: auto;
+  }
+
+  .${barChartClassNames.barChartArea} {
+    fill-opacity: 0.24;
+  }
+
+  .${barChartClassNames.barChartSelection} {
+    position: absolute;
+    top: 0;
+    width: 0;
+    background: rgba(0, 170, 255, 0.06);
+    box-shadow: 1px 0 0 #00AAFF, -1px 0 0 #00AAFF;
+    pointer-events: none;
+  }
 `;
-const TooltipStyles$1 = createGlobalStyle `
-  .${barChartClassNames.barChartMouseTooltip} {
-    z-index: 100;
-    transition: all linear 144ms;
-
-    .${barChartClassNames.barChartTooltipItem} {
-      padding: 0.125rem;
-      margin-bottom: 4px;
-
-      :last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
+const TooltipStyles$1 = createGlobalStyle `
+  .${barChartClassNames.barChartMouseTooltip} {
+    z-index: 100;
+    transition: all linear 144ms;
+
+    .${barChartClassNames.barChartTooltipItem} {
+      padding: 0.125rem;
+      margin-bottom: 4px;
+
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
 `;
 
 const useSelection = (node, props) => {
@@ -3150,45 +3185,45 @@ const horizontalBarChartClassNames = {
     horizontalBarChartTooltipName: "horizontalBarChartTooltipName",
     horizontalBarChartTooltipValue: "horizontalBarChartTooltipValue",
 };
-const Table = styled.table `
-  width: 100%;
+const Table = styled.table `
+  width: 100%;
 `;
-const LabelCell = styled.div `
-  text-align: right;
+const LabelCell = styled.div `
+  text-align: right;
 `;
-const BarFlex = styled.div `
-  width: 100%;
-  display: flex;
-  height: 1rem;
+const BarFlex = styled.div `
+  width: 100%;
+  display: flex;
+  height: 1rem;
 `;
-const BarsTd = styled.td `
-  width: 100%;
-  position: relative;
-  vertical-align: middle;
+const BarsTd = styled.td `
+  width: 100%;
+  position: relative;
+  vertical-align: middle;
 `;
-const TooltipFlex = styled(TooltipFlex$1) `
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  will-change: left, top;
+const TooltipFlex = styled(TooltipFlex$1) `
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  will-change: left, top;
 `;
-const StackSumContainer = styled.div `
-  position: relative;
+const StackSumContainer = styled.div `
+  position: relative;
 `;
-const StackSum = styled.div `
-  white-space: nowrap;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(0, -50%);
+const StackSum = styled.div `
+  white-space: nowrap;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(0, -50%);
 `;
-const StackWrapper = styled.div `
-  position: absolute;
-  top: 0;
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
+const StackWrapper = styled.div `
+  position: absolute;
+  top: 0;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
 `;
 
 const Tooltip$1 = ({ renderTooltip, bars, style, className, }) => {
@@ -3240,10 +3275,10 @@ const useStackWrapper = (stackedTooltip) => {
         : ({ children }) => (jsx(Fragment$1, { children: children })), [stackedTooltip]);
 };
 
-const BarStyled = styled.div `
-  position: relative;
-  display: inline-flex;
-  height: 100%;
+const BarStyled = styled.div `
+  position: relative;
+  display: inline-flex;
+  height: 100%;
 `;
 
 const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mouseLeave, pointerEventsNone, isFirstChild, isLastChild, isOnlyChild, }) => {
@@ -3260,23 +3295,23 @@ const Bar = ({ withTooltip, bar, formatNativeTitle, tooltipBind, mouseMove, mous
         }, title: formatNativeTitle ? formatNativeTitle(bar) : "", onMouseOver: onMouseMove, onMouseMove: tooltipBind ? onMouseMove : void 0, onMouseOut: onMouseLeave }));
 };
 
-const TickTd = styled.td `
-  position: relative;
+const TickTd = styled.td `
+  position: relative;
 `;
-const Ticks = styled.div `
-  position: relative;
-  height: 1rem;
+const Ticks = styled.div `
+  position: relative;
+  height: 1rem;
 `;
-const Tick = styled.div `
-  white-space: nowrap;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Tick = styled.div `
+  white-space: nowrap;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const hundred = 100;
@@ -3375,29 +3410,29 @@ const bubbleChartClassNames = {
     bubbleChartTooltipFlex: "bubbleChartTooltipFlex",
     bubbleChartTip: "bubbleChartTip",
 };
-const SvgWrapper = styled(Wrapper) `
-  .${bubbleChartClassNames.bubbleChartYAxis},
-  .${bubbleChartClassNames.bubbleChartXAxis},
-  .${bubbleChartClassNames.bubbleChartGridGlobal} {
-    shape-rendering: crispEdges;
-  }
-
-  .${bubbleChartClassNames.bubbleChartGridLineX},
-  .${bubbleChartClassNames.bubbleChartGridLineY} {
-    stroke: rgba(149, 149, 149, 0.24);
-  }
-
-  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
-    font-size: 10px;
-  }
+const SvgWrapper = styled(Wrapper) `
+  .${bubbleChartClassNames.bubbleChartYAxis},
+  .${bubbleChartClassNames.bubbleChartXAxis},
+  .${bubbleChartClassNames.bubbleChartGridGlobal} {
+    shape-rendering: crispEdges;
+  }
+
+  .${bubbleChartClassNames.bubbleChartGridLineX},
+  .${bubbleChartClassNames.bubbleChartGridLineY} {
+    stroke: rgba(149, 149, 149, 0.24);
+  }
+
+  .${bubbleChartClassNames.bubbleChartYScaleLabel} {
+    font-size: 10px;
+  }
 `;
-const TooltipStyles = createGlobalStyle `
-  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
-    position: absolute;
-    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
-    pointer-events: none;
-    z-index: 1;
-  }
+const TooltipStyles = createGlobalStyle `
+  .${bubbleChartClassNames.bubbleChartTooltipContainer} {
+    position: absolute;
+    transition: opacity 150ms cubic-bezier(0.2, 1, 0.6, 1);
+    pointer-events: none;
+    z-index: 1;
+  }
 `;
 
 const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) => {
@@ -3434,14 +3469,14 @@ const drawGrid = ({ svg, yScale, xScale, yTicksCount, drawGridX, drawGridY, }) =
     }
 };
 
-const Tooltip = styled.div `
-  width: 0;
-  height: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  font-size: 12px;
-  white-space: nowrap;
+const Tooltip = styled.div `
+  width: 0;
+  height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 12px;
+  white-space: nowrap;
 `;
 
 const drawTooltip = ({ bubbles, tooltipRoot, tooltipClassName, renderTooltip, }) => {