@gravity-ui/chartkit 4.6.0 → 4.7.0

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -2,10 +2,11 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
+export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
 const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
-    const { hovered, pointerPosition, tooltip, xAxis, yAxis } = props;
+    const { tooltip, xAxis, yAxis, hovered, pointerPosition } = props;
     const ref = React.useRef(null);
     const size = React.useMemo(() => {
         if (ref.current && hovered) {
@@ -13,6 +14,7 @@ export const Tooltip = (props) => {
             return { width, height };
         }
         return undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hovered, pointerPosition]);
     const position = React.useMemo(() => {
         if (hovered && pointerPosition && size) {
@@ -38,7 +40,7 @@ export const Tooltip = (props) => {
             return null;
         }
         const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
-        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
+        return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered[0], xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
     }, [hovered, tooltip, xAxis, yAxis]);
     if (!position || !hovered) {
         return null;

package/build/plugins/d3/renderer/components/styles.css

@@ -4,6 +4,7 @@
 
 .chartkit-d3-axis .tick text {
   color: var(--g-color-text-secondary);
+  alignment-baseline: after-edge;
 }
 
 .chartkit-d3-axis .tick line {
@@ -11,6 +12,7 @@
 }
 
 .chartkit-d3-axis__title {
+  alignment-baseline: after-edge;
   fill: var(--g-color-text-secondary);
 }
 
@@ -29,6 +31,7 @@
 
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
+  alignment-baseline: before-edge;
 }
 
 .chartkit-d3-legend__item-text_unselected {

package/build/plugins/d3/renderer/constants/defaults/axis.d.ts

@@ -2,4 +2,13 @@ export declare const axisLabelsDefaults: {
     margin: number;
     padding: number;
     fontSize: number;
+    maxWidth: number;
+};
+export declare const xAxisTitleDefaults: {
+    margin: number;
+    fontSize: string;
+};
+export declare const yAxisTitleDefaults: {
+    margin: number;
+    fontSize: string;
 };

package/build/plugins/d3/renderer/constants/defaults/axis.js

@@ -2,4 +2,10 @@ export const axisLabelsDefaults = {
     margin: 10,
     padding: 10,
     fontSize: 11,
+    maxWidth: 80,
 };
+const axisTitleDefaults = {
+    fontSize: '14px',
+};
+export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
+export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });

package/build/plugins/d3/renderer/constants/defaults/index.d.ts

@@ -1,2 +1,3 @@
 export * from './axis';
 export * from './legend';
+export * from './series-options';

package/build/plugins/d3/renderer/constants/defaults/index.js

@@ -1,2 +1,3 @@
 export * from './axis';
 export * from './legend';
+export * from './series-options';

package/build/plugins/d3/renderer/constants/defaults/series-options.d.ts

@@ -0,0 +1,11 @@
+import type { ChartKitWidgetSeriesOptions } from '../../../../../types';
+type DefauleBarXSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> & {
+    'bar-x': {
+        barMaxWidth: number;
+        barPadding: number;
+        groupPadding: number;
+    };
+};
+export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefauleBarXSeriesOptions;
+export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
+export {};

package/build/plugins/d3/renderer/constants/defaults/series-options.js

@@ -0,0 +1,41 @@
+export const seriesOptionsDefaults = {
+    'bar-x': {
+        barMaxWidth: 50,
+        barPadding: 0.1,
+        groupPadding: 0.2,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
+    pie: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
+    scatter: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: true,
+                opacity: 0.5,
+            },
+        },
+    },
+};

package/build/plugins/d3/renderer/constants/index.d.ts

@@ -1,4 +1,3 @@
 export * from './defaults';
 export declare const DEFAULT_PALETTE: string[];
 export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
-export declare const DEFAULT_AXIS_TITLE_FONT_SIZE = "14px";

package/build/plugins/d3/renderer/constants/index.js

@@ -22,4 +22,3 @@ export const DEFAULT_PALETTE = [
     '#DCA3D7',
 ];
 export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
-export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

package/build/plugins/d3/renderer/d3-dispatcher.d.ts

@@ -0,0 +1 @@
+export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;

package/build/plugins/d3/renderer/d3-dispatcher.js

@@ -0,0 +1,4 @@
+import { dispatch } from 'd3';
+export const getD3Dispatcher = () => {
+    return dispatch('hover-shape');
+};

package/build/plugins/d3/renderer/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './useChartDimensions';
-export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';

package/build/plugins/d3/renderer/hooks/index.js

@@ -1,5 +1,4 @@
 export * from './useChartDimensions';
-export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useAxisScales';

package/build/plugins/d3/renderer/hooks/useAxisScales/index.d.ts

@@ -1,20 +1,21 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import type { ChartOptions, PreparedAxis } from '../useChartOptions/types';
+import type { PreparedAxis } from '../useChartOptions/types';
 import { PreparedSeries } from '../useSeries/types';
