@gravity-ui/charts 1.9.0 → 1.10.1

package/dist/cjs/utils/chart/text.d.ts

@@ -14,10 +14,10 @@ export declare function getLabelsSize({ labels, style, rotation, html, }: {
     style?: BaseTextStyle & React.CSSProperties;
     rotation?: number;
     html?: boolean;
-}): {
+}): Promise<{
     maxHeight: number;
     maxWidth: number;
-};
+}>;
 export type TextRow = {
     text: string;
     y: number;
@@ -26,15 +26,15 @@ export declare function wrapText(args: {
     text: string;
     style?: BaseTextStyle;
     width: number;
-}): TextRow[];
+}): Promise<TextRow[]>;
 export declare function getTextSizeFn({ style }: {
     style: BaseTextStyle;
-}): (str: string) => {
+}): (str: string) => Promise<{
     width: number;
     height: number;
-};
+}>;
 export declare function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }: {
     text: string;
-    getTextWidth: (s: string) => number;
+    getTextWidth: (s: string) => number | Promise<number>;
     maxWidth: number;
-}): string;
+}): Promise<string>;

package/dist/cjs/utils/chart/text.js

@@ -85,12 +85,21 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
         .html((d) => d);
     return text;
 }
-export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+// since we don't know in advance the font that will be used for the text,
+// we need to wait for it and only then we can count all the sizes.
+export async function getLabelsSize({ labels, style, rotation, html, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (!labels.filter(Boolean).length) {
         return { maxHeight: 0, maxWidth: 0 };
     }
-    const container = select(document.body).append('div');
+    const container = select(document.body)
+        .append('div')
+        .style('visibility', 'hidden')
+        .style('position', 'absolute')
+        .style('top', '-200vw')
+        .style('left', '-200vwx')
+        .style('width', '100vw')
+        .style('height', '100vh');
     const result = { maxHeight: 0, maxWidth: 0 };
     let labelWrapper;
     if (html) {
@@ -103,17 +112,18 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
             .style('max-width', (_c = style === null || style === void 0 ? void 0 : style.maxWidth) !== null && _c !== void 0 ? _c : '')
             .style('max-height', (_d = style === null || style === void 0 ? void 0 : style.maxHeight) !== null && _d !== void 0 ? _d : '')
             .node();
-        const { height, width } = labels.reduce((acc, l) => {
-            var _a, _b;
+        let height = 0;
+        let width = 0;
+        for (let i = 0; i < labels.length; i++) {
+            const l = labels[i];
             if (labelWrapper) {
                 labelWrapper.innerHTML = l;
             }
+            await document.fonts.ready;
             const rect = labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.getBoundingClientRect();
-            return {
-                width: Math.max(acc.width, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0),
-                height: Math.max(acc.height, (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0),
-            };
-        }, { height: 0, width: 0 });
+            width = Math.max(width, (_e = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _e !== void 0 ? _e : 0);
+            height = Math.max(height, (_f = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _f !== void 0 ? _f : 0);
+        }
         result.maxWidth = width;
         result.maxHeight = height;
     }
@@ -125,23 +135,26 @@ export function getLabelsSize({ labels, style, rotation, html, }) {
                 .attr('text-anchor', rotation > 0 ? 'start' : 'end')
                 .style('transform', `rotate(${rotation}deg)`);
         }
-        const rect = (_e = svg.select('g').node()) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
-        result.maxWidth = (_f = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _f !== void 0 ? _f : 0;
-        result.maxHeight = (_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0;
+        await document.fonts.ready;
+        const rect = (_g = svg.select('g').node()) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect();
+        result.maxWidth = (_h = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _h !== void 0 ? _h : 0;
+        result.maxHeight = (_j = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _j !== void 0 ? _j : 0;
     }
     container.remove();
     return result;
 }
-export function wrapText(args) {
+export async function wrapText(args) {
     const { text, style, width } = args;
-    const height = getLabelsSize({
+    const height = (await getLabelsSize({
         labels: [text],
         style: style,
-    }).maxHeight;
+    })).maxHeight;
     // @ts-ignore
     const segmenter = new Intl.Segmenter([], { granularity: 'word' });
     const segments = Array.from(segmenter.segment(text));
-    return segments.reduce((acc, s) => {
+    const acc = [];
+    for (let i = 0; i < segments.length; i++) {
+        const s = segments[i];
         const item = s;
         if (!acc.length) {
             acc.push({
@@ -151,10 +164,10 @@ export function wrapText(args) {
         }
         let lastRow = acc[acc.length - 1];
         if (item.isWordLike &&
-            getLabelsSize({
+            (await getLabelsSize({
                 labels: [lastRow.text + item.segment],
                 style,
-            }).maxWidth > width) {
+            })).maxWidth > width) {
             lastRow = {
                 text: '',
                 y: acc.length * height,
@@ -162,8 +175,8 @@ export function wrapText(args) {
             acc.push(lastRow);
         }
         lastRow.text += item.segment;
-        return acc;
-    }, []);
+    }
+    return acc;
 }
 const entityMap = {
     '&': '&amp;',
@@ -182,31 +195,33 @@ function unescapeHtml(str) {
 }
 export function getTextSizeFn({ style }) {
     const map = {};
-    const setSymbolSize = (s) => {
+    const setSymbolSize = async (s) => {
         const labels = [s === ' ' ? '&nbsp;' : s];
-        const size = getLabelsSize({
+        const size = await getLabelsSize({
             labels,
             style,
         });
         map[s] = { width: size.maxWidth, height: size.maxHeight };
     };
-    return (str) => {
+    return async (str) => {
         let width = 0;
         let height = 0;
-        [...unescapeHtml(str)].forEach((s) => {
+        const symbols = unescapeHtml(str);
+        for (let i = 0; i < symbols.length; i++) {
+            const s = symbols[i];
             if (!map[s]) {
-                setSymbolSize(s);
+                await setSymbolSize(s);
             }
             width += map[s].width;
             height = Math.max(height, map[s].height);
-        });
+        }
         return { width, height };
     };
 }
 // We ignore an inaccuracy of less than a pixel.
 // To do this, we round the font size down when comparing it, and the size of the allowed space up.
-export function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
-    let textWidth = Math.floor(getTextWidth(originalText));
+export async function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth, }) {
+    let textWidth = Math.floor(await getTextWidth(originalText));
     const textMaxWidth = Math.ceil(maxWidth);
     if (textWidth <= textMaxWidth) {
         return originalText;
@@ -214,7 +229,7 @@ export function getTextWithElipsis({ text: originalText, getTextWidth, maxWidth,
     let text = originalText + '…';
     while (textWidth > textMaxWidth && text.length > 2) {
         text = text.slice(0, -2) + '…';
-        textWidth = Math.floor(getTextWidth(text));
+        textWidth = Math.floor(await getTextWidth(text));
     }
     if (textWidth > textMaxWidth) {
         text = '';

package/dist/cjs/utils/chart-ui/pie-center-text.d.ts

@@ -6,4 +6,4 @@ export declare function pieCenterText(text: string, options?: {
     series: {
         innerRadius: number;
     };
-}) => SVGGElement | null) | undefined;
+}) => Promise<SVGGElement | null>) | undefined;

package/dist/cjs/utils/chart-ui/pie-center-text.js

@@ -9,10 +9,10 @@ export function pieCenterText(text, options) {
         return undefined;
     }
     const color = get(options, 'color', 'currentColor');
-    return function (args) {
+    return async function (args) {
         var _a, _b;
         let fontSize = MAX_FONT_SIZE;
-        const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
+        const textSize = await getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
         let availableSpace = args.series.innerRadius * 2;
         const padding = (_a = calculateNumericProperty({
             base: availableSpace,

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

@@ -1,2 +1,2 @@
 import type { ChartData } from '../types';
-export declare const validateData: (data?: ChartData) => void;
+export declare function validateData(data?: ChartData): void;

package/dist/cjs/validation/index.js

@@ -4,7 +4,7 @@ import { DEFAULT_AXIS_TYPE, SeriesType } from '../constants';
 import { i18n } from '../i18n';
 import { CHART_ERROR_CODE, ChartError } from '../libs';
 const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
-const validateXYSeries = (args) => {
+function validateXYSeries(args) {
     const { series, xAxis, yAxis = [] } = args;
     const yAxisIndex = get(series, 'yAxis', 0);
     const seriesYAxis = yAxis[yAxisIndex];
@@ -94,8 +94,8 @@ const validateXYSeries = (args) => {
             }
         }
     });
-};
-const validateAxisPlotValues = (args) => {
+}
+function validateAxisPlotValues(args) {
     const { series, xAxis, yAxis = [] } = args;
     const yAxisIndex = get(series, 'yAxis', 0);
     const seriesYAxis = yAxis[yAxisIndex];
@@ -236,8 +236,8 @@ const validateAxisPlotValues = (args) => {
             }
         }
     });
-};
-const validatePieSeries = ({ series }) => {
+}
+function validatePieSeries({ series }) {
     series.data.forEach(({ value }) => {
         if (typeof value !== 'number') {
             throw new ChartError({
@@ -246,8 +246,8 @@ const validatePieSeries = ({ series }) => {
             });
         }
     });
-};
-const validateStacking = ({ series }) => {
+}
+function validateStacking({ series }) {
     const availableStackingValues = ['normal', 'percent'];
     if (series.stacking && !availableStackingValues.includes(series.stacking)) {
         throw new ChartError({
@@ -258,8 +258,8 @@ const validateStacking = ({ series }) => {
             }),
         });
     }
-};
-const validateTreemapSeries = ({ series }) => {
+}
+function validateTreemapSeries({ series }) {
     const parentIds = {};
     series.data.forEach((d) => {
         if (d.parentId && !parentIds[d.parentId]) {
@@ -290,8 +290,8 @@ const validateTreemapSeries = ({ series }) => {
             });
         }
     });
-};
-const validateSeries = (args) => {
+}
+function validateSeries(args) {
     const { series, xAxis, yAxis } = args;
     if (!AVAILABLE_SERIES_TYPES.includes(series.type)) {
         throw new ChartError({
@@ -324,8 +324,8 @@ const validateSeries = (args) => {
             validateTreemapSeries({ series });
         }
     }
-};
-const countSeriesByType = (args) => {
+}
+function countSeriesByType(args) {
     const { series, type } = args;
     let count = 0;
     series.forEach((s) => {
@@ -334,8 +334,8 @@ const countSeriesByType = (args) => {
         }
     });
     return count;
-};
-export const validateData = (data) => {
+}
+export function validateData(data) {
     if (isEmpty(data) || isEmpty(data.series) || isEmpty(data.series.data)) {
         throw new ChartError({
             code: CHART_ERROR_CODE.NO_DATA,
@@ -361,4 +361,4 @@ export const validateData = (data) => {
     data.series.data.forEach((series) => {
         validateSeries({ series, yAxis: data.yAxis, xAxis: data.xAxis });
     });
-};
+}

package/dist/esm/components/Axis/AxisX.d.ts

@@ -7,7 +7,8 @@ type Props = {
     height: number;
     scale: ChartScale;
     split: PreparedSplit;
-    plotRef?: React.MutableRefObject<SVGGElement | null>;
+    plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
+    plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     leftmostLimit?: number;
 };
 export declare function getTitlePosition(args: {

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

@@ -42,151 +42,157 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotRef, leftmostLimit } = props;
+    const { axis, width, height: totalHeight, scale, split, plotBeforeRef, plotAfterRef, leftmostLimit, } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const plotDataAttr = 'data-plot-x';
-        let plotContainer = null;
-        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
-            plotContainer = select(plotRef.current);
-            plotContainer.selectAll(`[${plotDataAttr}]`).remove();
-        }
-        if (!axis.visible) {
-            return;
-        }
-        let tickItems = [];
-        if (axis.grid.enabled) {
-            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
-                var _a, _b;
-                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
-                return [-top, -(top + height)];
-            });
-        }
-        const axisScale = scale;
-        const xAxisGenerator = axisBottom({
-            leftmostLimit,
-            scale: axisScale,
-            ticks: {
-                items: tickItems,
-                labelFormat: getLabelFormatter({ axis, scale }),
-                labelsPaddings: axis.labels.padding,
-                labelsMargin: axis.labels.margin,
-                labelsStyle: axis.labels.style,
-                labelsMaxWidth: axis.labels.maxWidth,
-                labelsLineHeight: axis.labels.lineHeight,
-                count: getTicksCount({ axis, range: width }),
-                maxTickCount: getMaxTickCount({ axis, width }),
-                rotation: axis.labels.rotation,
-            },
-            domain: {
-                size: width,
-                color: axis.lineColor,
-            },
-        });
-        svgElement.call(xAxisGenerator).attr('class', b());
-        // add an axis header if necessary
-        if (axis.title.text) {
-            const titleRows = getAxisTitleRows({ axis, textMaxWidth: width });
-            svgElement
-                .append('text')
-                .attr('class', b('title'))
-                .attr('transform', () => {
-                const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
-                return `translate(${x}, ${y})`;
-            })
-                .attr('font-size', axis.title.style.fontSize)
-                .attr('text-anchor', 'middle')
-                .selectAll('tspan')
-                .data(titleRows)
-                .join('tspan')
-                .attr('x', 0)
-                .attr('y', (d) => d.y)
-                .text((d) => d.text)
-                .each((_d, index, nodes) => {
-                if (index === axis.title.maxRowCount - 1) {
-                    handleOverflowingText(nodes[index], width);
-                }
+        (async () => {
+            if (!ref.current) {
+                return;
+            }
+            const svgElement = select(ref.current);
+            svgElement.selectAll('*').remove();
+            const plotDataAttr = 'data-plot-x';
+            let plotBeforeContainer = null;
+            let plotAfterContainer = null;
+            if (plotBeforeRef === null || plotBeforeRef === void 0 ? void 0 : plotBeforeRef.current) {
+                plotBeforeContainer = select(plotBeforeRef.current);
+                plotBeforeContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (plotAfterRef === null || plotAfterRef === void 0 ? void 0 : plotAfterRef.current) {
+                plotAfterContainer = select(plotAfterRef.current);
+                plotAfterContainer.selectAll(`[${plotDataAttr}]`).remove();
+            }
+            if (!axis.visible) {
+                return;
+            }
+            let tickItems = [];
+            if (axis.grid.enabled) {
+                tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
+                    var _a, _b;
+                    const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+                    const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
+                    return [-top, -(top + height)];
+                });
+            }
+            const axisScale = scale;
+            const xAxisGenerator = await axisBottom({
+                leftmostLimit,
+                scale: axisScale,
+                ticks: {
+                    items: tickItems,
+                    labelFormat: getLabelFormatter({ axis, scale }),
+                    labelsPaddings: axis.labels.padding,
+                    labelsMargin: axis.labels.margin,
+                    labelsStyle: axis.labels.style,
+                    labelsMaxWidth: axis.labels.maxWidth,
+                    labelsLineHeight: axis.labels.lineHeight,
+                    count: getTicksCount({ axis, range: width }),
+                    maxTickCount: getMaxTickCount({ axis, width }),
+                    rotation: axis.labels.rotation,
+                },
+                domain: {
+                    size: width,
+                    color: axis.lineColor,
+                },
             });
-        }
-        // add plot bands
-        if (plotContainer && axis.plotBands.length > 0) {
-            const plotBandDataAttr = 'plot-x-band';
-            const plotBandsSelection = plotContainer
-                .selectAll(`[${plotBandDataAttr}]`)
-                .data(axis.plotBands)
-                .join('g')
-                .attr(plotDataAttr, 1)
-                .attr(plotBandDataAttr, 1);
-            plotBandsSelection
-                .append('rect')
-                .attr('x', (band) => {
-                var _a, _b;
-                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
-                const startPos = halfBandwidth + Math.min(from, to);
-                return Math.max(0, startPos);
-            })
-                .attr('width', (band) => {
-                const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
-                const startPos = width - Math.min(from, to);
-                const endPos = Math.min(Math.abs(to - from), startPos);
-                return Math.min(endPos, width);
-            })
-                .attr('y', 0)
-                .attr('height', totalHeight)
-                .attr('fill', (band) => band.color)
-                .attr('opacity', (band) => band.opacity);
-            plotBandsSelection.each((plotBandData, i, nodes) => {
-                const plotLineSelection = select(nodes[i]);
-                if (plotBandData.layerPlacement === 'before') {
-                    plotLineSelection.lower();
-                }
-                else {
-                    plotLineSelection.raise();
-                }
-            });
-        }
-        // add plot lines
-        if (plotContainer && axis.plotLines.length > 0) {
-            const plotLineDataAttr = 'plot-x-line';
-            const plotLinesSelection = plotContainer
-                .selectAll(`[${plotLineDataAttr}]`)
-                .data(axis.plotLines)
-                .join('g')
-                .attr(plotDataAttr, 1)
-                .attr(plotLineDataAttr, 1);
-            const lineGenerator = line();
-            plotLinesSelection
-                .append('path')
-                .attr('d', (plotLine) => {
-                const plotLineValue = Number(axisScale(plotLine.value));
-                const points = [
-                    [plotLineValue, 0],
-                    [plotLineValue, totalHeight],
-                ];
-                return lineGenerator(points);
-            })
-                .attr('stroke', (plotLine) => plotLine.color)
-                .attr('stroke-width', (plotLine) => plotLine.width)
-                .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
-                .attr('opacity', (plotLine) => plotLine.opacity);
-            // set layer placement
-            plotLinesSelection.each((plotLineData, i, nodes) => {
-                const plotLineSelection = select(nodes[i]);
-                if (plotLineData.layerPlacement === 'before') {
-                    plotLineSelection.lower();
-                }
-                else {
-                    plotLineSelection.raise();
-                }
-            });
-        }
-    }, [axis, width, totalHeight, scale, split, plotRef, leftmostLimit]);
+            svgElement.call(xAxisGenerator).attr('class', b());
+            // add an axis header if necessary
+            if (axis.title.text) {
+                const titleRows = await getAxisTitleRows({ axis, textMaxWidth: width });
+                const titleClassName = b('title');
+                svgElement.selectAll(`.${titleClassName}`).remove();
+                svgElement
+                    .append('text')
+                    .attr('class', titleClassName)
+                    .attr('transform', () => {
+                    const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
+                    return `translate(${x}, ${y})`;
+                })
+                    .attr('font-size', axis.title.style.fontSize)
+                    .attr('text-anchor', 'middle')
+                    .selectAll('tspan')
+                    .data(titleRows)
+                    .join('tspan')
+                    .attr('x', 0)
+                    .attr('y', (d) => d.y)
+                    .text((d) => d.text)
+                    .each((_d, index, nodes) => {
+                    if (index === axis.title.maxRowCount - 1) {
+                        handleOverflowingText(nodes[index], width);
+                    }
+                });
+            }
+            // add plot bands
+            if (axis.plotBands.length > 0) {
+                const plotBandDataAttr = 'plot-x-band';
+                const setPlotBands = (plotContainer, plotBands) => {
+                    if (!plotContainer || !plotBands.length) {
+                        return;
+                    }
+                    const plotBandsSelection = plotContainer
+                        .selectAll(`[${plotBandDataAttr}]`)
+                        .remove()
+                        .data(plotBands)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotBandDataAttr, 1);
+                    plotBandsSelection
+                        .append('rect')
+                        .attr('x', (band) => {
+                        var _a, _b;
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                        const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                        const startPos = halfBandwidth + Math.min(from, to);
+                        return Math.max(0, startPos);
+                    })
+                        .attr('width', (band) => {
+                        const { from, to } = getBandsPosition({ band, axisScale, axis: 'x' });
+                        const startPos = width - Math.min(from, to);
+                        const endPos = Math.min(Math.abs(to - from), startPos);
+                        return Math.min(endPos, width);
+                    })
+                        .attr('y', 0)
+                        .attr('height', totalHeight)
+                        .attr('fill', (band) => band.color)
+                        .attr('opacity', (band) => band.opacity);
+                };
+                setPlotBands(plotBeforeContainer, axis.plotBands.filter((d) => d.layerPlacement === 'before'));
+                setPlotBands(plotAfterContainer, axis.plotBands.filter((d) => d.layerPlacement === 'after'));
+            }
+            // add plot lines
+            if (axis.plotLines.length > 0) {
+                const plotLineDataAttr = 'plot-x-line';
+                const setPlotLines = (plotContainer, plotLines) => {
+                    if (!plotContainer || !plotLines.length) {
+                        return;
+                    }
+                    const plotLinesSelection = plotContainer
+                        .selectAll(`[${plotLineDataAttr}]`)
+                        .remove()
+                        .data(plotLines)
+                        .join('g')
+                        .attr(plotDataAttr, 1)
+                        .attr(plotLineDataAttr, 1);
+                    const lineGenerator = line();
+                    plotLinesSelection
+                        .append('path')
+                        .attr('d', (plotLine) => {
+                        const plotLineValue = Number(axisScale(plotLine.value));
+                        const points = [
+                            [plotLineValue, 0],
+                            [plotLineValue, totalHeight],
+                        ];
+                        return lineGenerator(points);
+                    })
+                        .attr('stroke', (plotLine) => plotLine.color)
+                        .attr('stroke-width', (plotLine) => plotLine.width)
+                        .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                        .attr('opacity', (plotLine) => plotLine.opacity);
+                };
+                setPlotLines(plotBeforeContainer, axis.plotLines.filter((d) => d.layerPlacement === 'before'));
+                setPlotLines(plotAfterContainer, axis.plotLines.filter((d) => d.layerPlacement === 'after'));
+            }
+        })();
+    }, [axis, width, totalHeight, scale, split, leftmostLimit, plotBeforeRef, plotAfterRef]);
     return React.createElement("g", { ref: ref });
 });

package/dist/esm/components/Axis/AxisY.d.ts

@@ -7,7 +7,8 @@ type Props = {
     width: number;
     height: number;
     split: PreparedSplit;
-    plotRef?: React.MutableRefObject<SVGGElement | null>;
+    plotBeforeRef?: React.MutableRefObject<SVGGElement | null>;
+    plotAfterRef?: React.MutableRefObject<SVGGElement | null>;
     bottomLimit?: number;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;