@gravity-ui/charts 1.48.3 → 1.49.0

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -74,7 +74,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, chartMarginLeft, chartMarginRight, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
     for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
@@ -84,18 +84,16 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
         const axisWidth = boundsWidth;
         const isBottomPlot = plotIndex === splitPlots.length - 1;
         const plotYAxes = yAxis.filter((a) => a.plotIndex === plotIndex);
-        const yDomainLeftPosition = ((_b = plotYAxes.find((a) => a.position === 'left')) === null || _b === void 0 ? void 0 : _b.visible)
-            ? 0
-            : null;
-        const yDomainRightPosition = ((_c = plotYAxes.find((a) => a.position === 'right')) === null || _c === void 0 ? void 0 : _c.visible)
-            ? axisWidth
-            : null;
+        const leftYAxis = plotYAxes.find((a) => a.position === 'left');
+        const yDomainLeftPosition = (leftYAxis === null || leftYAxis === void 0 ? void 0 : leftYAxis.visible) && (leftYAxis === null || leftYAxis === void 0 ? void 0 : leftYAxis.lineVisible) !== false ? 0 : null;
+        const rightYAxis = plotYAxes.find((a) => a.position === 'right');
+        const yDomainRightPosition = (rightYAxis === null || rightYAxis === void 0 ? void 0 : rightYAxis.visible) && (rightYAxis === null || rightYAxis === void 0 ? void 0 : rightYAxis.lineVisible) !== false ? axisWidth : null;
         let domain = null;
-        if (isBottomPlot && axis.visible) {
+        if (isBottomPlot && axis.visible && axis.lineVisible !== false) {
             domain = {
                 start: [0, axisTop + axisHeight],
                 end: [axisWidth, axisTop + axisHeight],
-                lineColor: (_d = axis.lineColor) !== null && _d !== void 0 ? _d : '',
+                lineColor: (_b = axis.lineColor) !== null && _b !== void 0 ? _b : '',
             };
         }
         const ticks = [];
@@ -264,14 +262,14 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 axisScale,
                 axis: 'x',
             });
-            const halfBandwidth = ((_f = (_e = axisScale.bandwidth) === null || _e === void 0 ? void 0 : _e.call(axisScale)) !== null && _f !== void 0 ? _f : 0) / 2;
+            const halfBandwidth = ((_d = (_c = axisScale.bandwidth) === null || _c === void 0 ? void 0 : _c.call(axisScale)) !== null && _d !== void 0 ? _d : 0) / 2;
             const startPos = halfBandwidth + Math.min(from, to);
             const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
             const plotBandWidth = Math.min(endPos, axisWidth);
             if (plotBandWidth < 0) {
                 continue;
             }
-            const perpExtent = (_g = calculateNumericProperty({ value: plotBand.size, base: axisHeight })) !== null && _g !== void 0 ? _g : axisHeight;
+            const perpExtent = (_e = calculateNumericProperty({ value: plotBand.size, base: axisHeight })) !== null && _e !== void 0 ? _e : axisHeight;
             // X axis is positioned at the bottom of the plot area, so 'start' = bottom edge.
             const bandY = plotBand.align === 'end' ? axisTop : axisTop + axisHeight - perpExtent;
             const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