+import { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
-    xAxis: ChartOptions['xAxis'];
-    yAxis: ChartOptions['yAxis'];
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
 };
 type ReturnValue = {
     xScale?: ChartScale;
     yScale?: ChartScale;
 };
-export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleLinear<number, number, never> | ScaleBand<string> | ScaleTime<number, number, never>;
-export declare function createXScale(axis: PreparedAxis, series: PreparedSeries[], boundsWidth: number): ScaleLinear<number, number, never> | ScaleBand<string> | ScaleTime<number, number, never>;
+export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+export declare function createXScale(axis: PreparedAxis | ChartKitWidgetAxis, series: (PreparedSeries | ChartKitWidgetSeries)[], boundsWidth: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**
  * Uses to create scales for axis related series
  */

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -67,7 +67,8 @@ export function createXScale(axis, series, boundsWidth) {
     const xType = get(axis, 'type', 'linear');
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
-    const xAxisMinPadding = boundsWidth * axis.maxPadding;
+    const maxPadding = get(axis, 'maxPadding', 0);
+    const xAxisMinPadding = boundsWidth * maxPadding;
     const xRange = [0, boundsWidth - xAxisMinPadding];
     switch (xType) {
         case 'linear': {

package/build/plugins/d3/renderer/hooks/useChartDimensions/index.js

@@ -1,51 +1,20 @@
 import React from 'react';
-import { createXScale } from '../../hooks';
-import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsMaxHeight, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, isAxisRelatedSeries, } from '../../utils';
+import { isAxisRelatedSeries } from '../../utils';
 import { getBoundsWidth } from './utils';
 export { getBoundsWidth } from './utils';
-const getHeightOccupiedByXAxis = ({ preparedXAxis, preparedSeries, width, }) => {
-    let height = preparedXAxis.title.height;
-    if (preparedXAxis.labels.enabled) {
-        const scale = createXScale(preparedXAxis, preparedSeries, width);
-        const tickCount = getTicksCount({ axis: preparedXAxis, range: width });
-        const ticks = getXAxisItems({
-            scale: scale,
-            count: tickCount,
-            maxCount: getMaxTickCount({ width, axis: preparedXAxis }),
-        });
-        const step = getClosestPointsRange(preparedXAxis, ticks);
-        const labels = ticks.map((value) => {
-            return formatAxisTickLabel({
-                axis: preparedXAxis,
-                value,
-                step,
-            });
-        });
-        const overlapping = hasOverlappingLabels({
-            width,
-            labels,
-            padding: preparedXAxis.labels.padding,
-            style: preparedXAxis.labels.style,
-        });
-        const labelsHeight = overlapping
-            ? getLabelsMaxHeight({
-                labels,
-                style: preparedXAxis.labels.style,
-                transform: 'rotate(-45)',
-            })
-            : getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
-        height += preparedXAxis.labels.margin + labelsHeight;
-    }
-    return height;
-};
 const getBottomOffset = (args) => {
-    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis, preparedSeries, width } = args;
+    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
     let result = 0;
     if (preparedLegend.enabled) {
         result += preparedLegend.height + preparedLegend.margin;
     }
     if (hasAxisRelatedSeries) {
-        result += getHeightOccupiedByXAxis({ preparedXAxis, preparedSeries, width });
+        if (preparedXAxis.title.text) {
+            result += preparedXAxis.title.height + preparedXAxis.title.margin;
+        }
+        if (preparedXAxis.labels.enabled) {
+            result += preparedXAxis.labels.margin + preparedXAxis.labels.height;
+        }
     }
     return result;
 };
@@ -58,8 +27,6 @@ export const useChartDimensions = (args) => {
             hasAxisRelatedSeries,
             preparedLegend,
             preparedXAxis,
-            preparedSeries,
-            width: boundsWidth,
         });
         const boundsHeight = height - margin.top - margin.bottom - bottomOffset;
         return { boundsWidth, boundsHeight };

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.d.ts

@@ -4,3 +4,6 @@ export declare const getBoundsWidth: (args: {
     chartMargin: PreparedChart['margin'];
     preparedYAxis: PreparedAxis[];
 }) => number;
+export declare function getWidthOccupiedByYAxis(args: {
+    preparedAxis: PreparedAxis[];
+}): number;

package/build/plugins/d3/renderer/hooks/useChartDimensions/utils.js

@@ -1,7 +1,20 @@
 export const getBoundsWidth = (args) => {
     const { chartWidth, chartMargin, preparedYAxis } = args;
-    const yAxisTitleHeight = preparedYAxis.reduce((acc, axis) => {
-        return acc + (axis.title.height || 0);
-    }, 0) || 0;
-    return chartWidth - chartMargin.right - chartMargin.left - yAxisTitleHeight;
+    return (chartWidth -
+        chartMargin.right -
+        chartMargin.left -
+        getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }));
 };
