@gravity-ui/chartkit 3.2.0 → 3.4.0

package/build/plugins/d3/renderer/components/AxisX.js

@@ -31,20 +31,30 @@ export const AxisX = ({ axis, width, height, scale }) => {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const xAxisGenerator = axisBottom(scale)
-            .tickSize(height * -1)
+        const tickSize = axis.grid.enabled ? height * -1 : 0;
+        let xAxisGenerator = axisBottom(scale)
+            .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
+            if (!axis.labels.enabled) {
+                return '';
+            }
             return formatAxisTickLabel({
                 axisType: axis.type,
                 value,
-                dateFormat: axis.labels.dateFormat,
-                numberFormat: axis.labels.numberFormat,
+                dateFormat: axis.labels['dateFormat'],
+                numberFormat: axis.labels['numberFormat'],
             });
         });
+        if (axis.ticks.pixelInterval) {
+            const ticksCount = width / axis.ticks.pixelInterval;
+            xAxisGenerator = xAxisGenerator.ticks(ticksCount);
+        }
         svgElement.call(xAxisGenerator).attr('class', b());
         svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
-        svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+        if (axis.labels.enabled) {
+            svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+        }
         const transformStyle = svgElement.select('.tick').attr('transform');
         const { x } = parseTransformStyle(transformStyle);
         if (x === 0) {

package/build/plugins/d3/renderer/components/AxisY.js

@@ -32,23 +32,33 @@ export const AxisY = ({ axises, width, height, scale }) => {
         const axis = axises[0];
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const yAxisGenerator = axisLeft(scale)
-            .tickSize(width * -1)
+        const tickSize = axis.grid.enabled ? width * -1 : 0;
+        let yAxisGenerator = axisLeft(scale)
+            .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
+            if (!axis.labels.enabled) {
+                return '';
+            }
             return formatAxisTickLabel({
                 axisType: axis.type,
                 value,
-                dateFormat: axis.labels.dateFormat,
-                numberFormat: axis.labels.numberFormat,
+                dateFormat: axis.labels['dateFormat'],
+                numberFormat: axis.labels['numberFormat'],
             });
         });
+        if (axis.ticks.pixelInterval) {
+            const ticksCount = height / axis.ticks.pixelInterval;
+            yAxisGenerator = yAxisGenerator.ticks(ticksCount);
+        }
         svgElement.call(yAxisGenerator).attr('class', b());
         svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
