@gravity-ui/charts 1.0.1 → 1.2.0

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { line, select } from 'd3';
-import { block, formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
+import { block, formatAxisTickLabel, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('axis');
@@ -42,12 +42,23 @@ export function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split, plotRef } = props;
+    const { axis, width, height: totalHeight, scale, split, plotRef, leftmostLimit } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const plotClassName = b('plot-x');
+        let plotContainer = null;
+        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
+            plotContainer = select(plotRef.current);
+            plotContainer.selectAll(`.${plotClassName}`).remove();
+        }
+        if (!axis.visible) {
+            return;
+        }
         let tickItems = [];
         if (axis.grid.enabled) {
             tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
@@ -59,6 +70,7 @@ export const AxisX = React.memo(function AxisX(props) {
         }
         const axisScale = scale;
         const xAxisGenerator = axisBottom({
+            leftmostLimit,
             scale: axisScale,
             ticks: {
                 items: tickItems,
@@ -77,8 +89,6 @@ export const AxisX = React.memo(function AxisX(props) {
                 color: axis.lineColor,
             },
         });
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
         svgElement.call(xAxisGenerator).attr('class', b());
         // add an axis header if necessary
         if (axis.title.text) {
@@ -104,16 +114,51 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
+        // add plot bands
+        if (plotContainer && axis.plotBands.length > 0) {
+            const plotBandClassName = b('plot-x-band');
+            const plotBandsSelection = plotContainer
+                .selectAll(`.${plotBandClassName}-x`)
+                .data(axis.plotBands)
+                .join('g')
+                .attr('class', `${plotClassName} ${plotBandClassName}-x`);
+            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 (plotRef && axis.plotLines.length > 0) {
-            const plotLineClassName = b('plotLine');
-            const plotLineContainer = select(plotRef.current);
-            plotLineContainer.selectAll(`.${plotLineClassName}-x`).remove();
-            const plotLinesSelection = plotLineContainer
-                .selectAll(`.${plotLineClassName}-x`)
+        if (plotContainer && axis.plotLines.length > 0) {
+            const plotLineClassName = b('plot-x-line');
+            const plotLinesSelection = plotContainer
+                .selectAll(`.${plotLineClassName}`)
                 .data(axis.plotLines)
                 .join('g')
-                .attr('class', `${plotLineClassName}-x`);
+                .attr('class', `${plotClassName} ${plotLineClassName}`);
             const lineGenerator = line();
             plotLinesSelection
                 .append('path')
@@ -140,6 +185,6 @@ export const AxisX = React.memo(function AxisX(props) {
                 }
             });
         }
-    }, [axis, width, totalHeight, scale, split, plotRef]);
+    }, [axis, width, totalHeight, scale, split, plotRef, leftmostLimit]);
     return React.createElement("g", { ref: ref });
 });

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

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

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getBandsPosition, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('axis');
 function transformLabel(args) {
-    const { node, axis } = args;
+    const { node, axis, isTopOffsetOverload = false } = args;
     let topOffset = axis.labels.lineHeight / 2;
+    if (isTopOffsetOverload) {
+        topOffset = 0;
+    }
     let leftOffset = axis.labels.margin;
     if (axis.position === 'left') {
         leftOffset = leftOffset * -1;
@@ -82,7 +85,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
+    const { axes: allAxes, width, height: totalHeight, scale, split, plotRef, bottomLimit = 0, } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     const lineGenerator = line();
@@ -90,8 +93,15 @@ export const AxisY = (props) => {
         if (!ref.current) {
             return;
         }
+        const axes = allAxes.filter((a) => a.visible);
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        let plotContainer = null;
+        const plotClassName = b('plot-y');
+        if (plotRef === null || plotRef === void 0 ? void 0 : plotRef.current) {
+            plotContainer = select(plotRef.current);
+            plotContainer.selectAll(`.${plotClassName}`).remove();
+        }
         const getAxisPosition = (axis) => {
             var _a;
             const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
@@ -108,6 +118,12 @@ export const AxisY = (props) => {
             }
             return acc;
         }, []);
+        const plotBands = axes.reduce((acc, axis) => {
+            if (axis.plotBands.length) {
+                acc.push(...axis.plotBands.map((plotBand) => (Object.assign(Object.assign({}, plotBand), { transform: getAxisPosition(axis) }))));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
@@ -127,8 +143,8 @@ export const AxisY = (props) => {
             });
             yAxisGenerator(axisItem);
             if (d.labels.enabled) {
-                const tickTexts = axisItem
-                    .selectAll('.tick text')
+                const labels = axisItem.selectAll('.tick text');
+                const tickTexts = labels
                     // The offset must be applied before the labels are rotated.
                     // Therefore, we reset the values and make an offset in transform  attribute.
                     // FIXME: give up axisLeft(d3) and switch to our own generation method
@@ -138,6 +154,26 @@ export const AxisY = (props) => {
                     .style('transform', function () {
                     return transformLabel({ node: this, axis: d });
                 });
+                labels.each(function (_d, i) {
+                    if (i === 0) {
+                        const currentElement = this;
+                        const currentElementPosition = currentElement.getBoundingClientRect();
+                        const text = select(currentElement);
+                        if (currentElementPosition.bottom > bottomLimit) {
+                            const transform = transformLabel({
+                                node: this,
+                                axis: d,
+                                isTopOffsetOverload: true,
+                            });
+                            text.style('transform', transform);
+                            if (d.labels.rotation) {
+                                text.attr('text-anchor', () => {
+                                    return d.labels.rotation < 0 ? 'start' : 'end';
+                                });
+                            }
+                        }
+                    }
+                });
                 const textMaxWidth = !d.labels.rotation || Math.abs(d.labels.rotation) % 360 !== 90
                     ? d.labels.maxWidth
                     : (height - d.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
@@ -160,15 +196,50 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
-            if (plotRef && d.plotLines.length > 0) {
-                const plotLineClassName = b('plotLine');
-                const plotLineContainer = select(plotRef.current);
-                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
-                const plotLinesSelection = plotLineContainer
+            if (plotContainer && d.plotBands.length > 0) {
+                const plotBandClassName = b('plot-y-band');
+                const plotBandsSelection = plotContainer
+                    .selectAll(`.${plotBandClassName}`)
+                    .data(plotBands)
+                    .join('g')
+                    .attr('class', `${plotClassName} ${plotBandClassName}`)
+                    .style('transform', (plotBand) => plotBand.transform);
+                plotBandsSelection
+                    .append('rect')
+                    .attr('x', 0)
+                    .attr('width', width)
+                    .attr('y', (band) => {
+                    var _a, _b;
+                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                    const halfBandwidth = ((_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 0) / 2;
+                    const startPos = halfBandwidth + Math.min(from, to);
+                    return Math.max(0, startPos);
+                })
+                    .attr('height', (band) => {
+                    const { from, to } = getBandsPosition({ band, axisScale, axis: 'y' });
+                    const startPos = height - Math.min(from, to);
+                    const endPos = Math.min(Math.abs(to - from), startPos);
+                    return Math.min(endPos, height);
+                })
+                    .attr('fill', (band) => band.color)
+                    .attr('opacity', (band) => band.opacity);
+                plotBandsSelection.each((plotBandData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotBandData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
+            if (plotContainer && d.plotLines.length > 0) {
+                const plotLineClassName = b('plot-y-line');
+                const plotLinesSelection = plotContainer
                     .selectAll(`.${plotLineClassName}`)
                     .data(plotLines)
                     .join('g')
-                    .attr('class', plotLineClassName)
+                    .attr('class', `${plotClassName} ${plotLineClassName}`)
                     .style('transform', (plotLine) => plotLine.transform);
                 plotLinesSelection
                     .append('path')
@@ -240,6 +311,6 @@ export const AxisY = (props) => {
                 handleOverflowingText(nodes[index], height);
             }
         });
-    }, [axes, width, height, scale, split]);
+    }, [allAxes, width, height, scale, split, bottomLimit]);
     return React.createElement("g", { ref: ref, className: b('container') });
 };

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

@@ -17,7 +17,7 @@ export const ChartInner = (props) => {
     const htmlLayerRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current, svgContainer: svgRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -67,9 +67,9 @@ export const ChartInner = (props) => {
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
+                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
                 shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip }))),
         React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {

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

@@ -1,6 +1,8 @@
 .gcharts-chart {
   --gcharts-data-labels: var(--g-color-text-secondary);
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 .gcharts-chart__html-layer {
   display: contents;

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -4,8 +4,11 @@ import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
+    svgContainer: SVGGElement | null;
 };
 export declare function useChartInnerProps(props: Props): {
+    svgBottomPos: number | undefined;
+    svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;

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

@@ -4,7 +4,8 @@ import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
 export function useChartInnerProps(props) {
-    const { width, height, data, dispatcher, htmlLayout } = props;
+    var _a;
+    const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const { chart, title, tooltip } = useChartOptions({ data });
@@ -54,9 +55,19 @@ export function useChartInnerProps(props) {
         htmlLayout,
     });
     const boundsOffsetTop = chart.margin.top;
-    // We only need to consider the width of the first left axis
-    const boundsOffsetLeft = chart.margin.left + getYAxisWidth(yAxis[0]);
+    // We need to calculate the width of each axis because the first axis can be hidden
+    const boundsOffsetLeft = chart.margin.left +
+        yAxis.reduce((acc, axis) => {
+            const axisWidth = getYAxisWidth(axis);
+            if (acc < axisWidth) {
+                acc = axisWidth;
+            }
+            return acc;
+        }, 0);
+    const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
+        svgBottomPos: bottom,
+        svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,

package/dist/cjs/components/Legend/index.js

@@ -185,7 +185,7 @@ export const Legend = (props) => {
                     const mods = { selected: d.visible, unselected: !d.visible };
                     return b('item-text', mods);
                 })
-                    .text(function (d) {
+                    .html(function (d) {
                     return ('name' in d && d.name);
                 })
                     .style('font-size', legend.itemStyle.fontSize);
@@ -283,7 +283,7 @@ export const Legend = (props) => {
                 .attr('font-size', (_d = legend.title.style.fontSize) !== null && _d !== void 0 ? _d : null)
                 .attr('fill', (_e = legend.title.style.fontColor) !== null && _e !== void 0 ? _e : null)
                 .style('alignment-baseline', 'before-edge')
-                .text(legend.title.text);
+                .html(legend.title.text);
         }
         const { left } = getLegendPosition({
             align: legend.align,

package/dist/cjs/components/Title/index.js

@@ -5,5 +5,5 @@ const b = block('title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
     return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: Object.assign({ lineHeight: `${height}px` }, style) },
-        React.createElement("tspan", null, text)));
+        React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
 };

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -1,7 +1,5 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
-import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 const b = block('tooltip');
@@ -12,23 +10,14 @@ const getRowData = (fieldName, data, axis) => {
             const categories = get(axis, 'categories', []);
             return getDataCategoryValue({ axisDirection: fieldName, categories, data });
         }
-        case 'datetime': {
-            const value = get(data, fieldName);
-            if (!value) {
-                return undefined;
-            }
-            return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
-        }
-        case 'linear':
         default: {
-            const value = get(data, fieldName);
-            return formatNumber(value);
+            return get(data, fieldName);
         }
     }
 };
 const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
-const getMeasureValue = (data, xAxis, yAxis) => {
+const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
     var _a, _b, _c, _d;
     if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
@@ -37,12 +26,38 @@ const getMeasureValue = (data, xAxis, yAxis) => {
         return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
-        return getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis);
+        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
+        return getFormattedValue({
+            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
+            format,
+        });
     }
-    return getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis);
+    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
+    return getFormattedValue({
+        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
+        format,
+    });
 };
+function getDefaultValueFormat({ axis }) {
+    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
+        case 'linear':
+        case 'logarithmic': {
+            return {
+                type: 'number',
+            };
+        }
+        case 'datetime': {
+            return {
+                type: 'date',
+                format: DEFAULT_DATE_FORMAT,
+            };
+        }
+        default:
+            return undefined;
+    }
+}
 export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
-    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
+    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
         hovered.map((seriesItem, i) => {
@@ -55,9 +70,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 case 'line':
                 case 'area':
                 case 'bar-x': {
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const formattedValue = getFormattedValue({
                         value: getYRowData(data, yAxis),
-                        format: valueFormat,
+                        format,
                     });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
@@ -70,13 +86,14 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                 case 'waterfall': {
                     const isTotal = get(data, 'total', false);
                     const subTotalValue = getWaterfallPointSubtotal(data, series);
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
                     const subTotal = getFormattedValue({
                         value: subTotalValue,
-                        format: valueFormat,
+                        format,
                     });
                     const formattedValue = getFormattedValue({
                         value: getYRowData(data, yAxis),
-                        format: valueFormat,
+                        format,
                     });
                     return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
                         !isTotal && (React.createElement(React.Fragment, null,
@@ -93,9 +110,10 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                             subTotal)));
                 }
                 case 'bar-y': {
+                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
                     const formattedValue = getFormattedValue({
                         value: getXRowData(data, xAxis),
-                        format: valueFormat,
+                        format,
                     });
                     const value = (React.createElement(React.Fragment, null,
                         series.name,
@@ -110,7 +128,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const seriesData = data;
                     const formattedValue = getFormattedValue({
                         value: seriesData.value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
@@ -124,7 +142,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
                     const formattedValue = getFormattedValue({
                         value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     return (React.createElement("div", { key: id, className: b('content-row') },
                         React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
@@ -142,7 +160,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
                     const seriesData = data;
                     const formattedValue = getFormattedValue({
                         value: seriesData.value,
-                        format: valueFormat,
+                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
                     });
                     const value = (React.createElement(React.Fragment, null,
                         React.createElement("span", null,

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

@@ -8,6 +8,9 @@ const getBottomOffset = (args) => {
     if (preparedLegend.enabled) {
         result += preparedLegend.height + preparedLegend.margin;
     }
+    if (!preparedXAxis.visible) {
+        return result;
+    }
     if (hasAxisRelatedSeries) {
         if (preparedXAxis.title.text) {
             result += preparedXAxis.title.height + preparedXAxis.title.margin;

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

@@ -6,6 +6,9 @@ export const getBoundsWidth = (args) => {
         getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }));
 };
 export function getYAxisWidth(axis) {
+    if (!(axis === null || axis === void 0 ? void 0 : axis.visible)) {
+        return 0;
+    }
     let result = 0;
     if (axis === null || axis === void 0 ? void 0 : axis.title.text) {
         result += axis.title.height + axis.title.margin;

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

@@ -1,5 +1,5 @@
 import type { DashStyle } from 'src/constants';
-import type { AxisPlotLine, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
+import type { AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin, PlotLayerPlacement } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -11,15 +11,16 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
 export type PreparedChart = {
     margin: ChartMargin;
 };
+export type PreparedAxisPlotBand = Required<AxisPlotBand>;
 export type PreparedAxisPlotLine = {
     value: number;
     color: string;
     width: number;
     dashStyle: DashStyle;
     opacity: number;
-    layerPlacement: AxisPlotLine['layerPlacement'];
+    layerPlacement: PlotLayerPlacement;
 };
-export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
+export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
     title: {
@@ -42,6 +43,7 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines'> & {
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
+    plotBands: PreparedAxisPlotBand[];
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;

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

@@ -110,6 +110,14 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
         })),
+        plotBands: get(xAxis, 'plotBands', []).map((d) => ({
+            color: get(d, 'color', 'var(--g-color-base-brand)'),
+            opacity: get(d, 'opacity', 1),
+            from: get(d, 'from', 0),
+            to: get(d, 'to', 0),
+            layerPlacement: get(d, 'layerPlacement', 'before'),
+        })),
+        visible: get(xAxis, 'visible', true),
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

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

@@ -116,6 +116,14 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
             })),
+            plotBands: get(axisItem, 'plotBands', []).map((d) => ({
+                color: get(d, 'color', 'var(--g-color-base-brand)'),
+                opacity: get(d, 'opacity', 1),
+                from: get(d, 'from', 0),
+                to: get(d, 'to', 0),
+                layerPlacement: get(d, 'layerPlacement', 'before'),
+            })),
+            visible: get(axisItem, 'visible', true),
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });