@fluentui/react-charting 5.24.38 → 5.25.0

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -251,6 +251,508 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return flattened;
     };
+    var toFiniteNumber = function (value) {
+        if (value === undefined || value === null) {
+            return undefined;
+        }
+        var numeric = typeof value === 'number' ? value : Number(value);
+        return Number.isFinite(numeric) ? numeric : undefined;
+    };
+    /**
+     * Normalizes Plotly axis reference strings so equivalent aliases (e.g. `xaxis1`, `x1`) collapse to the base axis id.
+     */
+    var normalizeAxisRef = function (ref, axis) {
+        if (!ref) {
+            return axis;
+        }
+        var normalized = ref.toLowerCase();
+        if (normalized === axis ||
+            normalized === "".concat(axis, "axis") ||
+            normalized === "".concat(axis, "axis1") ||
+            normalized === "".concat(axis, "1")) {
+            return axis;
+        }
+        var match = normalized.match(/^([xy])(axis)?(\d+)$/);
+        if (match && match[1] === axis && match[3]) {
+            return match[3] === '1' ? axis : "".concat(axis).concat(match[3]);
+        }
+        return normalized;
+    };
+    /**
+     * Scans the data traces bound to a given axis and returns the numeric min/max values plotted on that axis.
+     */
+    var getAxisNumericRangeFromData = function (axis, ref, layout, data) {
+        if (!data || data.length === 0) {
+            return undefined;
+        }
+        var axisLayout = getAxisLayoutByRef(layout, ref, axis);
+        var targetRef = normalizeAxisRef(ref, axis);
+        var traceAxisKey = axis === 'x' ? 'xaxis' : 'yaxis';
+        var minValue;
+        var maxValue;
+        data.forEach(function (trace) {
+            var plotTrace = trace;
+            var traceAxisRef = normalizeAxisRef(plotTrace[traceAxisKey], axis);
+            if (traceAxisRef !== targetRef) {
+                return;
+            }
+            var values = (axis === 'x' ? plotTrace.x : plotTrace.y);
+            if (!(0, chart_utilities_1.isArrayOrTypedArray)(values)) {
+                return;
+            }
+            var arrayLike = values;
+            for (var index = 0; index < arrayLike.length; index++) {
+                var value = arrayLike[index];
+                var numeric = toNumericValue(convertDataValue(value, axisLayout));
+                if (numeric === undefined || Number.isNaN(numeric)) {
+                    continue;
+                }
+                minValue = minValue === undefined ? numeric : Math.min(minValue, numeric);
+                maxValue = maxValue === undefined ? numeric : Math.max(maxValue, numeric);
+            }
+        });
+        if (minValue === undefined || maxValue === undefined || minValue === maxValue) {
+            return undefined;
+        }
+        return [minValue, maxValue];
+    };
+    /**
+     * Converts Plotly's bottom-origin relative Y coordinate into the SVG top-origin space used by our overlay.
+     */
+    var transformRelativeYForChart = function (value) {
+        if (value === undefined) {
+            return undefined;
+        }
+        if (!Number.isFinite(value)) {
+            return undefined;
+        }
+        return 1 - value;
+    };
+    var mapHorizontalAlign = function (anchor) {
+        switch ((anchor !== null && anchor !== void 0 ? anchor : '').toLowerCase()) {
+            case 'left':
+                return 'start';
+            case 'center':
+                return 'center';
+            case 'right':
+                return 'end';
+            default:
+                return undefined;
+        }
+    };
+    var mapVerticalAlign = function (anchor) {
+        switch ((anchor !== null && anchor !== void 0 ? anchor : '').toLowerCase()) {
+            case 'top':
+                return 'top';
+            case 'middle':
+                return 'middle';
+            case 'bottom':
+                return 'bottom';
+            default:
+                return undefined;
+        }
+    };
+    var appendPx = function (value) {
+        if (value === undefined || value === null) {
+            return undefined;
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return "".concat(value, "px");
+        }
+        return undefined;
+    };
+    /**
+     * Maps Plotly's axis reference string to one of our coordinate interpretation modes (axis, relative, or pixel).
+     */
+    var resolveRefType = function (ref, axis) {
+        if (!ref) {
+            return 'axis';
+        }
+        var normalized = ref.toLowerCase();
+        if (normalized === 'pixel') {
+            return 'pixel';
+        }
+        if (normalized === 'paper') {
+            return 'relative';
+        }
+        if (normalized.endsWith(' domain')) {
+            return normalized.startsWith(axis) ? 'relative' : undefined;
+        }
+        var match = normalized.match(/^([xy])(\d*)$/);
+        if (match && match[1] === axis) {
+            return 'axis';
+        }
+        return undefined;
+    };
+    /**
+     * Retrieves the appropriate axis layout section from Plotly's layout given an axis reference alias.
+     */
+    var getAxisLayoutByRef = function (layout, ref, axis) {
+        if (!layout) {
+            return undefined;
+        }
+        var defaultAxisKey = "".concat(axis, "axis");
+        if (!ref) {
+            return layout[defaultAxisKey];
+        }
+        var normalized = ref.toLowerCase();
+        if (normalized === 'paper' || normalized === 'pixel' || normalized.endsWith(' domain')) {
+            return layout[defaultAxisKey];
+        }
+        var match = normalized.match(/^([xy])(\d*)$/);
+        if (match && match[1] === axis) {
+            var index = match[2];
+            if (index && index !== '' && index !== '1') {
+                var axisKey = "".concat(axis, "axis").concat(index);
+                return layout[axisKey];
+            }
+            return layout[defaultAxisKey];
+        }
+        return layout[defaultAxisKey];
+    };
+    /**
+     * Normalizes raw Plotly data values into canonical number/date/string types based on axis configuration.
+     */
+    var convertDataValue = function (value, axisLayout) {
+        if (value === undefined || value === null) {
+            return undefined;
+        }
+        if ((axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'date' || (0, chart_utilities_1.isDate)(value)) {
+            var dateValue = value instanceof Date ? value : new Date(value);
+            return Number.isNaN(dateValue.getTime()) ? undefined : dateValue;
+        }
+        if (typeof value === 'number') {
+            return value;
+        }
+        if ((axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'linear' || (axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'log') {
+            var numeric = Number(value);
+            return Number.isFinite(numeric) ? numeric : undefined;
+        }
+        if (value instanceof Date) {
+            return value;
+        }
+        return value;
+    };
+    var toNumericValue = function (value) {
+        if (value instanceof Date) {
+            var timestamp = value.getTime();
+            return Number.isFinite(timestamp) ? timestamp : undefined;
+        }
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : undefined;
+        }
+        if (typeof value === 'string') {
+            var numeric = Number(value);
+            return Number.isFinite(numeric) ? numeric : undefined;
+        }
+        return undefined;
+    };
+    var toRelativeCoordinate = function (value, axisLayout, fallbackRange) {
+        var range = Array.isArray(axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.range) ? axisLayout.range : undefined;
+        var start = range && range.length >= 2 ? toNumericValue(convertDataValue(range[0], axisLayout)) : undefined;
+        var end = range && range.length >= 2 ? toNumericValue(convertDataValue(range[1], axisLayout)) : undefined;
+        if ((start === undefined || end === undefined || start === end) && fallbackRange) {
+            start = fallbackRange[0], end = fallbackRange[1];
+        }
+        var current = toNumericValue(convertDataValue(value, axisLayout));
+        if (start === undefined || end === undefined || current === undefined || start === end) {
+            return undefined;
+        }
+        var relative = (current - start) / (end - start);
+        return Number.isFinite(relative) ? relative : undefined;
+    };
+    var createAnnotationId = function (text, index) {
+        var normalized = text.replace(/\s+/g, ' ').trim();
+        if (normalized) {
+            var slug = normalized
+                .toLowerCase()
+                .replace(/[^a-z0-9]+/g, '-')
+                .replace(/^-+|-+$/g, '')
+                .slice(0, 32);
+            if (slug) {
+                return "annotation-".concat(index, "-").concat(slug);
+            }
+        }
+        return "annotation-".concat(index);
+    };
+    var DEFAULT_ARROW_OFFSET = -40;
+    var mapArrowsideToArrow = function (annotation) {
+        var includeStart = false;
+        var includeEnd = false;
+        var arrowSide = typeof (annotation === null || annotation === void 0 ? void 0 : annotation.arrowside) === 'string' ? annotation === null || annotation === void 0 ? void 0 : annotation.arrowside.toLowerCase() : undefined;
+        if (arrowSide) {
+            includeStart = arrowSide.includes('start');
+            includeEnd = arrowSide.includes('end');
+        }
+        var endHead = toFiniteNumber(annotation === null || annotation === void 0 ? void 0 : annotation.arrowhead);
+        var startHead = toFiniteNumber(annotation.startarrowhead);
+        if (endHead !== undefined && endHead > 0) {
+            includeEnd = true;
+        }
+        if (startHead !== undefined && startHead > 0) {
+            includeStart = true;
+        }
+        if (includeStart && includeEnd) {
+            return 'both';
+        }
+        if (includeStart) {
+            return 'start';
+        }
+        if (includeEnd) {
+            return 'end';
+        }
+        return 'none';
+    };
+    var mapArrowDashToPattern = function (value) {
+        if (!value) {
+            return undefined;
+        }
+        var normalized = value.trim().toLowerCase();
+        switch (normalized) {
+            case 'solid':
+                return undefined;
+            case 'dot':
+                return '1, 5';
+            case 'dash':
+                return '5, 5';
+            case 'longdash':
+                return '10, 5';
+            case 'dashdot':
+                return '5, 5, 1, 5';
+            case 'longdashdot':
+                return '10, 5, 1, 5';
+            default:
+                if (/^\d+(\s|,)*\d*$/.test(normalized.replace(/\s+/g, ' '))) {
+                    return normalized.replace(/\s+/g, ' ');
+                }
+                return value;
+        }
+    };
+    /**
+     * Converts a Plotly annotation definition into the internal `ChartAnnotation` format, translating coordinates,
+     * layout alignment, styling, and connector metadata while skipping unsupported configurations.
+     */
+    var convertPlotlyAnnotation = function (annotation, layout, data, index) {
+        var _a;
+        if (!annotation || annotation.visible === false) {
+            return undefined;
+        }
+        var xRefType = resolveRefType(annotation.xref, 'x');
+        var yRefType = resolveRefType(annotation.yref, 'y');
+        if (!xRefType || !yRefType) {
+            return undefined;
+        }
+        var coordinates;
+        if (xRefType === 'axis' && yRefType === 'axis') {
+            var xAxisLayout = getAxisLayoutByRef(layout, annotation.xref, 'x');
+            var yAxisLayout = getAxisLayoutByRef(layout, annotation.yref, 'y');
+            var xValue = convertDataValue(annotation.x, xAxisLayout);
+            var yValue = convertDataValue(annotation.y, yAxisLayout);
+            if (xValue === undefined || yValue === undefined) {
+                return undefined;
+            }
+            var yRefNormalized = typeof annotation.yref === 'string' ? annotation.yref.toLowerCase() : undefined;
+            coordinates = tslib_1.__assign({ type: 'data', x: xValue, y: yValue }, (yRefNormalized === 'y2' ? { yAxis: 'secondary' } : {}));
+        }
+        else if (xRefType === 'relative' && yRefType === 'relative') {
+            var xValue = toFiniteNumber(annotation.x);
+            var yValue = toFiniteNumber(annotation.y);
+            var chartRelativeY = transformRelativeYForChart(yValue);
+            if (xValue === undefined || chartRelativeY === undefined) {
+                return undefined;
+            }
+            coordinates = {
+                type: 'relative',
+                x: xValue,
+                y: chartRelativeY,
+            };
+        }
+        else if (xRefType === 'relative' && yRefType === 'axis') {
+            var xValue = toFiniteNumber(annotation.x);
+            var yAxisLayout = getAxisLayoutByRef(layout, annotation.yref, 'y');
+            var yFallbackRange = getAxisNumericRangeFromData('y', annotation.yref, layout, data);
+            var yRelative = toRelativeCoordinate(annotation.y, yAxisLayout, yFallbackRange);
+            var chartRelativeY = transformRelativeYForChart(yRelative);
+            if (xValue === undefined || chartRelativeY === undefined) {
+                return undefined;
+            }
+            coordinates = {
+                type: 'relative',
+                x: xValue,
+                y: chartRelativeY,
+            };
+        }
+        else if (xRefType === 'axis' && yRefType === 'relative') {
+            var yValue = toFiniteNumber(annotation.y);
+            var xAxisLayout = getAxisLayoutByRef(layout, annotation.xref, 'x');
+            var xFallbackRange = getAxisNumericRangeFromData('x', annotation.xref, layout, data);
+            var xRelative = toRelativeCoordinate(annotation.x, xAxisLayout, xFallbackRange);
+            var chartRelativeY = transformRelativeYForChart(yValue);
+            if (xRelative === undefined || chartRelativeY === undefined) {
+                return undefined;
+            }
+            coordinates = {
+                type: 'relative',
+                x: xRelative,
+                y: chartRelativeY,
+            };
+        }
+        else if (xRefType === 'pixel' && yRefType === 'pixel') {
+            var xValue = toFiniteNumber(annotation.x);
+            var yValue = toFiniteNumber(annotation.y);
+            if (xValue === undefined || yValue === undefined) {
+                return undefined;
+            }
+            coordinates = {
+                type: 'pixel',
+                x: xValue,
+                y: yValue,
+            };
+        }
+        else {
+            return undefined;
+        }
+        var textValue = annotation.text;
+        var text = textValue === undefined || textValue === null ? '' : String(textValue);
+        var chartAnnotation = {
+            id: createAnnotationId(text, index),
+            text: text,
+            coordinates: coordinates,
+        };
+        var layoutProps = {};
+        var styleProps = {};
+        var showArrow = annotation.showarrow === undefined ? false : !!annotation.showarrow;
+        var clipOnAxis = annotation.cliponaxis;
+        if (clipOnAxis !== undefined) {
+            layoutProps.clipToBounds = !!clipOnAxis;
+        }
+        else if (coordinates.type === 'data') {
+            layoutProps.clipToBounds = true;
+        }
+        var horizontalAlign = mapHorizontalAlign(annotation.xanchor);
+        if (horizontalAlign) {
+            layoutProps.align = horizontalAlign;
+        }
+        if (!layoutProps.align) {
+            var alignProp = mapHorizontalAlign(annotation.align);
+            if (alignProp) {
+                layoutProps.align = alignProp;
+            }
+        }
+        var verticalAlign = mapVerticalAlign(annotation.yanchor);
+        if (verticalAlign) {
+            layoutProps.verticalAlign = verticalAlign;
+        }
+        if (!layoutProps.verticalAlign) {
+            var valignProp = mapVerticalAlign(annotation.valign);
+            if (valignProp) {
+                layoutProps.verticalAlign = valignProp;
+            }
+        }
+        var offsetXComponents = [];
+        var hasExplicitOffset = false;
+        var ax = toFiniteNumber(annotation.ax);
+        var axRef = typeof annotation.axref === 'string' ? annotation.axref.toLowerCase() : undefined;
+        if (ax !== undefined && (axRef === undefined || axRef === 'pixel')) {
+            offsetXComponents.push(ax);
+            hasExplicitOffset = true;
+        }
+        var xShift = toFiniteNumber(annotation.xshift);
+        if (xShift !== undefined) {
+            offsetXComponents.push(xShift);
+            hasExplicitOffset = true;
+        }
+        if (offsetXComponents.length > 0) {
+            var offsetX = offsetXComponents.reduce(function (sum, value) { return sum + value; }, 0);
+            if (offsetX !== 0) {
+                layoutProps.offsetX = offsetX;
+            }
+        }
+        var offsetYComponents = [];
+        var ay = toFiniteNumber(annotation.ay);
+        var ayRef = typeof annotation.ayref === 'string' ? annotation.ayref.toLowerCase() : undefined;
+        if (ay !== undefined && (ayRef === undefined || ayRef === 'pixel')) {
+            offsetYComponents.push(ay);
+            hasExplicitOffset = true;
+        }
+        var yShift = toFiniteNumber(annotation.yshift);
+        if (yShift !== undefined) {
+            offsetYComponents.push(yShift);
+            hasExplicitOffset = true;
+        }
+        if (offsetYComponents.length > 0) {
+            var offsetY = offsetYComponents.reduce(function (sum, value) { return sum + value; }, 0);
+            if (offsetY !== 0) {
+                layoutProps.offsetY = offsetY;
+            }
+        }
+        if (showArrow && !hasExplicitOffset && layoutProps.offsetY === undefined) {
+            layoutProps.offsetY = DEFAULT_ARROW_OFFSET;
+        }
+        var maxWidth = toFiniteNumber(annotation.width);
+        if (maxWidth !== undefined) {
+            layoutProps.maxWidth = maxWidth;
+        }
+        if (annotation.bgcolor) {
+            styleProps.backgroundColor = annotation.bgcolor;
+        }
+        if (annotation.bordercolor) {
+            styleProps.borderColor = annotation.bordercolor;
+        }
+        var borderWidth = toFiniteNumber(annotation.borderwidth);
+        if (borderWidth !== undefined) {
+            styleProps.borderWidth = borderWidth;
+        }
+        var borderPad = appendPx(annotation.borderpad);
+        if (borderPad) {
+            styleProps.padding = borderPad;
+        }
+        var opacity = toFiniteNumber(annotation.opacity);
+        if (opacity !== undefined) {
+            styleProps.opacity = opacity;
+        }
+        if (annotation.font) {
+            var font = annotation.font;
+            if (font === null || font === void 0 ? void 0 : font.color) {
+                styleProps.textColor = font.color;
+            }
+            var fontSize = appendPx(font === null || font === void 0 ? void 0 : font.size);
+            if (fontSize) {
+                styleProps.fontSize = fontSize;
+            }
+            if (font === null || font === void 0 ? void 0 : font.weight) {
+                styleProps.fontWeight = font.weight;
+            }
+        }
+        if (Object.keys(layoutProps).length > 0) {
+            chartAnnotation.layout = layoutProps;
+        }
+        if (Object.keys(styleProps).length > 0) {
+            chartAnnotation.style = styleProps;
+        }
+        if (showArrow) {
+            var arrowColor = (_a = annotation.arrowcolor) !== null && _a !== void 0 ? _a : styleProps.textColor;
+            var arrowWidth = toFiniteNumber(annotation.arrowwidth);
+            var endPadding = toFiniteNumber(annotation.standoff);
+            var startPadding = toFiniteNumber(annotation.startstandoff);
+            var dashPattern = mapArrowDashToPattern(annotation.arrowdash);
+            chartAnnotation.connector = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (arrowColor ? { strokeColor: arrowColor } : {})), (arrowWidth !== undefined ? { strokeWidth: arrowWidth } : {})), (endPadding !== undefined ? { endPadding: Math.max(endPadding, 0) } : {})), (startPadding !== undefined ? { startPadding: Math.max(startPadding, 0) } : {})), (dashPattern ? { dashArray: dashPattern } : {})), { arrow: mapArrowsideToArrow(annotation) });
+        }
+        return chartAnnotation;
+    };
+    var getChartAnnotationsFromLayout = function (layout, data, isMultiPlot) {
+        if (isMultiPlot || !(layout === null || layout === void 0 ? void 0 : layout.annotations)) {
+            return undefined;
+        }
+        var annotationsArray = Array.isArray(layout.annotations) ? layout.annotations : [layout.annotations];
+        var converted = annotationsArray
+            .map(function (annotation, index) { return convertPlotlyAnnotation(annotation, layout, data, index); })
+            .filter(function (annotation) { return annotation !== undefined; });
+        return converted.length > 0 ? converted : undefined;
+    };
     /**
      * Normalizes an array of objects by flattening nested structures and creating grouped data
      * Uses json_normalize approach with D3 color detection and filtering
@@ -415,7 +917,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
         var colorScale = undefined;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-        var resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
+        var resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
         input.data.forEach(function (series, index1) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
@@ -423,7 +925,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             // extract line colors for each series only once
             var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
-            var validXYRanges = (0, exports.getValidXYRanges)(series, resolveXAxisValue);
+            var validXYRanges = (0, exports.getValidXYRanges)(series, resolveXValue);
             validXYRanges.forEach(function (_a, rangeIdx) {
                 var rangeStart = _a[0], rangeEnd = _a[1];
                 var rangeXValues = series.x.slice(rangeStart, rangeEnd);
@@ -432,7 +934,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                     if (!mapXToDataPoints[x]) {
                         mapXToDataPoints[x] = {
-                            xAxisPoint: resolveXAxisValue(x),
+                            xAxisPoint: resolveXValue(x),
                             chartData: [],
                             lineData: [],
                         };
@@ -485,7 +987,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             .forEach(function (shape, shapeIdx) {
             var _a, _b, _c;
             var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var resolveX = function (val) {
                 if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
                     return xCategories[val];
@@ -494,7 +995,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             };
             var x0Key = resolveX(shape.x0);
             var x1Key = resolveX(shape.x1);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var resolveY = function (val) {
                 if (shape.yref === 'paper') {
                     if (val === 0) {
@@ -503,7 +1003,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     if (val === 1) {
                         return yMaxValue;
                     }
-                    return yMinValue + val * (yMaxValue - yMinValue);
+                    if (typeof val === 'number') {
+                        return yMinValue + val * (yMaxValue - yMinValue);
+                    }
+                    return val;
                 }
                 return val;
             };
@@ -525,7 +1028,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         });
         var vsbcData = Object.values(mapXToDataPoints);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_h = vsbcData[0]) === null || _h === void 0 ? void 0 : _h.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
+        var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_h = vsbcData[0]) === null || _h === void 0 ? void 0 : _h.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
     var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -624,7 +1128,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 });
             }
         });
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout));
+        var annotations = getChartAnnotationsFromLayout(processedInput.layout, processedInput.data, isMultiPlot);
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
     var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -684,7 +1189,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
             });
         });
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, supportNegativeData: true, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string' }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout));
+        var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, supportNegativeData: true, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string' }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
     var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -699,7 +1205,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var mapColorFillBars = function (layout) {
         if (!Array.isArray(layout === null || layout === void 0 ? void 0 : layout.shapes)) {
             return [];
@@ -719,7 +1224,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         });
     };
     var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var isScatterMarkers = [
             'text',
             'markers',
@@ -734,10 +1239,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var isScatterChart = chartType === 'scatter';
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
         var mode = 'tonexty';
-        var _h = getLegendProps(input.data, input.layout, isMultiPlot), legends = _h.legends, hideLegend = _h.hideLegend;
+        var _q = getLegendProps(input.data, input.layout, isMultiPlot), legends = _q.legends, hideLegend = _q.hideLegend;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-        var resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
-        var shouldWrapLabels = getAxisType(input.data, input.layout, 'x') === 'category';
+        var xAxisType = getAxisType(input.data, getAxisObjects(input.data, input.layout).x);
+        var resolveXValue = getAxisValueResolver(xAxisType);
+        var shouldWrapLabels = xAxisType === 'category';
         var chartData = input.data
             .map(function (series, index) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -757,7 +1263,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // if mode contains 'text', we prioritize showing the text over curving the line
             var lineOptions = !((_l = series.mode) === null || _l === void 0 ? void 0 : _l.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
             var legendShape = getLegendShape(series);
-            var validXYRanges = (0, exports.getValidXYRanges)(series, resolveXAxisValue);
+            var validXYRanges = (0, exports.getValidXYRanges)(series, resolveXValue);
             return validXYRanges.map(function (_a, rangeIdx) {
                 var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 var rangeStart = _a[0], rangeEnd = _a[1];
@@ -777,7 +1283,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     legendShape: legendShape,
                     data: rangeXValues.map(function (x, i) {
                         var _a, _b;
-                        return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ x: resolveXAxisValue(x), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                        return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ x: resolveXValue(x), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
                             ? { markerSize: markerSizes[i] }
                             : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
                                 ? { markerSize: series.marker.size }
@@ -800,16 +1306,49 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         })
             .flat();
-        var lineShape = ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.shapes) !== null && _c !== void 0 ? _c : [])
+        var xMinValue = (_c = (_b = chartData[0]) === null || _b === void 0 ? void 0 : _b.data[0]) === null || _c === void 0 ? void 0 : _c.x;
+        var xMaxValue = (_e = (_d = chartData[0]) === null || _d === void 0 ? void 0 : _d.data[chartData[0].data.length - 1]) === null || _e === void 0 ? void 0 : _e.x;
+        var yMinValue = (_g = (_f = chartData[0]) === null || _f === void 0 ? void 0 : _f.data[0]) === null || _g === void 0 ? void 0 : _g.y;
+        var yMaxValue = (_j = (_h = chartData[0]) === null || _h === void 0 ? void 0 : _h.data[chartData[0].data.length - 1]) === null || _j === void 0 ? void 0 : _j.y;
+        var lineShape = ((_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.shapes) !== null && _l !== void 0 ? _l : [])
             .filter(function (shape) { return shape.type === 'line'; })
             .map(function (shape, shapeIdx) {
             var _a, _b;
             var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
+            var resolveX = function (val) {
+                if (shape.xref === 'paper') {
+                    if (val === 0) {
+                        return xMinValue;
+                    }
+                    if (val === 1) {
+                        return xMaxValue;
+                    }
+                    return typeof xMinValue === 'number' && typeof xMaxValue === 'number' && typeof val === 'number'
+                        ? xMinValue + val * (xMaxValue - xMinValue)
+                        : val;
+                }
+                return val;
+            };
+            var resolveY = function (val) {
+                if (shape.yref === 'paper') {
+                    if (val === 0) {
+                        return yMinValue;
+                    }
+                    if (val === 1) {
+                        return yMaxValue;
+                    }
+                    if (typeof val === 'number') {
+                        return yMinValue + val * (yMaxValue - yMinValue);
+                    }
+                    return val;
+                }
+                return val;
+            };
             return {
                 legend: "Reference_".concat(shapeIdx),
                 data: [
-                    { x: shape.x0, y: shape.y0 },
-                    { x: shape.x1, y: shape.y1 },
+                    { x: resolveX(shape.x0), y: resolveY(shape.y0) },
+                    { x: resolveX(shape.x1), y: resolveY(shape.y1) },
                 ],
                 color: (_b = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
                 lineOptions: getLineOptions(shape.line),
@@ -829,15 +1368,18 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var scatterChartProps = {
             scatterChartData: chartData,
         };
-        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, shouldWrapLabels: shouldWrapLabels }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
+        var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
+        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, shouldWrapLabels: shouldWrapLabels }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
         if (isAreaChart) {
             return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
         }
         else {
             return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax), (isScatterChart
-                ? tslib_1.__assign({ showYAxisLablesTooltip: true }, getAxisCategoryOrderProps(input.data, input.layout)) : {})), (!isScatterChart && ((_g = mapColorFillBars(input.layout)) === null || _g === void 0 ? void 0 : _g.length)
-                ? { colorFillBars: mapColorFillBars(input.layout) }
-                : {}));
+                ? tslib_1.__assign({ showYAxisLablesTooltip: true }, getAxisCategoryOrderProps(input.data, input.layout)) : {})), (!isScatterChart &&
+                (function () {
+                    var bars = mapColorFillBars(input.layout);
+                    return bars && !bars.includes(null) ? { colorFillBars: bars } : {};
+                })()));
         }
     };
     var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -889,49 +1431,71 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
     var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
-        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
+        var data = input.data.filter(function (series) { return series.type !== 'scatter' || series.mode !== 'markers'; });
+        var _d = getLegendProps(data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         var colorScale = undefined;
-        var isXDate = getAxisType(input.data, input.layout, 'x') === 'date';
-        var chartData = input.data
-            .map(function (series, index) {
+        var xAxisType = getAxisType(data, getAxisObjects(data, input.layout).x);
+        var resolveXValue = getAxisValueResolver(xAxisType, parseLocalDate);
+        var resolveGanttXValue = function (value) {
+            var resolvedValue = resolveXValue(value);
+            return typeof resolvedValue === 'string' ? 0 : resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : 0;
+        };
+        var isXDate = xAxisType === 'date';
+        var ganttData = [];
+        data.forEach(function (series, index) {
             var _a, _b, _c, _d;
-            colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
-            // extract colors for each series only once
-            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             var legend = legends[index];
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var convertXValueToNumber = function (value) {
-                return (0, chart_utilities_1.isInvalidValue)(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
-            };
-            return series.y
-                .map(function (yVal, i) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                if ((0, chart_utilities_1.isInvalidValue)(yVal)) {
-                    return null;
+            if (series.type === 'bar') {
+                colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
+                // extract colors for each series only once
+                var extractedColors_1 = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+                series.y.forEach(function (yVal, i) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    if ((0, chart_utilities_1.isInvalidValue)(yVal)) {
+                        return;
+                    }
+                    // resolve color for each legend's bars from the colorscale or extracted colors
+                    var color = colorScale
+                        ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                            ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[i % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
+                            : 0)
+                        : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors_1, i, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
+                    var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
+                    var base = +resolveGanttXValue((_h = series.base) === null || _h === void 0 ? void 0 : _h[i]);
+                    var xVal = +resolveGanttXValue((_j = series.x) === null || _j === void 0 ? void 0 : _j[i]);
+                    ganttData.push({
+                        x: {
+                            start: isXDate ? new Date(base) : base,
+                            end: isXDate ? new Date(base + xVal) : base + xVal,
+                        },
+                        y: yVal,
+                        legend: legend,
+                        color: (_k = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _k !== void 0 ? _k : color,
+                    });
+                });
+            }
+            else if (series.type === 'scatter' && series.mode === 'none' && series.fill === 'toself') {
+                for (var i = 0; i < series.y.length; i += 5) {
+                    if ((0, chart_utilities_1.isInvalidValue)(series.y[i]) || (0, chart_utilities_1.isInvalidValue)(series.y[i + 3])) {
+                        continue;
+                    }
+                    var x0 = resolveGanttXValue(series.x[i]);
+                    var x1 = resolveGanttXValue(series.x[i + 1]);
+                    var y0 = series.y[i];
+                    var y1 = series.y[i + 3];
+                    ganttData.push({
+                        x: {
+                            start: x0,
+                            end: x1,
+                        },
+                        y: Math.round((y0 + y1) / 2),
+                        legend: legend,
+                        color: series.fillcolor,
+                    });
                 }
-                // resolve color for each legend's bars from the colorscale or extracted colors
-                var color = colorScale
-                    ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
-                        ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[i % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
-                        : 0)
-                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
-                var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
-                var base = convertXValueToNumber((_h = series.base) === null || _h === void 0 ? void 0 : _h[i]);
-                var xVal = convertXValueToNumber((_j = series.x) === null || _j === void 0 ? void 0 : _j[i]);
-                return {
-                    x: {
-                        start: isXDate ? new Date(base) : base,
-                        end: isXDate ? new Date(base + xVal) : base + xVal,
-                    },
-                    y: yVal,
-                    legend: legend,
-                    color: (_k = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _k !== void 0 ? _k : color,
-                };
-            })
-                .filter(function (point) { return point !== null; });
-        })
-            .flat();
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
+            }
+        });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: ganttData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(data, input.layout)), getBarProps(data, input.layout, true)), getAxisTickProps(data, input.layout));
     };
     exports.transformPlotlyJsonToGanttChartProps = transformPlotlyJsonToGanttChartProps;
     var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -2116,9 +2680,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 var tickValues = axType === 'date' ? ax.tickvals.map(function (v) { return new Date(v); }) : ax.tickvals;
                 if (axId === 'x') {
                     props.tickValues = tickValues;
+                    props.xAxis = {
+                        tickText: ax.ticktext,
+                    };
                 }
                 else if (axId === 'y') {
                     props.yAxisTickValues = tickValues;
+                    props.yAxis = {
+                        tickText: ax.ticktext,
+                    };
                 }
                 return;
             }
@@ -2232,16 +2802,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return axisObjects;
     };
-    function getAxisType(data, arg2, arg3) {
+    var getAxisType = function (data, ax) {
         var _a;
-        var ax;
-        if (arg2 && typeof arg2 === 'object' && '_id' in arg2) {
-            ax = arg2;
-        }
-        else if (typeof arg3 === 'string') {
-            var layout = arg2;
-            ax = getAxisObjects(data, layout)[arg3];
-        }
         if (!ax) {
             return 'category';
         }
@@ -2268,9 +2830,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             return 'date';
         }
         return 'category';
-    }
-    var getAxisValueResolver = function (data, layout, axisId) {
-        var axType = getAxisType(data, layout, axisId);
+    };
+    var getAxisValueResolver = function (axType, dateParser) {
+        var toDate = function (value) {
+            var date = dateParser ? dateParser(value) : new Date(value);
+            return isNaN(date.getTime()) ? null : date;
+        };
         return function (value) {
             if ((0, chart_utilities_1.isInvalidValue)(value)) {
                 return null;
@@ -2281,10 +2846,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     return (0, chart_utilities_1.isNumber)(value) ? +value : null;
                 case 'date':
                     if ((0, chart_utilities_1.isNumber)(value)) {
-                        return new Date(+value);
+                        return toDate(+value);
                     }
                     if (typeof value === 'string') {
-                        return new Date(value);
+                        return toDate(value);
                     }
                     return null;
                 case 'category':