@fluentui/react-charting 5.24.39 → 5.25.1

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

@@ -262,6 +262,517 @@ var flattenObject = function (obj, prefix) {
     }
     return flattened;
 };
+var encodeHtmlEntities = function (value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+};
+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 rawText = textValue === undefined || textValue === null ? '' : String(textValue);
+    var encodedText = encodeHtmlEntities(rawText);
+    var chartAnnotation = {
+        id: createAnnotationId(encodedText, index),
+        text: encodedText,
+        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
@@ -426,7 +937,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
     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);
@@ -434,7 +945,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         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);
@@ -443,7 +954,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                 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: [],
                     };
@@ -496,7 +1007,6 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         .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];
@@ -505,7 +1015,6 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         };
         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) {
@@ -514,7 +1023,10 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                 if (val === 1) {
                     return yMaxValue;
                 }
-                return yMinValue + val * (yMaxValue - yMinValue);
+                if (typeof val === 'number') {
+                    return yMinValue + val * (yMaxValue - yMinValue);
+                }
+                return val;
             }
             return val;
         };
@@ -536,7 +1048,8 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         });
     });
     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) {
@@ -635,7 +1148,8 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
             });
         }
     });
-    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) {
@@ -695,7 +1209,8 @@ var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colo
                 : { 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) {
@@ -710,7 +1225,6 @@ var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, color
     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 [];
@@ -730,7 +1244,7 @@ var mapColorFillBars = function (layout) {
     });
 };
 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',
@@ -745,10 +1259,11 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     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;
@@ -768,7 +1283,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         // 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];
@@ -788,7 +1303,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
                 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 }
@@ -811,16 +1326,49 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         });
     })
         .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),
@@ -840,15 +1388,18 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     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) {
@@ -900,49 +1451,71 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
 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) {
@@ -2127,9 +2700,15 @@ var getAxisTickProps = function (data, layout) {
             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;
         }
@@ -2243,16 +2822,8 @@ var getAxisObjects = function (data, layout) {
     }
     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';
     }
@@ -2279,9 +2850,12 @@ function getAxisType(data, arg2, arg3) {
         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;
@@ -2292,10 +2866,10 @@ var getAxisValueResolver = function (data, layout, axisId) {
                 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':