-        svgElement
-            .selectAll('.tick text')
-            .style('font-size', axis.labels.style.fontSize)
-            .style('transform', 'translateY(-1px)');
+        if (axis.labels.enabled) {
+            svgElement
+                .selectAll('.tick text')
+                .style('font-size', axis.labels.style.fontSize)
+                .style('transform', 'translateY(-1px)');
+        }
         const transformStyle = svgElement.select('.tick').attr('transform');
         const { y } = parseTransformStyle(transformStyle);
         if (y === height) {

package/build/plugins/d3/renderer/components/Chart.js

@@ -13,7 +13,7 @@ export const Chart = ({ width, height, data }) => {
     // FIXME: add data validation
     const { series } = data;
     const svgRef = React.createRef();
-    const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
     const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
     const { chart, legend, title, tooltip, xAxis, yAxis } = useChartOptions(data);
     const { boundsWidth, boundsHeight, legendHeight } = useChartDimensions({
@@ -25,8 +25,8 @@ export const Chart = ({ width, height, data }) => {
         xAxis,
         yAxis,
     });
-    const { activeLegendItems, handleLegendItemClick } = useLegend({ series });
-    const { chartSeries } = useSeries({ activeLegendItems, series });
+    const { activeLegendItems, handleLegendItemClick } = useLegend({ series: series.data });
+    const { chartSeries } = useSeries({ activeLegendItems, series: series.data });
     const { xScale, yScale } = useScales({
         boundsWidth,
         boundsHeight,

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

@@ -24,12 +24,15 @@ const getAxisLabelMaxWidth = (args) => {
             maxDomainValue = max(domain);
         }
     }
-    const formattedValue = formatAxisTickLabel({
-        axisType: axis.type,
-        value: maxDomainValue,
-        dateFormat: axis.labels.dateFormat,
-        numberFormat: axis.labels.numberFormat,
-    });
+    let formattedValue = '';
+    if (axis.labels.enabled) {
+        formattedValue = formatAxisTickLabel({
+            axisType: axis.type,
+            value: maxDomainValue,
+            dateFormat: axis.labels['dateFormat'],
+            numberFormat: axis.labels['numberFormat'],
+        });
+    }
     select(document.body)
         .append('text')
         .style('font-size', axis.labels.style.fontSize)
@@ -47,12 +50,16 @@ export const getPreparedChart = (args) => {
         getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
     const marginLeft = get(chart, 'margin.left', AXIS_WIDTH) +
         preparedY1Axis.labels.padding +
-        getAxisLabelMaxWidth({ axis: preparedY1Axis, series }) +
+        getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
         (preparedY1Axis.title.height || 0);
+    const marginTop = get(chart, 'margin.top', 0) +
+        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+    const marginRight = get(chart, 'margin.right', 0) +
+        getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
     return {
         margin: {
-            top: get(chart, 'margin.top', 0),
-            right: get(chart, 'margin.right', 0),
+            top: marginTop,
+            right: marginRight,
             bottom: marginBottom,
             left: marginLeft,
         },

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

@@ -1,5 +1,7 @@
-import get from 'lodash/get';
 export const getPreparedLegend = (args) => {
     const { legend, series } = args;
-    return { enabled: get(legend, 'enabled', true) && series.length > 1 };
+    const enabled = legend === null || legend === void 0 ? void 0 : legend.enabled;
+    return {
+        enabled: typeof enabled === 'boolean' ? enabled : series.data.length > 1,
+    };
 };

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

@@ -14,6 +14,14 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
         text: string;
         style: BaseTextStyle;
     };
+    min?: number;
+    grid: {
+        enabled: boolean;
+    };
+    maxPadding: number;
+    ticks: {
+        pixelInterval?: number;
+    };
 };
 export type PreparedTitle = ChartKitWidgetData['title'] & {
     height: number;

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

@@ -24,6 +24,14 @@ export const getPreparedXAxis = ({ xAxis }) => {
                 ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle })
                 : 0,
         },
+        min: get(xAxis, 'min'),
+        maxPadding: get(xAxis, 'maxPadding', 0.01),
+        grid: {
+            enabled: get(xAxis, 'grid.enabled', true),
+        },
+        ticks: {
+            pixelInterval: get(xAxis, 'ticks.pixelInterval'),
+        },
     };
     return preparedXAxis;
 };

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

@@ -29,6 +29,14 @@ export const getPreparedYAxis = ({ yAxis }) => {
                 ? getHorisontalSvgTextDimensions({ text: y1TitleText, style: y1TitleStyle })
                 : 0,
         },
+        min: get(yAxis1, 'min'),
+        maxPadding: get(yAxis1, 'maxPadding', 0.05),
+        grid: {
+            enabled: get(yAxis1, 'grid.enabled', true),
+        },
+        ticks: {
+            pixelInterval: get(yAxis1, 'ticks.pixelInterval'),
+        },
     };
     return [preparedY1Axis];
 };

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