+export function getWidthOccupiedByYAxis(args) {
+    const { preparedAxis } = args;
+    let result = 0;
+    preparedAxis.forEach((axis) => {
+        if (axis.title.text) {
+            result += axis.title.height + axis.title.margin;
+        }
+        if (axis.labels.enabled) {
+            result += axis.labels.margin + axis.labels.width;
+        }
+    });
+    return result;
+}

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.d.ts

@@ -1,8 +1,6 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
-import type { PreparedAxis, PreparedChart, PreparedTitle } from './types';
+import type { ChartKitWidgetData } from '../../../../../types';
+import type { PreparedChart, PreparedTitle } from './types';
 export declare const getPreparedChart: (args: {
     chart: ChartKitWidgetData['chart'];
-    series: ChartKitWidgetData['series'];
-    preparedY1Axis: PreparedAxis;
     preparedTitle?: PreparedTitle;
 }) => PreparedChart;

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -1,40 +1,21 @@
 import get from 'lodash/get';
-import { isAxisRelatedSeries, getHorisontalSvgTextHeight } from '../../utils';
-const AXIS_LINE_WIDTH = 1;
 const getMarginTop = (args) => {
-    const { chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle } = args;
+    const { chart, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
-    if (hasAxisRelatedSeries) {
-        marginTop +=
-            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
-    }
     if (preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height) {
         marginTop += preparedTitle.height;
     }
     return marginTop;
 };
-const getMarginLeft = (args) => {
-    const { chart, hasAxisRelatedSeries, preparedY1Axis } = args;
-    let marginLeft = get(chart, 'margin.left', 0);
-    if (hasAxisRelatedSeries) {
-        marginLeft +=
-            AXIS_LINE_WIDTH +
-                preparedY1Axis.labels.margin +
-                (preparedY1Axis.labels.maxWidth || 0) +
-                preparedY1Axis.title.height;
-    }
-    return marginLeft;
-};
 const getMarginRight = (args) => {
     const { chart } = args;
     return get(chart, 'margin.right', 0);
 };
 export const getPreparedChart = (args) => {
-    const { chart, series, preparedY1Axis, preparedTitle } = args;
-    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
-    const marginTop = getMarginTop({ chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle });
+    const { chart, preparedTitle } = args;
+    const marginTop = getMarginTop({ chart, preparedTitle });
     const marginBottom = get(chart, 'margin.bottom', 0);
-    const marginLeft = getMarginLeft({ chart, hasAxisRelatedSeries, preparedY1Axis });
+    const marginLeft = get(chart, 'margin.left', 0);
     const marginRight = getMarginRight({ chart });
     return {
         margin: {

package/build/plugins/d3/renderer/hooks/useChartOptions/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../../types';
 import type { ChartOptions } from './types';
 type Args = {
     data: ChartKitWidgetData;

package/build/plugins/d3/renderer/hooks/useChartOptions/index.js

@@ -2,28 +2,20 @@ import React from 'react';
 import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
-import { getPreparedXAxis } from './x-axis';
-import { getPreparedYAxis } from './y-axis';
 export const useChartOptions = (args) => {
-    const { data: { chart, series, title, tooltip, xAxis, yAxis }, } = args;
+    const { data: { chart, title, tooltip }, } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
-        const preparedYAxis = getPreparedYAxis({ series: series.data, yAxis });
-        const preparedXAxis = getPreparedXAxis({ xAxis });
         const preparedChart = getPreparedChart({
             chart,
-            series,
             preparedTitle,
-            preparedY1Axis: preparedYAxis[0],
         });
         return {
             chart: preparedChart,
             title: preparedTitle,
             tooltip: preparedTooltip,
-            xAxis: preparedXAxis,
-            yAxis: preparedYAxis,
         };
-    }, [chart, title, tooltip, series, xAxis, yAxis]);
+    }, [chart, title, tooltip]);
     return options;
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/title.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedTitle } from './types';
 export declare const getPreparedTitle: ({ title, }: {
     title: ChartKitWidgetData['title'];

package/build/plugins/d3/renderer/hooks/useChartOptions/title.js

@@ -6,6 +6,7 @@ export const getPreparedTitle = ({ title, }) => {
     const titleText = get(title, 'text');
     const titleStyle = {
         fontSize: get(title, 'style.fontSize', DEFAULT_TITLE_FONT_SIZE),
+        fontWeight: get(title, 'style.fontWeight'),
     };
     const titleHeight = titleText
         ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -1,7 +1,11 @@
-import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartMargin } from '../../../../../types/widget-data';
-type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'margin'>> & {
+import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartMargin } from '../../../../../types';
+type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
-    maxWidth?: number;
+    rotation: number;
+    height: number;
+    width: number;
+    lineHeight: number;
+    maxWidth: number;
 };
 export type PreparedChart = {
     margin: ChartMargin;
@@ -12,6 +16,7 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     title: {
         height: number;
         text: string;
+        margin: number;
         style: BaseTextStyle;
     };
     min?: number;
@@ -32,8 +37,6 @@ export type PreparedTooltip = ChartKitWidgetData['tooltip'] & {
 export type ChartOptions = {
     chart: PreparedChart;
     tooltip: PreparedTooltip;
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis[];
     title?: PreparedTitle;
 };
 export {};

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.d.ts

@@ -1,5 +1,7 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetSeries, ChartKitWidgetAxis } from '../../../../../types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis }: {
-    xAxis: ChartKitWidgetData['xAxis'];
+export declare const getPreparedXAxis: ({ xAxis, series, width, }: {
+    xAxis?: ChartKitWidgetAxis | undefined;
+    series: ChartKitWidgetSeries[];
+    width: number;
 }) => PreparedAxis;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,10 +1,52 @@
 import get from 'lodash/get';
-import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
-import { getHorisontalSvgTextHeight } from '../../utils';
-export const getPreparedXAxis = ({ xAxis }) => {
+import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, xAxisTitleDefaults, } from '../../constants';
+import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsMaxHeight, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
+import { createXScale } from '../useAxisScales';
+function getLabelSettings({ axis, series, width, autoRotation = true, }) {
+    const scale = createXScale(axis, series, width);
+    const tickCount = getTicksCount({ axis, range: width });
+    const ticks = getXAxisItems({
+        scale: scale,
+        count: tickCount,
+        maxCount: getMaxTickCount({ width, axis }),
+    });
+    const step = getClosestPointsRange(axis, ticks);
+    const labels = ticks.map((value) => {
+        return formatAxisTickLabel({
+            axis,
+            value,
+            step,
+        });
+    });
+    const overlapping = hasOverlappingLabels({
+        width,
+        labels,
+        padding: axis.labels.padding,
+        style: axis.labels.style,
+    });
+    const defaultRotation = overlapping && autoRotation ? -45 : 0;
+    const rotation = axis.labels.rotation || defaultRotation;
+    const labelsHeight = rotation
+        ? getLabelsMaxHeight({
+            labels,
+            style: {
+                'font-size': axis.labels.style.fontSize,
+                'font-weight': axis.labels.style.fontWeight || 'normal',
+            },
+            rotation,
+        })
+        : axis.labels.lineHeight;
+    const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
+    return { height: Math.min(maxHeight, labelsHeight), rotation };
+}
+export const getPreparedXAxis = ({ xAxis, series, width, }) => {
+    var _a;
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = {
-        fontSize: get(xAxis, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+        fontSize: get(xAxis, 'title.style.fontSize', xAxisTitleDefaults.fontSize),
+    };
+    const labelsStyle = {
+        fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
     };
     const preparedXAxis = {
         type: get(xAxis, 'type', 'linear'),
@@ -14,8 +56,12 @@ export const getPreparedXAxis = ({ xAxis }) => {
             padding: get(xAxis, 'labels.padding', axisLabelsDefaults.padding),
             dateFormat: get(xAxis, 'labels.dateFormat'),
             numberFormat: get(xAxis, 'labels.numberFormat'),
-            autoRotation: get(xAxis, 'labels.autoRotation', true),
-            style: { fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE) },
+            rotation: get(xAxis, 'labels.rotation', 0),
+            style: labelsStyle,
+            width: 0,
+            height: 0,
+            lineHeight: getHorisontalSvgTextHeight({ text: 'Tmp', style: labelsStyle }),
+            maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
         },
         lineColor: get(xAxis, 'lineColor'),
         categories: get(xAxis, 'categories'),
@@ -23,6 +69,7 @@ export const getPreparedXAxis = ({ xAxis }) => {
         title: {
             text: titleText,
             style: titleStyle,
+            margin: get(xAxis, 'title.margin', xAxisTitleDefaults.margin),
             height: titleText
                 ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
                 : 0,
@@ -36,5 +83,13 @@ export const getPreparedXAxis = ({ xAxis }) => {
             pixelInterval: get(xAxis, 'ticks.pixelInterval'),
         },
     };
+    const { height, rotation } = getLabelSettings({
+        axis: preparedXAxis,
+        series,
+        width,
+        autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
+    });
+    preparedXAxis.labels.height = height;
+    preparedXAxis.labels.rotation = rotation;
     return preparedXAxis;
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData, ChartKitWidgetSeries } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData, ChartKitWidgetSeries } from '../../../../../types';
 import type { PreparedAxis } from './types';
 export declare const getPreparedYAxis: ({ series, yAxis, }: {
     series: ChartKitWidgetSeries[];