@@ -290,8 +288,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     ? {
                         text: plotBand.label.text,
                         style: plotBand.label.style,
-                        x: plotBand.label.padding + ((_h = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _h !== void 0 ? _h : 0),
-                        y: plotBand.label.padding + ((_j = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _j !== void 0 ? _j : 0),
+                        x: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _f !== void 0 ? _f : 0),
+                        y: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _g !== void 0 ? _g : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -118,7 +118,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
     const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
     let domain = null;
-    if (axis.visible) {
+    if (axis.visible && axis.lineVisible !== false) {
         domain = {
             start: [domainX, axisPlotTopPosition],
             end: [domainX, axisPlotTopPosition + axisHeight],

package/dist/cjs/components/ChartInner/utils/normalized-original-data.d.ts

@@ -9,6 +9,7 @@ export declare function getNormalizedXAxis(props: {
     type?: import("../../../types").ChartAxisType;
     labels?: import("../../../types").ChartAxisLabels;
     lineColor?: string;
+    lineVisible?: boolean;
     title?: import("../../../types").ChartAxisTitle;
     min?: number;
     max?: number;

package/dist/cjs/components/ChartInner/utils/zoom.js

@@ -6,7 +6,9 @@ function mapSeriesTypeToZoomType(seriesType) {
         case SERIES_TYPE.Area: {
             return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
         }
-        case SERIES_TYPE.BarX:
+        case SERIES_TYPE.BarX: {
+            return [ZOOM_TYPE.X, ZOOM_TYPE.XY];
+        }
         case SERIES_TYPE.XRange: {
             return [ZOOM_TYPE.X];
         }

package/dist/cjs/core/axes/x-axis.js

@@ -18,7 +18,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat) && tickStep >= TIME_UNITS.day) {
-        axis.labels.dateFormat = getDefaultDateFormat(tickStep);
+        axis.labels.dateFormat = getDefaultDateFormat(tickStep, axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateTimeLabelFormats);
     }
     const labels = tickValues.map((tick) => formatAxisTickLabel({
         axis,
@@ -104,6 +104,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             margin: isLabelsEnabled ? get(xAxis, 'labels.margin', axisLabelsDefaults.margin) : 0,
             padding: get(xAxis, 'labels.padding', axisLabelsDefaults.padding),
             dateFormat: get(xAxis, 'labels.dateFormat'),
+            dateTimeLabelFormats: get(xAxis, 'labels.dateTimeLabelFormats'),
             numberFormat: get(xAxis, 'labels.numberFormat'),
             rotation: get(xAxis, 'labels.rotation', 0),
             style: labelsStyle,
@@ -114,6 +115,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             html: labelsHtml,
         },
         lineColor: get(xAxis, 'lineColor'),
+        lineVisible: get(xAxis, 'lineVisible', true),
         categories: xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories,
         timestamps: get(xAxis, 'timestamps'),
         title: {

package/dist/cjs/core/axes/y-axis.js

@@ -128,6 +128,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
+            lineVisible: get(axisItem, 'lineVisible', true),
             categories: axisItem.categories,
             timestamps: get(axisItem, 'timestamps'),
             title: {

package/dist/cjs/core/constants/defaults/series-options.js

@@ -1,8 +1,8 @@
 export const seriesOptionsDefaults = {
     'bar-x': {
         barMaxWidth: 50,
-        barPadding: 0.1,
-        groupPadding: 0.2,
+        barPadding: 0.2,
+        groupPadding: 0.1,
         stackGap: 1,
         states: {
             hover: {
@@ -17,8 +17,8 @@ export const seriesOptionsDefaults = {
     },
     'bar-y': {
         barMaxWidth: 50,
-        barPadding: 0.1,
-        groupPadding: 0.2,
+        barPadding: 0.2,
+        groupPadding: 0.1,
         stackGap: 1,
         states: {
             hover: {
@@ -105,7 +105,7 @@ export const seriesOptionsDefaults = {
     },
     waterfall: {
         barMaxWidth: 50,
-        barPadding: 0.1,
+        barPadding: 0.2,
         states: {
             hover: {
                 enabled: true,

package/dist/cjs/core/shapes/bar-x/prepare-data.js

@@ -121,8 +121,9 @@ export const prepareBarXData = async (args) => {
     });
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const groupSize = bandSize - groupGap;
-    const rectGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - rectGap, barMaxWidth));
+    const barSlotSize = groupSize / maxGroupSize;
+    const rectGap = Math.max(barSlotSize * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(barSlotSize - rectGap, barMaxWidth));
     const plotIndexes = Array.from(dataByPlots.keys());
     for (let plotDataIndex = 0; plotDataIndex < plotIndexes.length; plotDataIndex++) {
         const data = (_b = dataByPlots.get(plotIndexes[plotDataIndex])) !== null && _b !== void 0 ? _b : {};

package/dist/cjs/core/types/chart/axis.d.ts

@@ -1,5 +1,6 @@
 import type { DurationInput } from '@gravity-ui/date-utils';
 import type { AXIS_TYPE, DashStyle } from '../../constants';
+import type { DateTimeLabelFormats } from '../../utils/time';
 import type { FormatNumberOptions } from '../formatter';
 import type { MeaningfulAny } from '../misc';
 import type { BaseTextStyle } from './base';
@@ -21,6 +22,38 @@ export interface ChartAxisLabels {
      */
     padding?: number;
     dateFormat?: string;
+    /**
+     * Per-granularity display formats for the x-axis datetime labels.
+     * Ignored when `dateFormat` is set.
+     *
+     * Each value is a format string in the same form as the `format` argument to
+     * [`DateTime#format`](https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html) in `@gravity-ui/date-utils`
+     * (see the **`FormatInput`** type there): Day.js–style tokens, e.g. `YYYY`, `MM`, `DD`, `HH`, `mm`, `ss`, `SSS`, `MMM`.
+     *
+     * Additional custom token: `B` expands to the half-year digit (`1` or `2`) — `B` stands for *bi*-annual since `H` and `h` are reserved by Day.js for clock hours.
+     * Use Day.js escape syntax for the label prefix, e.g. `'YYYY [H]B'` → `"2024 H1"`.
+     * Mirrors the quarter pattern: `'YYYY [Q]Q'` → `"2024 Q2"`.
+     *
+     * Partial objects are merged with the built-in `DATETIME_LABEL_FORMATS`; omitted keys keep defaults.
+     * @example ISO-like date and time
+     * ```ts
+     * dateTimeLabelFormats: { day: 'YYYY-MM-DD', hour: 'YYYY-MM-DD HH:mm', minute: 'YYYY-MM-DD HH:mm' }
+     * ```
+     * @example US-style calendar date
+     * ```ts
+     * dateTimeLabelFormats: { day: 'MM/DD/YYYY', week: 'MM/DD/YYYY' }
+     * ```
+     * @example Quarter and half-year labels
+     * ```ts
+     * dateTimeLabelFormats: { quarter: 'YYYY [Q]Q', halfYear: 'YYYY [H]B' }
+     * ```
+     * @example Coarse ranges: short month and full year
+     * ```ts
+     * dateTimeLabelFormats: { month: 'YYYY-MM', year: 'YYYY' }
+     * ```
+     * @see https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html
+     */
+    dateTimeLabelFormats?: DateTimeLabelFormats;
     numberFormat?: FormatNumberOptions;
     style?: Partial<BaseTextStyle>;
     /**
@@ -125,6 +158,11 @@ export interface ChartAxis {
     labels?: ChartAxisLabels;
     /** The color of the line marking the axis itself. */
     lineColor?: string;
+    /**
+     * Whether to display the line marking the axis itself.
+     * @default true
+     */
+    lineVisible?: boolean;
     title?: ChartAxisTitle;
     /**
      * The minimum value of the axis. If undefined the min value is automatically calculated.

package/dist/cjs/core/types/chart/series.d.ts

@@ -65,13 +65,13 @@ export interface ChartSeriesOptions {
          */
         barMaxWidth?: number;
         /**
-         * Padding between each column or bar, in x axis units.
-         * @default 0.1
+         * Padding between each bar as a fraction of the space allocated per bar.
+         * @default 0.2
          */
         barPadding?: number;
         /**
          * Padding between each value groups, in x axis units
-         * @default 0.2
+         * @default 0.1
          */
         groupPadding?: number;
         /**
@@ -113,13 +113,13 @@ export interface ChartSeriesOptions {
          */
         barMaxWidth?: number;
         /**
-         * Padding between each column or bar, in x axis units.
-         * @default 0.1
+         * Padding between each bar as a fraction of the space allocated per bar.
+         * @default 0.2
          */
         barPadding?: number;
         /**
          * Padding between each value groups, in x axis units
-         * @default 0.2
+         * @default 0.1
          */
         groupPadding?: number;
         /**
@@ -254,8 +254,8 @@ export interface ChartSeriesOptions {
          */
         barMaxWidth?: number;
         /**
-         * Padding between each column or bar, in x axis units.
-         * @default 0.1
+         * Padding between each bar as a fraction of the space allocated per bar.
+         * @default 0.2
          */
         barPadding?: number;
         /** Options for the series states that provide additional styling information to the series. */

package/dist/cjs/core/types/chart/zoom.d.ts

@@ -18,7 +18,8 @@ export interface ChartZoom {
      *
      * Supported zoom types by series type:
      * - `Area`, `Line`, `Scatter`: `x`, `y`, `xy`
-     * - `BarX`, `XRange`: `x`
+     * - `BarX`: `x`, `xy`
+     * - `XRange`: `x`
      * - `BarY`: `y`
      *
      * Default zoom type by series type:

package/dist/cjs/core/utils/axis/x-axis.js

@@ -38,7 +38,12 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             return [];
         }
         const scaleTicksCount = getTicksCount({ axis, axisWidth, series });
-        const scaleTicks = getScaleTicks({ scale, ticksCount: scaleTicksCount });
+        const dateTimeLabelFormats = axis.type === 'datetime' ? axis.labels.dateTimeLabelFormats : undefined;
+        const scaleTicks = getScaleTicks({
+            scale,
+            ticksCount: scaleTicksCount,
+            dateTimeLabelFormats,
+        });
         const originalTickValues = scaleTicks.map((t) => ({
             x: scale(t),
             value: t,
@@ -52,7 +57,7 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let ticksCount = result.length - 1;
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
-            const newScaleTicks = getScaleTicks({ scale, ticksCount });
+            const newScaleTicks = getScaleTicks({ scale, ticksCount, dateTimeLabelFormats });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
                 value: t,

package/dist/cjs/core/utils/axis-generators/bottom.d.ts

@@ -5,6 +5,7 @@ interface AxisBottomArgs {
     domain: {
         size: number;
         color?: string;
+        visible?: boolean;
     };
     htmlLayout: HTMLElement;
     scale: AxisScale<AxisDomain>;

package/dist/cjs/core/utils/axis-generators/bottom.js

@@ -194,14 +194,16 @@ export async function axisBottom(args) {
             .append('path')
             .attr('d', tickPath.toString())
             .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
-        // Remove tick that has the same x coordinate like domain
-        selection
-            .selectAll('.tick')
-            .filter((d) => {
-            return position(d) === 0;
-        })
-            .select('path')
-            .remove();
+        // Remove tick that has the same x coordinate like domain (only when domain line is visible)
+        if (domain.visible !== false) {
+            selection
+                .selectAll('.tick')
+                .filter((d) => {
+                return position(d) === 0;
+            })
+                .select('path')
+                .remove();
+        }
         if (labelsHtml) {
             appendHtmlLabels({
                 htmlSelection,
@@ -236,7 +238,9 @@ export async function axisBottom(args) {
                 x,
             });
         }
-        const { size: domainSize, color: domainColor } = domain;
-        selection.call(addDomain, { size: domainSize, color: domainColor });
+        const { size: domainSize, color: domainColor, visible: domainVisible } = domain;
+        if (domainVisible !== false) {
+            selection.call(addDomain, { size: domainSize, color: domainColor });
+        }
     };
 }

package/dist/cjs/core/utils/bar-y.js

@@ -42,7 +42,8 @@ export function getBarYLayout(args) {
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
     const groupSize = bandSize - groupGap;
-    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - barGap, barMaxWidth));
+    const barSlotSize = groupSize / maxGroupSize;
+    const barGap = Math.max(barSlotSize * barPadding, MIN_BAR_GAP);
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(barSlotSize - barGap, barMaxWidth));
     return { bandSize, barGap, barSize };
 }

package/dist/cjs/core/utils/format.js

@@ -4,11 +4,48 @@ import { formatNumber, getDefaultUnit } from '../../libs';
 import { DEFAULT_DATE_FORMAT } from '../constants';
 import { DATETIME_LABEL_FORMATS, TIME_UNITS, getDefaultDateFormat, getDefaultTimeOnlyFormat, } from './time';
 const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
+/**
+ * Expands the custom `B` token before passing the format string to `date.format()`.
+ *
+ * - `B` — half-year (*B*i-annual) digit: expands to `1` or `2`.
+ *   `H` and `h` are already reserved by Day.js (24 h and 12 h clock hours respectively),
+ *   so `B` (from Latin *bi*, "twice a year") is used as the token for half-year.
+ *   No major date library defines a native half-year token, so this is a custom convention.
+ *   Use Day.js escape syntax for the label prefix, e.g. `'YYYY [H]B'` → `"2024 H1"`.
+ *   Mirrors the quarter pattern: `'YYYY [Q]Q'` → `"2024 Q2"`.
+ *
+ * Tokens inside `[…]` Day.js escape blocks are passed through unchanged.
+ */
+function processCustomDateTokens(format, date) {
+    let result = '';
+    let i = 0;
+    while (i < format.length) {
+        if (format[i] === '[') {
+            const end = format.indexOf(']', i + 1);
+            if (end === -1) {
+                result += format[i++];
+            }
+            else {
+                result += format.slice(i, end + 1);
+                i = end + 1;
+            }
+        }
+        else if (format[i] === 'B') {
+            result += date.month() < 6 ? '1' : '2';
+            i++;
+        }
+        else {
+            result += format[i++];
+        }
+    }
+    return result;
+}
 function getFormattedDate(args) {
     const { value, format = DEFAULT_DATE_FORMAT } = args;
     const date = dateTimeUtc({ input: value });
     if (date === null || date === void 0 ? void 0 : date.isValid()) {
-        const formattedDate = date.format(format);
+        const processedFormat = processCustomDateTokens(format, date);
+        const formattedDate = date.format(processedFormat);
         if (LETTER_MOUNTH_AT_START_FORMAT_REGEXP.test(format)) {
             return capitalize(formattedDate);
         }
@@ -57,7 +94,7 @@ export function formatAxisTickLabel(args) {
                 format = isMidnight ? DATETIME_LABEL_FORMATS.day : getDefaultTimeOnlyFormat(step);
             }
             else {
-                format = getDefaultDateFormat(step);
+                format = getDefaultDateFormat(step, axis.labels.dateTimeLabelFormats);
             }
             return getFormattedDate({ value: date, format });
         }

package/dist/cjs/core/utils/ticks/datetime.d.ts

@@ -1,3 +1,4 @@
+import type { DateTimeLabelFormats } from '../time';
 /**
  * Generates time ticks for the given interval.
  *
@@ -5,4 +6,4 @@
  * weeks are considered to start on Monday (ISO 8601 standard)
  * instead of Sunday (d3 default).
  */
-export declare function getDateTimeTicks(start: Date, stop: Date, count?: number): Date[];
+export declare function getDateTimeTicks(start: Date, stop: Date, count?: number, formats?: DateTimeLabelFormats): Date[];

package/dist/cjs/core/utils/ticks/datetime.js

@@ -1,7 +1,10 @@
 import { bisector, tickStep } from 'd3-array';
 import { utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3-time';
 import { DAY, HOUR, MINUTE, MONTH, SECOND, WEEK, YEAR } from '../../constants';
-const tickIntervals = [
+// Base tick intervals matching the original D3 utcTicks algorithm
+// (with Monday-start weeks). Extra granularities live in optionalTickIntervals
+// and are injected only when the matching dateTimeLabelFormats key is provided.
+const baseTickIntervals = [
     [utcSecond, 1, SECOND],
     [utcSecond, 5, 5 * SECOND],
     [utcSecond, 15, 15 * SECOND],
@@ -21,20 +24,37 @@ const tickIntervals = [
     [utcMonth, 3, 3 * MONTH],
     [utcYear, 1, YEAR],
 ];
+const optionalTickIntervals = {
+    halfYear: [utcMonth, 6, 6 * MONTH],
+};
 // utcDay.every(2) resets its day counter at the start of each month (field = getUTCDate() - 1),
 // so in a 31-day month the last tick lands on day 31 and the next tick is day 1 of the following
 // month — only 1 day apart. Filtering by absolute Unix day number avoids the monthly reset.
 const utcEvery2Days = utcDay.filter((d) => Math.floor(d.getTime() / DAY) % 2 === 0);
-function getDateTimeTickInterval(start, stop, count) {
+function buildTickIntervals(formats) {
+    if (!formats) {
+        return baseTickIntervals;
+    }
+    const extras = Object.keys(formats).flatMap((key) => {
+        const entry = optionalTickIntervals[key];
+        return entry ? [entry] : [];
+    });
+    if (extras.length === 0) {
+        return baseTickIntervals;
+    }
+    return [...baseTickIntervals, ...extras].sort((a, b) => a[2] - b[2]);
+}
+function getDateTimeTickInterval(start, stop, count, formats) {
+    const intervals = buildTickIntervals(formats);
     const target = Math.abs(stop - start) / count;
-    const i = bisector(([, , step]) => step).right(tickIntervals, target);
-    if (i === tickIntervals.length) {
+    const i = bisector(([, , step]) => step).right(intervals, target);
+    if (i === intervals.length) {
         return utcYear.every(tickStep(start / YEAR, stop / YEAR, count));
     }
     if (i === 0) {
         return utcMillisecond.every(Math.max(tickStep(start, stop, count), 1));
     }
-    const [t, step] = tickIntervals[target / tickIntervals[i - 1][2] < tickIntervals[i][2] / target ? i - 1 : i];
+    const [t, step] = intervals[target / intervals[i - 1][2] < intervals[i][2] / target ? i - 1 : i];
     if (t === utcDay && step === 2) {
         return utcEvery2Days;
     }
@@ -47,12 +67,12 @@ function getDateTimeTickInterval(start, stop, count) {
  * weeks are considered to start on Monday (ISO 8601 standard)
  * instead of Sunday (d3 default).
  */
-export function getDateTimeTicks(start, stop, count = 10) {
+export function getDateTimeTicks(start, stop, count = 10, formats) {
     const reverse = stop < start;
     if (reverse) {
         [start, stop] = [stop, start];
     }
-    const interval = getDateTimeTickInterval(start.getTime(), stop.getTime(), count);
+    const interval = getDateTimeTickInterval(start.getTime(), stop.getTime(), count, formats);
     const ticks = interval ? interval.range(start, new Date(Number(stop) + 1)) : [];
     return reverse ? ticks.reverse() : ticks;
 }

package/dist/cjs/core/utils/ticks/index.d.ts

@@ -1,6 +1,8 @@
 import type { AxisDomain, AxisScale } from 'd3-axis';
 import type { ChartScale } from '../../../hooks';
-export declare function getScaleTicks({ scale, ticksCount, }: {
+import { getDateTimeTicks } from './datetime';
+export declare function getScaleTicks({ scale, ticksCount, dateTimeLabelFormats, }: {
     scale: ChartScale | AxisScale<AxisDomain>;
     ticksCount?: number;
+    dateTimeLabelFormats?: Parameters<typeof getDateTimeTicks>[3];
 }): string[] | number[] | Date[];

package/dist/cjs/core/utils/ticks/index.js

@@ -1,5 +1,5 @@
 import { getDateTimeTicks } from './datetime';
-export function getScaleTicks({ scale, ticksCount, }) {
+export function getScaleTicks({ scale, ticksCount, dateTimeLabelFormats, }) {
     const scaleDomain = scale.domain();
     switch (typeof scaleDomain[0]) {
         case 'number': {
@@ -7,7 +7,7 @@ export function getScaleTicks({ scale, ticksCount, }) {
         }
         // datetime scale
         case 'object': {
-            return getDateTimeTicks(scaleDomain[0], scaleDomain[scaleDomain.length - 1], ticksCount);
+            return getDateTimeTicks(scaleDomain[0], scaleDomain[scaleDomain.length - 1], ticksCount, dateTimeLabelFormats);
         }
         case 'string': {
             return scaleDomain;

package/dist/cjs/core/utils/time.d.ts

@@ -6,6 +6,8 @@ export declare const TIME_UNITS: {
     readonly day: number;
     readonly week: number;
     readonly month: number;
+    readonly quarter: number;
+    readonly halfYear: number;
     readonly year: number;
 };
 export type TimeUnit = keyof typeof TIME_UNITS;

package/dist/cjs/core/utils/time.js

@@ -6,6 +6,8 @@ export const TIME_UNITS = {
     day: 24 * 3600000,
     week: 7 * 24 * 3600000,
     month: 28 * 24 * 3600000,
+    quarter: 62 * 24 * 3600000,
+    halfYear: 160 * 24 * 3600000,
     year: 364 * 24 * 3600000,
 };
 export const DATETIME_LABEL_FORMATS = {
@@ -16,6 +18,8 @@ export const DATETIME_LABEL_FORMATS = {
     day: 'DD.MM.YY',
     week: 'DD.MM.YY',
     month: "MMM 'YY",
+    quarter: "MMM 'YY",
+    halfYear: "MMM 'YY",
     year: 'YYYY',
 };
 function getTimeUnit(range) {

package/dist/esm/components/AxisX/prepare-axis-data.js

@@ -74,7 +74,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, chartMarginLeft, chartMarginRight, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
     for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
@@ -84,18 +84,16 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
         const axisWidth = boundsWidth;
         const isBottomPlot = plotIndex === splitPlots.length - 1;
         const plotYAxes = yAxis.filter((a) => a.plotIndex === plotIndex);
-        const yDomainLeftPosition = ((_b = plotYAxes.find((a) => a.position === 'left')) === null || _b === void 0 ? void 0 : _b.visible)
-            ? 0
-            : null;
-        const yDomainRightPosition = ((_c = plotYAxes.find((a) => a.position === 'right')) === null || _c === void 0 ? void 0 : _c.visible)
-            ? axisWidth
-            : null;
+        const leftYAxis = plotYAxes.find((a) => a.position === 'left');
+        const yDomainLeftPosition = (leftYAxis === null || leftYAxis === void 0 ? void 0 : leftYAxis.visible) && (leftYAxis === null || leftYAxis === void 0 ? void 0 : leftYAxis.lineVisible) !== false ? 0 : null;
+        const rightYAxis = plotYAxes.find((a) => a.position === 'right');
+        const yDomainRightPosition = (rightYAxis === null || rightYAxis === void 0 ? void 0 : rightYAxis.visible) && (rightYAxis === null || rightYAxis === void 0 ? void 0 : rightYAxis.lineVisible) !== false ? axisWidth : null;
         let domain = null;
-        if (isBottomPlot && axis.visible) {
+        if (isBottomPlot && axis.visible && axis.lineVisible !== false) {
             domain = {
                 start: [0, axisTop + axisHeight],
                 end: [axisWidth, axisTop + axisHeight],
-                lineColor: (_d = axis.lineColor) !== null && _d !== void 0 ? _d : '',
+                lineColor: (_b = axis.lineColor) !== null && _b !== void 0 ? _b : '',
             };
         }
         const ticks = [];
@@ -264,14 +262,14 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                 axisScale,
                 axis: 'x',
             });
-            const halfBandwidth = ((_f = (_e = axisScale.bandwidth) === null || _e === void 0 ? void 0 : _e.call(axisScale)) !== null && _f !== void 0 ? _f : 0) / 2;
+            const halfBandwidth = ((_d = (_c = axisScale.bandwidth) === null || _c === void 0 ? void 0 : _c.call(axisScale)) !== null && _d !== void 0 ? _d : 0) / 2;
             const startPos = halfBandwidth + Math.min(from, to);
             const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
             const plotBandWidth = Math.min(endPos, axisWidth);
             if (plotBandWidth < 0) {
                 continue;
             }
-            const perpExtent = (_g = calculateNumericProperty({ value: plotBand.size, base: axisHeight })) !== null && _g !== void 0 ? _g : axisHeight;
+            const perpExtent = (_e = calculateNumericProperty({ value: plotBand.size, base: axisHeight })) !== null && _e !== void 0 ? _e : axisHeight;
             // X axis is positioned at the bottom of the plot area, so 'start' = bottom edge.
             const bandY = plotBand.align === 'end' ? axisTop : axisTop + axisHeight - perpExtent;
             const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
@@ -290,8 +288,8 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
                     ? {
                         text: plotBand.label.text,
                         style: plotBand.label.style,
-                        x: plotBand.label.padding + ((_h = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _h !== void 0 ? _h : 0),
-                        y: plotBand.label.padding + ((_j = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _j !== void 0 ? _j : 0),
+                        x: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _f !== void 0 ? _f : 0),
+                        y: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _g !== void 0 ? _g : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }

package/dist/esm/components/AxisY/prepare-axis-data.js

@@ -118,7 +118,7 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
     const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
     let domain = null;
-    if (axis.visible) {
+    if (axis.visible && axis.lineVisible !== false) {
         domain = {
             start: [domainX, axisPlotTopPosition],
             end: [domainX, axisPlotTopPosition + axisHeight],

package/dist/esm/components/ChartInner/utils/normalized-original-data.d.ts

@@ -9,6 +9,7 @@ export declare function getNormalizedXAxis(props: {
     type?: import("../../..").ChartAxisType;
     labels?: import("../../..").ChartAxisLabels;
     lineColor?: string;
+    lineVisible?: boolean;
     title?: import("../../..").ChartAxisTitle;
     min?: number;
     max?: number;

package/dist/esm/components/ChartInner/utils/zoom.js

@@ -6,7 +6,9 @@ function mapSeriesTypeToZoomType(seriesType) {
         case SERIES_TYPE.Area: {
             return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
         }
-        case SERIES_TYPE.BarX:
+        case SERIES_TYPE.BarX: {
+            return [ZOOM_TYPE.X, ZOOM_TYPE.XY];
+        }
         case SERIES_TYPE.XRange: {
             return [ZOOM_TYPE.X];
         }

package/dist/esm/core/axes/x-axis.js

@@ -18,7 +18,7 @@ async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
     const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight, series: seriesData });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
     if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat) && tickStep >= TIME_UNITS.day) {
-        axis.labels.dateFormat = getDefaultDateFormat(tickStep);
+        axis.labels.dateFormat = getDefaultDateFormat(tickStep, axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateTimeLabelFormats);
     }
     const labels = tickValues.map((tick) => formatAxisTickLabel({
         axis,
@@ -104,6 +104,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             margin: isLabelsEnabled ? get(xAxis, 'labels.margin', axisLabelsDefaults.margin) : 0,
             padding: get(xAxis, 'labels.padding', axisLabelsDefaults.padding),
             dateFormat: get(xAxis, 'labels.dateFormat'),
+            dateTimeLabelFormats: get(xAxis, 'labels.dateTimeLabelFormats'),
             numberFormat: get(xAxis, 'labels.numberFormat'),
             rotation: get(xAxis, 'labels.rotation', 0),
             style: labelsStyle,
@@ -114,6 +115,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             html: labelsHtml,
         },
         lineColor: get(xAxis, 'lineColor'),
+        lineVisible: get(xAxis, 'lineVisible', true),
         categories: xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories,
         timestamps: get(xAxis, 'timestamps'),
         title: {

package/dist/esm/core/axes/y-axis.js

@@ -128,6 +128,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
+            lineVisible: get(axisItem, 'lineVisible', true),
             categories: axisItem.categories,
             timestamps: get(axisItem, 'timestamps'),
             title: {

package/dist/esm/core/constants/defaults/series-options.js

@@ -1,8 +1,8 @@
 export const seriesOptionsDefaults = {
     'bar-x': {
         barMaxWidth: 50,
-        barPadding: 0.1,
-        groupPadding: 0.2,
+        barPadding: 0.2,
+        groupPadding: 0.1,
         stackGap: 1,
         states: {
             hover: {
@@ -17,8 +17,8 @@ export const seriesOptionsDefaults = {
     },
     'bar-y': {
         barMaxWidth: 50,
-        barPadding: 0.1,
-        groupPadding: 0.2,
+        barPadding: 0.2,
+        groupPadding: 0.1,
         stackGap: 1,
         states: {
             hover: {
@@ -105,7 +105,7 @@ export const seriesOptionsDefaults = {
     },
     waterfall: {
         barMaxWidth: 50,
-        barPadding: 0.1,
+        barPadding: 0.2,
         states: {
             hover: {
                 enabled: true,

package/dist/esm/core/shapes/bar-x/prepare-data.js

@@ -121,8 +121,9 @@ export const prepareBarXData = async (args) => {
     });
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const groupSize = bandSize - groupGap;
-    const rectGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - rectGap, barMaxWidth));
+    const barSlotSize = groupSize / maxGroupSize;
+    const rectGap = Math.max(barSlotSize * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(barSlotSize - rectGap, barMaxWidth));
     const plotIndexes = Array.from(dataByPlots.keys());
     for (let plotDataIndex = 0; plotDataIndex < plotIndexes.length; plotDataIndex++) {
         const data = (_b = dataByPlots.get(plotIndexes[plotDataIndex])) !== null && _b !== void 0 ? _b : {};

package/dist/esm/core/types/chart/axis.d.ts

@@ -1,5 +1,6 @@
 import type { DurationInput } from '@gravity-ui/date-utils';
 import type { AXIS_TYPE, DashStyle } from '../../constants';
+import type { DateTimeLabelFormats } from '../../utils/time';
 import type { FormatNumberOptions } from '../formatter';
 import type { MeaningfulAny } from '../misc';
 import type { BaseTextStyle } from './base';
@@ -21,6 +22,38 @@ export interface ChartAxisLabels {
      */
     padding?: number;
     dateFormat?: string;
+    /**
+     * Per-granularity display formats for the x-axis datetime labels.
+     * Ignored when `dateFormat` is set.
+     *
+     * Each value is a format string in the same form as the `format` argument to
+     * [`DateTime#format`](https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html) in `@gravity-ui/date-utils`
+     * (see the **`FormatInput`** type there): Day.js–style tokens, e.g. `YYYY`, `MM`, `DD`, `HH`, `mm`, `ss`, `SSS`, `MMM`.
+     *
+     * Additional custom token: `B` expands to the half-year digit (`1` or `2`) — `B` stands for *bi*-annual since `H` and `h` are reserved by Day.js for clock hours.
+     * Use Day.js escape syntax for the label prefix, e.g. `'YYYY [H]B'` → `"2024 H1"`.
+     * Mirrors the quarter pattern: `'YYYY [Q]Q'` → `"2024 Q2"`.
+     *
+     * Partial objects are merged with the built-in `DATETIME_LABEL_FORMATS`; omitted keys keep defaults.
+     * @example ISO-like date and time
+     * ```ts
+     * dateTimeLabelFormats: { day: 'YYYY-MM-DD', hour: 'YYYY-MM-DD HH:mm', minute: 'YYYY-MM-DD HH:mm' }
+     * ```
+     * @example US-style calendar date
+     * ```ts
+     * dateTimeLabelFormats: { day: 'MM/DD/YYYY', week: 'MM/DD/YYYY' }
+     * ```
+     * @example Quarter and half-year labels
+     * ```ts
+     * dateTimeLabelFormats: { quarter: 'YYYY [Q]Q', halfYear: 'YYYY [H]B' }
+     * ```
+     * @example Coarse ranges: short month and full year
+     * ```ts
+     * dateTimeLabelFormats: { month: 'YYYY-MM', year: 'YYYY' }
+     * ```
+     * @see https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html
+     */
+    dateTimeLabelFormats?: DateTimeLabelFormats;
     numberFormat?: FormatNumberOptions;
     style?: Partial<BaseTextStyle>;
     /**
@@ -125,6 +158,11 @@ export interface ChartAxis {
     labels?: ChartAxisLabels;
     /** The color of the line marking the axis itself. */
     lineColor?: string;
+    /**
+     * Whether to display the line marking the axis itself.
+     * @default true
+     */
+    lineVisible?: boolean;
     title?: ChartAxisTitle;
     /**
      * The minimum value of the axis. If undefined the min value is automatically calculated.

package/dist/esm/core/types/chart/series.d.ts

@@ -65,13 +65,13 @@ export interface ChartSeriesOptions {
          */
         barMaxWidth?: number;
         /**
-         * Padding between each column or bar, in x axis units.
-         * @default 0.1
+         * Padding between each bar as a fraction of the space allocated per bar.
+         * @default 0.2
          */
         barPadding?: number;
         /**
          * Padding between each value groups, in x axis units
-         * @default 0.2
+         * @default 0.1
          */
         groupPadding?: number;
         /**
@@ -113,13 +113,13 @@ export interface ChartSeriesOptions {
          */
         barMaxWidth?: number;
         /**
-         * Padding between each column or bar, in x axis units.
-         * @default 0.1
+         * Padding between each bar as a fraction of the space allocated per bar.
+         * @default 0.2
          */
         barPadding?: number;
         /**
          * Padding between each value groups, in x axis units
-         * @default 0.2
+         * @default 0.1
          */
         groupPadding?: number;
         /**
@@ -254,8 +254,8 @@ export interface ChartSeriesOptions {
          */
         barMaxWidth?: number;
         /**
-         * Padding between each column or bar, in x axis units.
-         * @default 0.1
+         * Padding between each bar as a fraction of the space allocated per bar.
+         * @default 0.2
          */
         barPadding?: number;
         /** Options for the series states that provide additional styling information to the series. */

package/dist/esm/core/types/chart/zoom.d.ts

@@ -18,7 +18,8 @@ export interface ChartZoom {
      *
      * Supported zoom types by series type:
      * - `Area`, `Line`, `Scatter`: `x`, `y`, `xy`
-     * - `BarX`, `XRange`: `x`
+     * - `BarX`: `x`, `xy`
+     * - `XRange`: `x`
      * - `BarY`: `y`
      *
      * Default zoom type by series type:

package/dist/esm/core/utils/axis/x-axis.js

@@ -38,7 +38,12 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             return [];
         }
         const scaleTicksCount = getTicksCount({ axis, axisWidth, series });
-        const scaleTicks = getScaleTicks({ scale, ticksCount: scaleTicksCount });
+        const dateTimeLabelFormats = axis.type === 'datetime' ? axis.labels.dateTimeLabelFormats : undefined;
+        const scaleTicks = getScaleTicks({
+            scale,
+            ticksCount: scaleTicksCount,
+            dateTimeLabelFormats,
+        });
         const originalTickValues = scaleTicks.map((t) => ({
             x: scale(t),
             value: t,
@@ -52,7 +57,7 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let ticksCount = result.length - 1;
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
-            const newScaleTicks = getScaleTicks({ scale, ticksCount });
+            const newScaleTicks = getScaleTicks({ scale, ticksCount, dateTimeLabelFormats });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
                 value: t,

package/dist/esm/core/utils/axis-generators/bottom.d.ts

@@ -5,6 +5,7 @@ interface AxisBottomArgs {
     domain: {
         size: number;
         color?: string;
+        visible?: boolean;
     };
     htmlLayout: HTMLElement;
     scale: AxisScale<AxisDomain>;

package/dist/esm/core/utils/axis-generators/bottom.js

@@ -194,14 +194,16 @@ export async function axisBottom(args) {
             .append('path')
             .attr('d', tickPath.toString())
             .attr('stroke', tickColor !== null && tickColor !== void 0 ? tickColor : 'currentColor');
-        // Remove tick that has the same x coordinate like domain
-        selection
-            .selectAll('.tick')
-            .filter((d) => {
-            return position(d) === 0;
-        })
-            .select('path')
-            .remove();
+        // Remove tick that has the same x coordinate like domain (only when domain line is visible)
+        if (domain.visible !== false) {
+            selection
+                .selectAll('.tick')
+                .filter((d) => {
+                return position(d) === 0;
+            })
+                .select('path')
+                .remove();
+        }
         if (labelsHtml) {
             appendHtmlLabels({
                 htmlSelection,
@@ -236,7 +238,9 @@ export async function axisBottom(args) {
                 x,
             });
         }
-        const { size: domainSize, color: domainColor } = domain;
-        selection.call(addDomain, { size: domainSize, color: domainColor });
+        const { size: domainSize, color: domainColor, visible: domainVisible } = domain;
+        if (domainVisible !== false) {
+            selection.call(addDomain, { size: domainSize, color: domainColor });
+        }
     };
 }

package/dist/esm/core/utils/bar-y.js

@@ -42,7 +42,8 @@ export function getBarYLayout(args) {
     const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
     const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
     const groupSize = bandSize - groupGap;
-    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
-    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - barGap, barMaxWidth));
+    const barSlotSize = groupSize / maxGroupSize;
+    const barGap = Math.max(barSlotSize * barPadding, MIN_BAR_GAP);
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(barSlotSize - barGap, barMaxWidth));
     return { bandSize, barGap, barSize };
 }

package/dist/esm/core/utils/format.js

@@ -4,11 +4,48 @@ import { formatNumber, getDefaultUnit } from '../../libs';
 import { DEFAULT_DATE_FORMAT } from '../constants';
 import { DATETIME_LABEL_FORMATS, TIME_UNITS, getDefaultDateFormat, getDefaultTimeOnlyFormat, } from './time';
 const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
+/**
+ * Expands the custom `B` token before passing the format string to `date.format()`.
+ *
+ * - `B` — half-year (*B*i-annual) digit: expands to `1` or `2`.
+ *   `H` and `h` are already reserved by Day.js (24 h and 12 h clock hours respectively),
+ *   so `B` (from Latin *bi*, "twice a year") is used as the token for half-year.
+ *   No major date library defines a native half-year token, so this is a custom convention.
+ *   Use Day.js escape syntax for the label prefix, e.g. `'YYYY [H]B'` → `"2024 H1"`.
+ *   Mirrors the quarter pattern: `'YYYY [Q]Q'` → `"2024 Q2"`.
+ *
+ * Tokens inside `[…]` Day.js escape blocks are passed through unchanged.
+ */
+function processCustomDateTokens(format, date) {
+    let result = '';
+    let i = 0;
+    while (i < format.length) {
+        if (format[i] === '[') {
+            const end = format.indexOf(']', i + 1);
+            if (end === -1) {
+                result += format[i++];
+            }
+            else {
+                result += format.slice(i, end + 1);
+                i = end + 1;
+            }
+        }
+        else if (format[i] === 'B') {
+            result += date.month() < 6 ? '1' : '2';
+            i++;
+        }
+        else {
+            result += format[i++];
+        }
+    }
+    return result;
+}
 function getFormattedDate(args) {
     const { value, format = DEFAULT_DATE_FORMAT } = args;
     const date = dateTimeUtc({ input: value });
     if (date === null || date === void 0 ? void 0 : date.isValid()) {
-        const formattedDate = date.format(format);
+        const processedFormat = processCustomDateTokens(format, date);
+        const formattedDate = date.format(processedFormat);
         if (LETTER_MOUNTH_AT_START_FORMAT_REGEXP.test(format)) {
             return capitalize(formattedDate);
         }
@@ -57,7 +94,7 @@ export function formatAxisTickLabel(args) {
                 format = isMidnight ? DATETIME_LABEL_FORMATS.day : getDefaultTimeOnlyFormat(step);
             }
             else {
-                format = getDefaultDateFormat(step);
+                format = getDefaultDateFormat(step, axis.labels.dateTimeLabelFormats);
             }
             return getFormattedDate({ value: date, format });
         }

package/dist/esm/core/utils/ticks/datetime.d.ts

@@ -1,3 +1,4 @@
+import type { DateTimeLabelFormats } from '../time';
 /**
  * Generates time ticks for the given interval.
  *
@@ -5,4 +6,4 @@
  * weeks are considered to start on Monday (ISO 8601 standard)
  * instead of Sunday (d3 default).
  */
-export declare function getDateTimeTicks(start: Date, stop: Date, count?: number): Date[];
+export declare function getDateTimeTicks(start: Date, stop: Date, count?: number, formats?: DateTimeLabelFormats): Date[];

package/dist/esm/core/utils/ticks/datetime.js

@@ -1,7 +1,10 @@
 import { bisector, tickStep } from 'd3-array';
 import { utcDay, utcHour, utcMillisecond, utcMinute, utcMonth, utcSecond, utcMonday as utcWeek, utcYear, } from 'd3-time';
 import { DAY, HOUR, MINUTE, MONTH, SECOND, WEEK, YEAR } from '../../constants';
-const tickIntervals = [
+// Base tick intervals matching the original D3 utcTicks algorithm
+// (with Monday-start weeks). Extra granularities live in optionalTickIntervals
+// and are injected only when the matching dateTimeLabelFormats key is provided.
+const baseTickIntervals = [
     [utcSecond, 1, SECOND],
     [utcSecond, 5, 5 * SECOND],
     [utcSecond, 15, 15 * SECOND],
@@ -21,20 +24,37 @@ const tickIntervals = [
     [utcMonth, 3, 3 * MONTH],
     [utcYear, 1, YEAR],
 ];
+const optionalTickIntervals = {
+    halfYear: [utcMonth, 6, 6 * MONTH],
+};
 // utcDay.every(2) resets its day counter at the start of each month (field = getUTCDate() - 1),
 // so in a 31-day month the last tick lands on day 31 and the next tick is day 1 of the following
 // month — only 1 day apart. Filtering by absolute Unix day number avoids the monthly reset.
 const utcEvery2Days = utcDay.filter((d) => Math.floor(d.getTime() / DAY) % 2 === 0);
-function getDateTimeTickInterval(start, stop, count) {
+function buildTickIntervals(formats) {
+    if (!formats) {
+        return baseTickIntervals;
+    }
+    const extras = Object.keys(formats).flatMap((key) => {
+        const entry = optionalTickIntervals[key];
+        return entry ? [entry] : [];
+    });
+    if (extras.length === 0) {
+        return baseTickIntervals;
+    }
+    return [...baseTickIntervals, ...extras].sort((a, b) => a[2] - b[2]);
+}
+function getDateTimeTickInterval(start, stop, count, formats) {
+    const intervals = buildTickIntervals(formats);
     const target = Math.abs(stop - start) / count;
-    const i = bisector(([, , step]) => step).right(tickIntervals, target);
-    if (i === tickIntervals.length) {
+    const i = bisector(([, , step]) => step).right(intervals, target);
+    if (i === intervals.length) {
         return utcYear.every(tickStep(start / YEAR, stop / YEAR, count));
     }
     if (i === 0) {
         return utcMillisecond.every(Math.max(tickStep(start, stop, count), 1));
     }
-    const [t, step] = tickIntervals[target / tickIntervals[i - 1][2] < tickIntervals[i][2] / target ? i - 1 : i];
+    const [t, step] = intervals[target / intervals[i - 1][2] < intervals[i][2] / target ? i - 1 : i];
     if (t === utcDay && step === 2) {
         return utcEvery2Days;
     }
@@ -47,12 +67,12 @@ function getDateTimeTickInterval(start, stop, count) {
  * weeks are considered to start on Monday (ISO 8601 standard)
  * instead of Sunday (d3 default).
  */
-export function getDateTimeTicks(start, stop, count = 10) {
+export function getDateTimeTicks(start, stop, count = 10, formats) {
     const reverse = stop < start;
     if (reverse) {
         [start, stop] = [stop, start];
     }
-    const interval = getDateTimeTickInterval(start.getTime(), stop.getTime(), count);
+    const interval = getDateTimeTickInterval(start.getTime(), stop.getTime(), count, formats);
     const ticks = interval ? interval.range(start, new Date(Number(stop) + 1)) : [];
     return reverse ? ticks.reverse() : ticks;
 }

package/dist/esm/core/utils/ticks/index.d.ts

@@ -1,6 +1,8 @@
 import type { AxisDomain, AxisScale } from 'd3-axis';
 import type { ChartScale } from '../../../hooks';
-export declare function getScaleTicks({ scale, ticksCount, }: {
+import { getDateTimeTicks } from './datetime';
+export declare function getScaleTicks({ scale, ticksCount, dateTimeLabelFormats, }: {
     scale: ChartScale | AxisScale<AxisDomain>;
     ticksCount?: number;
+    dateTimeLabelFormats?: Parameters<typeof getDateTimeTicks>[3];
 }): string[] | number[] | Date[];

package/dist/esm/core/utils/ticks/index.js

@@ -1,5 +1,5 @@
 import { getDateTimeTicks } from './datetime';
-export function getScaleTicks({ scale, ticksCount, }) {
+export function getScaleTicks({ scale, ticksCount, dateTimeLabelFormats, }) {
     const scaleDomain = scale.domain();
     switch (typeof scaleDomain[0]) {
         case 'number': {
@@ -7,7 +7,7 @@ export function getScaleTicks({ scale, ticksCount, }) {
         }
         // datetime scale
         case 'object': {
-            return getDateTimeTicks(scaleDomain[0], scaleDomain[scaleDomain.length - 1], ticksCount);
+            return getDateTimeTicks(scaleDomain[0], scaleDomain[scaleDomain.length - 1], ticksCount, dateTimeLabelFormats);
         }
         case 'string': {
             return scaleDomain;

package/dist/esm/core/utils/time.d.ts

@@ -6,6 +6,8 @@ export declare const TIME_UNITS: {
     readonly day: number;
     readonly week: number;
     readonly month: number;
+    readonly quarter: number;
+    readonly halfYear: number;
     readonly year: number;
 };
 export type TimeUnit = keyof typeof TIME_UNITS;

package/dist/esm/core/utils/time.js

@@ -6,6 +6,8 @@ export const TIME_UNITS = {
     day: 24 * 3600000,
     week: 7 * 24 * 3600000,
     month: 28 * 24 * 3600000,
+    quarter: 62 * 24 * 3600000,
+    halfYear: 160 * 24 * 3600000,
     year: 364 * 24 * 3600000,
 };
 export const DATETIME_LABEL_FORMATS = {
@@ -16,6 +18,8 @@ export const DATETIME_LABEL_FORMATS = {
     day: 'DD.MM.YY',
     week: 'DD.MM.YY',
     month: "MMM 'YY",
+    quarter: "MMM 'YY",
+    halfYear: "MMM 'YY",
     year: 'YYYY',
 };
 function getTimeUnit(range) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.48.3",
+  "version": "1.49.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",