@@ -15,11 +15,13 @@ const filterCategoriesByVisibleSeries = (categories, series) => {
 export const useScales = (args) => {
     const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
     const scales = React.useMemo(() => {
+        const xMin = get(xAxis, 'min');
         const xType = get(xAxis, 'type', 'linear');
-        const xCatigories = get(xAxis, 'categories');
+        const xCategories = get(xAxis, 'categories');
         const xTimestamps = get(xAxis, 'timestamps');
         const yType = get(yAxis[0], 'type', 'linear');
-        const yCatigories = get(yAxis[0], 'categories');
+        const yMin = get(yAxis[0], 'min');
+        const yCategories = get(yAxis[0], 'categories');
         const yTimestamps = get(xAxis, 'timestamps');
         let visibleSeries = getOnlyVisibleSeries(series);
         // Reassign to all series in case of all series unselected,
@@ -30,29 +32,32 @@ export const useScales = (args) => {
         switch (xType) {
             case 'linear': {
                 const domain = getDomainDataXBySeries(visibleSeries);
+                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
                 if (isNumericalArrayData(domain)) {
-                    const [xMin, xMax] = extent(domain);
-                    xScale = scaleLinear().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    const [domainXMin, xMax] = extent(domain);
+                    const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
+                    xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
                 }
                 break;
             }
             case 'category': {
-                if (xCatigories) {
-                    const filteredCategories = filterCategoriesByVisibleSeries(xCatigories, visibleSeries);
+                if (xCategories) {
+                    const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
                     xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
                 }
                 break;
             }
             case 'datetime': {
+                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
                 if (xTimestamps) {
                     const [xMin, xMax] = extent(xTimestamps);
-                    xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
                 }
                 else {
                     const domain = getDomainDataXBySeries(visibleSeries);
                     if (isNumericalArrayData(domain)) {
                         const [xMin, xMax] = extent(domain);
-                        xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                        xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
                     }
                 }
                 break;
@@ -64,29 +69,32 @@ export const useScales = (args) => {
         switch (yType) {
             case 'linear': {
                 const domain = getDomainDataYBySeries(visibleSeries);
+                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
                 if (isNumericalArrayData(domain)) {
-                    const [yMin, yMax] = extent(domain);
-                    yScale = scaleLinear().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                    const [domainYMin, yMax] = extent(domain);
+                    const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
+                    yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
                 }
                 break;
             }
             case 'category': {
-                if (yCatigories) {
-                    const filteredCategories = filterCategoriesByVisibleSeries(yCatigories, visibleSeries);
+                if (yCategories) {
+                    const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
                     yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
                 }
                 break;
             }
             case 'datetime': {
+                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
                 if (yTimestamps) {
                     const [yMin, yMax] = extent(yTimestamps);
-                    yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
                 else {
                     const domain = getDomainDataYBySeries(visibleSeries);
                     if (isNumericalArrayData(domain)) {
                         const [yMin, yMax] = extent(domain);
-                        yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                        yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
                     }
                 }
                 break;

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChartOptions } from '../useChartOptions/types';
+import { ChartScale } from '../useScales';
+import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+import { BarXSeries } from '../../../../../types/widget-data';
+type Args = {
+    series: BarXSeries[];
+    xAxis: ChartOptions['xAxis'];
+    xScale: ChartScale;
+    yAxis: ChartOptions['yAxis'];
+    yScale: ChartScale;
+    onSeriesMouseMove?: OnSeriesMouseMove;
+    onSeriesMouseLeave?: OnSeriesMouseLeave;
+};
+export declare function prepareBarXSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+const DEFAULT_BAR_RECT_WIDTH = 50;
+const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
+const MIN_RECT_GAP = 1;
+const b = block('chartkit-d3-bar');
+const getRectProperties = (args) => {
+    const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
+    let cx;
+    let cy;
+    let width;
+    let height;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        const maxWidth = xBandScale.bandwidth() - MIN_RECT_GAP;
+        width = Math.min(maxWidth, DEFAULT_BAR_RECT_WIDTH);
+        cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2 - width / 2;
+    }
+    else {
+        const xLinearScale = xScale;
+        const [min, max] = xLinearScale.domain();
+        const range = xLinearScale.range();
+        const maxWidth = ((range[1] - range[0]) * minPointDistance) / (Number(max) - Number(min)) - MIN_RECT_GAP;
+        width = Math.min(Math.max(maxWidth, 1), DEFAULT_LINEAR_BAR_RECT_WIDTH);
+        cx = xLinearScale(point.x) - width / 2;
+    }
+    if (yAxis[0].type === 'linear') {
+        const yLinearScale = yScale;
+        cy = yLinearScale(point.y);
+        height = yLinearScale(yLinearScale.domain()[0]) - cy;
+    }
+    else {
+        throw Error(`The "${yAxis[0].type}" type for the Y axis is not supported`);
+    }
+    return { x: cx, y: cy, width, height };
+};
+function minDiff(arr) {
+    let result = Infinity;
+    for (let i = 0; i < arr.length - 1; i++) {
+        for (let j = i + 1; j < arr.length; j++) {
+            const diff = Math.abs(arr[i] - arr[j]);
+            if (diff < result) {
+                result = diff;
+            }
+        }
+    }
+    return result;
+}
+export function prepareBarXSeries(args) {
+    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave } = args;
+    const seriesData = series.map(({ data }) => data).flat(2);
+    const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));
+    return series.reduce((result, item) => {
+        const randomKey = Math.random().toString();
+        item.data.forEach((point, i) => {
+            const rectProps = getRectProperties({
+                point,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                minPointDistance,
+            });
+            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function () {
+                    onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                        hovered: {
+                            data: point,
+                            series: item,
+                        },
+                    });
+                }, onMouseLeave: onSeriesMouseLeave })));
+        });
+        return result;
+    }, []);
+}

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

@@ -1,67 +1,38 @@
 import React from 'react';
-import block from 'bem-cn-lite';
-import { pointer } from 'd3';
+import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
-const b = block('chartkit-d3-scatter');
-const DEFAULT_SCATTER_POINT_RADIUS = 4;
-const prepareCategoricalScatterData = (data) => {
-    return data.filter((d) => typeof d.category === 'string');
-};
-const prepareLinearScatterData = (data) => {
-    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
-};
-const getPointProperties = (args) => {
-    const { point, xAxis, xScale, yAxis, yScale } = args;
-    const r = point.radius || DEFAULT_SCATTER_POINT_RADIUS;
-    let cx;
-    let cy;
-    if (xAxis.type === 'category') {
-        const xBandScale = xScale;
-        cx = xBandScale(point.category) + xBandScale.step() / 2;
-    }
-    else {
-        const xLinearScale = xScale;
-        cx = xLinearScale(point.x);
-    }
-    if (yAxis[0].type === 'category') {
-        const yBandScale = yScale;
-        cy = yBandScale(point.category) + yBandScale.step() / 2;
-    }
-    else {
-        const xLinearScale = yScale;
-        cy = xLinearScale(point.y);
-    }
-    return { r, cx, cy };
-};
+import { prepareBarXSeries } from './bar-x';
+import { prepareScatterSeries } from './scatter';
 export const useShapes = (args) => {
     const { series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
     const shapes = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
-        return visibleSeries.reduce((acc, s) => {
-            var _a;
-            const randomKey = Math.random().toString();
-            switch (s.type) {
+        const groupedSeries = group(visibleSeries, (item) => item.type);
+        return Array.from(groupedSeries).reduce((acc, item) => {
+            const [seriesType, chartSeries] = item;
+            switch (seriesType) {
+                case 'bar-x': {
+                    acc.push(...prepareBarXSeries({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        onSeriesMouseMove,
+                        onSeriesMouseLeave,
+                    }));
+                    break;
+                }
                 case 'scatter': {
-                    const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
-                        ? prepareCategoricalScatterData(s.data)
-                        : prepareLinearScatterData(s.data);
-                    acc.push(...preparedData.map((point, i) => {
-                        const pointProps = getPointProperties({
-                            point,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                        });
-                        return (React.createElement("circle", Object.assign({ key: `${i}-${randomKey}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
-                                onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
-                                    hovered: {
-                                        data: point,
-                                        series: s,
-                                    },
-                                    pointerPosition: pointer(e, svgContainer),
-                                });
-                            }, onMouseLeave: onSeriesMouseLeave })));
+                    acc.push(...prepareScatterSeries({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        onSeriesMouseMove,
+                        onSeriesMouseLeave,
+                        svgContainer,
                     }));
                     break;
                 }

package/build/plugins/d3/renderer/hooks/useShapes/scatter.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ChartOptions } from '../useChartOptions/types';
+import { ChartScale } from '../useScales';
+import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+import { ScatterSeries } from '../../../../../types/widget-data';
+type PrepareScatterSeriesArgs = {
+    series: ScatterSeries[];
+    xAxis: ChartOptions['xAxis'];
+    xScale: ChartScale;
+    yAxis: ChartOptions['yAxis'];
+    yScale: ChartScale;
+    svgContainer: SVGSVGElement | null;
+    onSeriesMouseMove?: OnSeriesMouseMove;
+    onSeriesMouseLeave?: OnSeriesMouseLeave;
+    key?: string;
+};
+export declare function prepareScatterSeries(args: PrepareScatterSeriesArgs): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/scatter.js

@@ -0,0 +1,62 @@
+import { pointer } from 'd3';
+import React from 'react';
+import block from 'bem-cn-lite';
+const b = block('chartkit-d3-scatter');
+const DEFAULT_SCATTER_POINT_RADIUS = 4;
+const prepareCategoricalScatterData = (data) => {
+    return data.filter((d) => typeof d.category === 'string');
+};
+const prepareLinearScatterData = (data) => {
+    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
+};
+const getPointProperties = (args) => {
+    const { point, xAxis, xScale, yAxis, yScale } = args;
+    const r = point.radius || DEFAULT_SCATTER_POINT_RADIUS;
+    let cx;
+    let cy;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2;
+    }
+    else {
+        const xLinearScale = xScale;
+        cx = xLinearScale(point.x);
+    }
+    if (yAxis[0].type === 'category') {
+        const yBandScale = yScale;
+        cy = (yBandScale(point.category) || 0) + yBandScale.step() / 2;
+    }
+    else {
+        const yLinearScale = yScale;
+        cy = yLinearScale(point.y);
+    }
+    return { r, cx, cy };
+};
+export function prepareScatterSeries(args) {
+    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, key, svgContainer, } = args;
+    return series.reduce((result, s) => {
+        var _a;
+        const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
+            ? prepareCategoricalScatterData(s.data)
+            : prepareLinearScatterData(s.data);
+        result.push(...preparedData.map((point, i) => {
+            const pointProps = getPointProperties({
+                point,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+            });
+            return (React.createElement("circle", Object.assign({ key: `${i}-${key}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
+                    onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                        hovered: {
+                            data: point,
+                            series: s,
+                        },
+                        pointerPosition: pointer(e, svgContainer),
+                    });
+                }, onMouseLeave: onSeriesMouseLeave })));
+        }));
+        return result;
+    }, []);
+}

package/build/plugins/highcharts/renderer/helpers/config/utils/index.js

@@ -13,7 +13,7 @@ export { mergeArrayWithObject } from './mergeArrayWithObject';
 export { numberFormat } from './numberFormat';
 export { setNavigatorDefaultPeriod } from './setNavigatorDefaultPeriod';
 export const getSortedData = (data, sort = {}) => {
-    const { enabled = true, order = 'desc', iteratee = 'y' } = sort;
+    const { enabled = false, order = 'desc', iteratee = 'y' } = sort;
     if (!enabled) {
         return [...data];
     }

package/build/types/widget-data/axis.d.ts

@@ -19,4 +19,24 @@ export type ChartKitWidgetAxis = {
     title?: {
         text?: string;
     };
+    /** The minimum value of the axis. If undefined the min value is automatically calculate */
+    min?: number;
+    grid?: {
+        /** Enable or disable the grid lines.
+         *
+         * Defaults to true.
+         * */
+        enabled?: boolean;
+    };
+    ticks?: {
+        /** Pixel interval of the tick marks. Not applicable to categorized axis.
+         * The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
+        pixelInterval?: number;
+    };
+    /** Padding of the max value relative to the length of the axis.
+     * A padding of 0.05 will make a 100px axis 5px longer.
+     *
+     * Defaults to 0.05 for Y axis and to 0.01 for X axis
+     * */
+    maxPadding?: number;
 };

package/build/types/widget-data/bar-x.d.ts

@@ -0,0 +1,31 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetSeriesOptions } from './series';
+export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
+    /** The x value of the point */
+    x?: number;
+    /** The y value of the point */
+    y?: number;
+    /** Corresponding value of axis category */
+    category?: string;
+};
+export type BarXSeries<T = any> = BaseSeries & {
+    type: 'bar-x';
+    data: BarXSeriesData<T>[];
+    /** The name of the series (used in legend) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    stacking?: 'normal' | 'percent';
+    /** This option allows grouping series in a stacked chart */
+    stackId?: string;
+    /** Whether to group non-stacked columns or to let them render independent of each other.
+     * When false columns will be laid out individually and overlap each other.
+     *
+     * @default true
+     * */
+    grouping?: boolean;
+    dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
+        /** Whether to align the data label inside the box or to the actual value point */
+        inside?: boolean;
+    };
+};