@fluentui/react-charts 9.3.2 → 9.3.4

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -5,7 +5,7 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { DEFAULT_DATE_STRING, findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS, calculatePrecision, precisionRound } from '../../utilities/utilities';
-import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey, isScatterAreaChart } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
@@ -140,11 +140,12 @@ const usesSecondaryYScale = (series, layout)=>{
     var _layout_yaxis2, _layout_yaxis21;
     return series.yaxis === 'y2' && ((layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.anchor) === 'x' || (layout === null || layout === void 0 ? void 0 : (_layout_yaxis21 = layout.yaxis2) === null || _layout_yaxis21 === void 0 ? void 0 : _layout_yaxis21.side) === 'right');
 };
-const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>{
+const getSecondaryYAxisValues = (data, layout)=>{
     var _layout_yaxis2, _layout_yaxis21, _layout_yaxis2_title, _layout_yaxis22;
     let containsSecondaryYAxis = false;
     let yMinValue;
     let yMaxValue;
+    let allLineSeries = true;
     data.forEach((series)=>{
         if (usesSecondaryYScale(series, layout)) {
             containsSecondaryYAxis = true;
@@ -153,16 +154,21 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
                 yMinValue = Math.min(...yValues);
                 yMaxValue = Math.max(...yValues);
             }
+            if (series.type !== 'scatter' || isScatterAreaChart(series)) {
+                allLineSeries = false;
+            }
         }
     });
     if (!containsSecondaryYAxis) {
         return {};
     }
-    if (typeof yMinValue === 'number' && typeof maxAllowedMinY === 'number') {
-        yMinValue = Math.min(yMinValue, maxAllowedMinY);
-    }
-    if (typeof yMaxValue === 'number' && typeof minAllowedMaxY === 'number') {
-        yMaxValue = Math.max(yMaxValue, minAllowedMaxY);
+    if (!allLineSeries) {
+        if (typeof yMinValue === 'number') {
+            yMinValue = Math.min(yMinValue, 0);
+        }
+        if (typeof yMaxValue === 'number') {
+            yMaxValue = Math.max(yMaxValue, 0);
+        }
     }
     if (layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.range) {
         yMinValue = layout.yaxis2.range[0];
@@ -178,7 +184,7 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
 };
 export const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
     const extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
-    return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
+    return resolveColor(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
 };
 export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
     if (x === null || x === undefined) {
@@ -320,54 +326,41 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     // extract colors for each series only once
     // use piecolorway if available
     // otherwise, default to colorway from template
-    const colors = extractColor((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : firstData === null || firstData === void 0 ? void 0 : (_firstData_marker = firstData.marker) === null || _firstData_marker === void 0 ? void 0 : _firstData_marker.colors, colorMap, isDarkTheme);
+    const colors = extractColor((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : firstData === null || firstData === void 0 ? void 0 : (_firstData_marker = firstData.marker) === null || _firstData_marker === void 0 ? void 0 : _firstData_marker.colors, colorMap, isDarkTheme, true);
     const mapLegendToDataPoint = {};
-    if (colors) {
-        var _firstData_labels;
-        (_firstData_labels = firstData.labels) === null || _firstData_labels === void 0 ? void 0 : _firstData_labels.forEach((label, index)=>{
-            const value = getNumberAtIndexOrDefault(firstData.values, index);
-            if (isInvalidValue(value) || value < 0) {
-                return;
-            }
-            const legend = `${label}`;
-            // resolve color for each legend from the extracted colors
-            const color = resolveColor(colors, index, legend, colorMap, isDarkTheme);
+    // clear colorMap for donut chart to reassign colors as the colorMap initially gets assigned by
+    // getAllupLegendsProps function without sorting labels by value
+    colorMap.current.clear();
+    // Sort labels by value descending before mapping
+    if (firstData.labels && firstData.values) {
+        var _firstData_marker1;
+        const markerColors = ((_firstData_marker1 = firstData.marker) === null || _firstData_marker1 === void 0 ? void 0 : _firstData_marker1.colors) || undefined;
+        const hasMarkerColors = Array.isArray(markerColors) && markerColors.length >= firstData.labels.length;
+        const labelValuePairs = firstData.labels.map((label, index)=>({
+                label,
+                value: getNumberAtIndexOrDefault(firstData.values, index),
+                index,
+                color: hasMarkerColors ? markerColors[index] : undefined
+            }));
+        // Filter out invalid values
+        const validPairs = labelValuePairs.filter((pair)=>!isInvalidValue(pair.value));
+        // Sort descending by value; when marker colors are present, keep color attached to the label
+        validPairs.sort((a, b)=>b.value - a.value);
+        validPairs.forEach((pair, sortedIdx)=>{
+            var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1;
+            const legend = `${pair.label}`;
+            var _input_layout_piecolorway, _pair_color;
+            const color = (_pair_color = pair.color) !== null && _pair_color !== void 0 ? _pair_color : resolveColor(colors, sortedIdx, legend, colorMap, (_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme, true);
             if (!mapLegendToDataPoint[legend]) {
                 mapLegendToDataPoint[legend] = {
                     legend,
-                    data: value,
+                    data: pair.value,
                     color
                 };
             } else {
-                mapLegendToDataPoint[legend].data += value;
+                mapLegendToDataPoint[legend].data += pair.value;
             }
         });
-    } else {
-        // Sort labels by value descending before mapping
-        if (firstData.labels && firstData.values) {
-            const labelValuePairs = firstData.labels.map((label, index)=>({
-                    label,
-                    value: getNumberAtIndexOrDefault(firstData.values, index),
-                    index
-                }));
-            // Filter out invalid values
-            const validPairs = labelValuePairs.filter((pair)=>!isInvalidValue(pair.value));
-            // Sort descending by value
-            validPairs.sort((a, b)=>b.value - a.value);
-            validPairs.forEach((pair, sortedIdx)=>{
-                const legend = `${pair.label}`;
-                const color = resolveColor(colors, sortedIdx, legend, colorMap, isDarkTheme);
-                if (!mapLegendToDataPoint[legend]) {
-                    mapLegendToDataPoint[legend] = {
-                        legend,
-                        data: pair.value,
-                        color
-                    };
-                } else {
-                    mapLegendToDataPoint[legend].data += pair.value;
-                }
-            });
-        }
     }
     var _input_layout_width;
     const width = (_input_layout_width = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width) !== null && _input_layout_width !== void 0 ? _input_layout_width : 440;
@@ -382,10 +375,25 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
     const innerRadius = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : MIN_DONUT_RADIUS;
     const { chartTitle } = getTitles(input.layout);
+    // Build anticlockwise order by keeping the first item, reversing the rest
+    const legends = Object.keys(mapLegendToDataPoint);
+    const reorderedEntries = legends.length > 1 ? [
+        [
+            legends[0],
+            mapLegendToDataPoint[legends[0]]
+        ],
+        ...legends.slice(1).reverse().map((key)=>[
+                key,
+                mapLegendToDataPoint[key]
+            ])
+    ] : legends.map((key)=>[
+            key,
+            mapLegendToDataPoint[key]
+        ]);
     return {
         data: {
             chartTitle,
-            chartData: Object.values(mapLegendToDataPoint)
+            chartData: reorderedEntries.map(([, v])=>v)
         },
         hideLegend: isMultiPlot || ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false,
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
@@ -396,46 +404,43 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
             'percent',
             'label+percent'
         ].includes(firstData.textinfo) : true,
-        roundCorners: true
+        roundCorners: true,
+        order: 'sorted'
     };
 };
 export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1, _vsbcData_;
+    var _input_layout, _input_layout1, _input_layout2, _vsbcData_;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
+    let yMinValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    let yMinValue = 0;
+    const resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
     input.data.forEach((series, index1)=>{
         var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
         colorScale = createColorScale(input.layout, series, colorScale);
-        const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         // extract bar colors for each series only once
         const extractedBarColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         // extract line colors for each series only once
         const extractedLineColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
-        const xValues = series.x;
-        const isXDate = isDateArray(xValues);
-        const isXString = isStringArray(xValues);
-        const isXNumber = isNumberArray(xValues);
-        const validXYRanges = getValidXYRanges(series);
+        const validXYRanges = getValidXYRanges(series, resolveXValue);
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach((x, index2)=>{
-                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
-                        xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        xAxisPoint: resolveXValue(x),
                         chartData: [],
                         lineData: []
                     };
                 }
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, index2, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
                 const opacity = getOpacity(series, index2);
                 const yVal = rangeYValues[index2];
                 const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
@@ -453,8 +458,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var _series_mode;
-                    const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
+                    var _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode;
+                    const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
                     const lineOptions = !((_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('text')) ? getLineOptions(series.line) : undefined;
                     const legendShape = getLegendShape(series);
                     var _rgb_copy_formatHex81;
@@ -481,12 +486,75 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             });
         });
     });
+    var _input_data;
+    const xCategories = Array.from(new Set(((_input_data = input.data) !== null && _input_data !== void 0 ? _input_data : []).flatMap((trace)=>{
+        const xData = trace.x;
+        if (!xData) {
+            return [];
+        }
+        if (Array.isArray(xData)) {
+            return xData.flat().map((x)=>{
+                return x;
+            });
+        }
+        return [];
+    }).filter((x)=>x !== undefined && x !== null)));
+    var _input_layout_shapes;
+    ((_input_layout_shapes = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.shapes) !== null && _input_layout_shapes !== void 0 ? _input_layout_shapes : []).filter((shape)=>shape.type === 'line').forEach((shape, shapeIdx)=>{
+        var _shape_line;
+        const lineColor = (_shape_line = shape.line) === null || _shape_line === void 0 ? void 0 : _shape_line.color;
+        const resolveX = (val)=>{
+            if (typeof val === 'number' && Array.isArray(xCategories)) {
+                if (xCategories[val] !== undefined) {
+                    return xCategories[val];
+                } else {
+                    return xCategories[shapeIdx];
+                }
+            }
+            return val;
+        };
+        const x0Key = resolveX(shape.x0);
+        const x1Key = resolveX(shape.x1);
+        const resolveY = (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;
+        };
+        const y0Val = resolveY(shape.y0);
+        const y1Val = resolveY(shape.y1);
+        var _rgb_formatHex8;
+        mapXToDataPoints[x0Key].lineData.push({
+            legend: `Reference_${shapeIdx}`,
+            y: y0Val,
+            color: (_rgb_formatHex8 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex8 !== void 0 ? _rgb_formatHex8 : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false
+        });
+        var _rgb_formatHex81;
+        mapXToDataPoints[x1Key].lineData.push({
+            legend: `Reference_${shapeIdx}`,
+            y: y1Val,
+            color: (_rgb_formatHex81 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex81 !== void 0 ? _rgb_formatHex81 : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false
+        });
+    });
     const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
         data: vsbcData,
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
         yMaxValue,
         yMinValue,
@@ -510,7 +578,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
     };
 };
 export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _processedInput_layout, _processedInput_layout1, _gvbcData_;
+    var _processedInput_layout, _processedInput_layout1;
     // Handle object arrays in y values by normalizing the data first
     let processedInput = {
         ...input
@@ -539,60 +607,90 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
             data: processedData
         };
     }
-    const mapXToDataPoints = {};
-    const secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout, 0, 0);
+    const gvbcDataV2 = [];
+    const secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout);
     const { legends, hideLegend } = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot);
     let colorScale = undefined;
     const yAxisTickFormat = getYAxisTickFormat(processedInput.data[0], processedInput.layout);
     processedInput.data.forEach((series, index1)=>{
-        var _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout, _series_marker, _series_x;
         colorScale = createColorScale(processedInput.layout, series, colorScale);
-        // extract colors for each series only once
-        const extractedColors = extractColor((_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : (_processedInput_layout_template = _processedInput_layout.template) === null || _processedInput_layout_template === void 0 ? void 0 : (_processedInput_layout_template_layout = _processedInput_layout_template.layout) === null || _processedInput_layout_template_layout === void 0 ? void 0 : _processedInput_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
-        (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
-            var _series_y;
-            if (isInvalidValue(x) || isInvalidValue((_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2])) {
-                return;
-            }
-            if (!mapXToDataPoints[x]) {
-                mapXToDataPoints[x] = {
-                    name: x.toString(),
-                    series: []
-                };
-            }
-            if (series.type === 'bar') {
-                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
-                const legend = legends[index1];
-                // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index2, legend, colorMap, isDarkTheme);
-                const opacity = getOpacity(series, index2);
-                const yVal = series.y[index2];
+        const legend = legends[index1];
+        const legendShape = getLegendShape(series);
+        if (series.type === 'bar') {
+            var _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout, _series_marker;
+            // extract bar colors for each series only once
+            const extractedBarColors = extractColor((_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : (_processedInput_layout_template = _processedInput_layout.template) === null || _processedInput_layout_template === void 0 ? void 0 : (_processedInput_layout_template_layout = _processedInput_layout_template.layout) === null || _processedInput_layout_template_layout === void 0 ? void 0 : _processedInput_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+            gvbcDataV2.push({
+                type: 'bar',
+                legend,
+                key: legend,
+                data: series.x.map((x, xIndex)=>{
+                    var _series_y, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout;
+                    if (isInvalidValue(x) || isInvalidValue((_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[xIndex])) {
+                        return;
+                    }
+                    // resolve color for each legend's bars from the colorscale or extracted colors
+                    const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[xIndex % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, xIndex, legend, colorMap, (_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : (_processedInput_layout_template = _processedInput_layout.template) === null || _processedInput_layout_template === void 0 ? void 0 : (_processedInput_layout_template_layout = _processedInput_layout_template.layout) === null || _processedInput_layout_template_layout === void 0 ? void 0 : _processedInput_layout_template_layout.colorway, isDarkTheme);
+                    const opacity = getOpacity(series, xIndex);
+                    const yVal = series.y[xIndex];
+                    var _rgb_copy_formatHex8;
+                    return {
+                        x: x.toString(),
+                        y: yVal,
+                        yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
+                        color: (_rgb_copy_formatHex8 = rgb(color).copy({
+                            opacity
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                    };
+                }).filter((item)=>typeof item !== 'undefined'),
+                useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout)
+            });
+        } else if (series.type === 'scatter') {
+            var _processedInput_layout_template_layout1, _processedInput_layout_template1, _processedInput_layout1, _series_line, _processedInput_layout_template_layout2, _processedInput_layout_template2, _processedInput_layout2;
+            // extract line colors for each series only once
+            const extractedLineColors = extractColor((_processedInput_layout1 = processedInput.layout) === null || _processedInput_layout1 === void 0 ? void 0 : (_processedInput_layout_template1 = _processedInput_layout1.template) === null || _processedInput_layout_template1 === void 0 ? void 0 : (_processedInput_layout_template_layout1 = _processedInput_layout_template1.layout) === null || _processedInput_layout_template_layout1 === void 0 ? void 0 : _processedInput_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
+            const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, (_processedInput_layout2 = processedInput.layout) === null || _processedInput_layout2 === void 0 ? void 0 : (_processedInput_layout_template2 = _processedInput_layout2.template) === null || _processedInput_layout_template2 === void 0 ? void 0 : (_processedInput_layout_template_layout2 = _processedInput_layout_template2.layout) === null || _processedInput_layout_template_layout2 === void 0 ? void 0 : _processedInput_layout_template_layout2.colorway, isDarkTheme);
+            const lineOptions = getLineOptions(series.line);
+            const opacity = getOpacity(series, index1);
+            const validXYRanges = getValidXYRanges(series);
+            validXYRanges.forEach(([rangeStart, rangeEnd])=>{
+                const rangeXValues = series.x.slice(rangeStart, rangeEnd);
+                const rangeYValues = series.y.slice(rangeStart, rangeEnd);
                 var _rgb_copy_formatHex8;
-                mapXToDataPoints[x].series.push({
-                    key: legend,
-                    data: yVal,
-                    xAxisCalloutData: x,
-                    color: (_rgb_copy_formatHex8 = rgb(color).copy({
-                        opacity
-                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                gvbcDataV2.push({
+                    type: 'line',
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
-                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
+                    legendShape,
+                    data: rangeXValues.map((x, i)=>{
+                        const yVal = rangeYValues[i];
+                        return {
+                            x: x.toString(),
+                            y: yVal,
+                            yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
+                        };
+                    }),
+                    color: (_rgb_copy_formatHex8 = rgb(lineColor).copy({
+                        opacity
+                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : lineColor,
+                    lineOptions: {
+                        ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
+                        mode: series.mode
+                    },
+                    useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout)
                 });
-            }
-        });
+            });
+        }
     });
-    const gvbcData = Object.values(mapXToDataPoints);
     var _processedInput_layout_height;
     return {
-        data: gvbcData,
+        dataV2: gvbcDataV2,
         width: (_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : _processedInput_layout.width,
         height: (_processedInput_layout_height = (_processedInput_layout1 = processedInput.layout) === null || _processedInput_layout1 === void 0 ? void 0 : _processedInput_layout1.height) !== null && _processedInput_layout_height !== void 0 ? _processedInput_layout_height : 350,
         barWidth: 'auto',
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
+        wrapXAxisLables: true,
         hideLegend,
         roundCorners: true,
         ...getTitles(processedInput.layout),
@@ -620,8 +718,9 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
         const xValues = [];
         const yValues = [];
         series.x.forEach((xVal, index)=>{
-            const yVal = getNumberAtIndexOrDefault(series.y, index);
-            if (isInvalidValue(xVal) || isInvalidValue(yVal)) {
+            var _getNumberAtIndexOrDefault;
+            const yVal = (_getNumberAtIndexOrDefault = getNumberAtIndexOrDefault(series.y, index)) !== null && _getNumberAtIndexOrDefault !== void 0 ? _getNumberAtIndexOrDefault : 0;
+            if (isInvalidValue(xVal)) {
                 return;
             }
             xValues.push(xVal);
@@ -645,10 +744,10 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             return yVal;
         });
         xBins.forEach((bin, index)=>{
-            var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
             const legend = legends[seriesIdx];
             // resolve color for each legend's bars from the colorscale or extracted colors
-            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             const opacity = getOpacity(series, index);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             var _rgb_copy_formatHex8;
@@ -690,8 +789,29 @@ export const transformPlotlyJsonToLineChartProps = (input, isMultiPlot, colorMap
 export const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
+const mapColorFillBars = (layout)=>{
+    if (!Array.isArray(layout === null || layout === void 0 ? void 0 : layout.shapes)) {
+        return [];
+    }
+    return layout.shapes.filter((shape)=>shape.type === 'rect').map((shape)=>{
+        //colorFillbars doesn't support string dates or categories
+        if (typeof shape.x0 === 'string' || typeof shape.x1 === 'string') {
+            return null;
+        }
+        return {
+            color: shape.fillcolor,
+            data: [
+                {
+                    startX: shape.x0,
+                    endX: shape.x1
+                }
+            ],
+            applyPattern: false
+        };
+    });
+};
 const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_data_, _input_layout, _input_layout1;
+    var _input_data_, _chartData__data_, _chartData_, _chartData__data_1, _chartData_1, _chartData__data_2, _chartData_2, _chartData__data_3, _chartData_3, _input_layout, _input_layout1, _input_layout2;
     const isScatterMarkers = [
         'text',
         'markers',
@@ -704,36 +824,34 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     ].includes((_input_data_ = input.data[0]) === null || _input_data_ === void 0 ? void 0 : _input_data_.mode);
     const isAreaChart = chartType === 'area';
     const isScatterChart = chartType === 'scatter';
-    const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
+    const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    var shouldWrapLabels = false;
+    const xAxisType = getAxisType(input.data, getAxisObjects(input.data, input.layout).x);
+    const resolveXValue = getAxisValueResolver(xAxisType);
+    const shouldWrapLabels = xAxisType === 'category';
     const chartData = input.data.map((series, index)=>{
-        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1;
+        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
         // extract colors for each series only once
         const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
         const xValues = series.x;
-        const isXString = isStringArray(xValues);
-        const isXDate = isDateArray(xValues);
-        const isXNumber = isNumberArray(xValues);
-        const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
-        shouldWrapLabels = shouldWrapLabels || isXString && !isXDate;
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
-        const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        const seriesColor = resolveColor(extractedColors, index, legend, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
         const seriesOpacity = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         // if mode contains 'text', we prioritize showing the text over curving the line
         const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
         const legendShape = getLegendShape(series);
-        const validXYRanges = getValidXYRanges(series);
+        const validXYRanges = getValidXYRanges(series, resolveXValue);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
-            var _series_marker, _input_layout, _input_layout_polar_angularaxis, _input_layout_polar, _input_layout1, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout2;
+            var _series_marker, _series_marker1, _series_marker2, _input_layout, _input_layout_polar_angularaxis, _input_layout_polar, _input_layout1, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout2;
             const rangeXValues = xValues.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             const markerSizes = isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? series.marker.size.slice(rangeStart, rangeEnd) : [];
+            const markerColors = isArrayOrTypedArray((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color) ? series.marker.color.slice(rangeStart, rangeEnd) : Array.isArray((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : _series_marker2.color) ? series.marker.color.slice(rangeStart, rangeEnd) : undefined;
             const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
             var _rgb_copy_formatHex8;
             return {
@@ -742,13 +860,16 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                 data: rangeXValues.map((x, i)=>{
                     var _series_marker, _series_marker1;
                     return {
-                        x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        x: resolveXValue(x),
                         y: rangeYValues[i],
                         ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
                             markerSize: markerSizes[i]
                         } : typeof ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size) === 'number' ? {
                             markerSize: series.marker.size
                         } : {},
+                        ...markerColors ? {
+                            markerColor: markerColors[i]
+                        } : {},
                         ...textValues ? {
                             text: textValues[i]
                         } : {},
@@ -767,13 +888,70 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                         originXOffset: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.__polarOriginX,
                         direction: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_polar = _input_layout1.polar) === null || _input_layout_polar === void 0 ? void 0 : (_input_layout_polar_angularaxis = _input_layout_polar.angularaxis) === null || _input_layout_polar_angularaxis === void 0 ? void 0 : _input_layout_polar_angularaxis.direction,
                         rotation: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout2.polar) === null || _input_layout_polar1 === void 0 ? void 0 : (_input_layout_polar_angularaxis1 = _input_layout_polar1.angularaxis) === null || _input_layout_polar_angularaxis1 === void 0 ? void 0 : _input_layout_polar_angularaxis1.rotation,
-                        axisLabel: series.__axisLabel ? series.__axisLabel : {}
+                        axisLabel: series.__axisLabel ? series.__axisLabel : {},
+                        fill: series.fill
                     } : {}
                 },
                 useSecondaryYScale: usesSecondaryYScale(series, input.layout)
             };
         });
     }).flat();
+    const xMinValue = (_chartData_ = chartData[0]) === null || _chartData_ === void 0 ? void 0 : (_chartData__data_ = _chartData_.data[0]) === null || _chartData__data_ === void 0 ? void 0 : _chartData__data_.x;
+    const xMaxValue = (_chartData_1 = chartData[0]) === null || _chartData_1 === void 0 ? void 0 : (_chartData__data_1 = _chartData_1.data[chartData[0].data.length - 1]) === null || _chartData__data_1 === void 0 ? void 0 : _chartData__data_1.x;
+    const yMinValue = (_chartData_2 = chartData[0]) === null || _chartData_2 === void 0 ? void 0 : (_chartData__data_2 = _chartData_2.data[0]) === null || _chartData__data_2 === void 0 ? void 0 : _chartData__data_2.y;
+    const yMaxValue = (_chartData_3 = chartData[0]) === null || _chartData_3 === void 0 ? void 0 : (_chartData__data_3 = _chartData_3.data[chartData[0].data.length - 1]) === null || _chartData__data_3 === void 0 ? void 0 : _chartData__data_3.y;
+    var _input_layout_shapes;
+    const lineShape = ((_input_layout_shapes = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.shapes) !== null && _input_layout_shapes !== void 0 ? _input_layout_shapes : []).filter((shape)=>shape.type === 'line').map((shape, shapeIdx)=>{
+        var _shape_line;
+        const lineColor = (_shape_line = shape.line) === null || _shape_line === void 0 ? void 0 : _shape_line.color;
+        const resolveX = (val)=>{
+            if (shape.xref === 'paper') {
+                if (val === 0) {
+                    return xMinValue;
+                }
+                if (val === 1) {
+                    return xMaxValue;
+                }
+                if (typeof val === 'number' && typeof xMinValue === 'number' && typeof xMaxValue === 'number') {
+                    return xMinValue + val * (xMaxValue - xMinValue);
+                }
+                return val;
+            }
+            return val;
+        };
+        const resolveY = (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;
+        };
+        var _rgb_formatHex8;
+        return {
+            legend: `Reference_${shapeIdx}`,
+            data: [
+                {
+                    x: resolveX(shape.x0),
+                    y: resolveY(shape.y0)
+                },
+                {
+                    x: resolveX(shape.x1),
+                    y: resolveY(shape.y1)
+                }
+            ],
+            color: (_rgb_formatHex8 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex8 !== void 0 ? _rgb_formatHex8 : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false
+        };
+    });
     const yMinMax = getYMinMaxValues(input.data[0], input.layout);
     if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
         const yMinMaxValues = findNumericMinMaxOfY(chartData);
@@ -782,7 +960,10 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     }
     const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
-        lineChartData: chartData
+        lineChartData: [
+            ...chartData,
+            ...lineShape
+        ]
     };
     const scatterChartProps = {
         scatterChartData: chartData
@@ -791,8 +972,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     const commonProps = {
         supportNegativeData: true,
         ...secondaryYAxisValues,
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
@@ -819,7 +1000,13 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             ...isScatterChart ? {
                 showYAxisLablesTooltip: true,
                 ...getAxisCategoryOrderProps(input.data, input.layout)
-            } : {}
+            } : {},
+            ...!isScatterChart && (()=>{
+                const bars = mapColorFillBars(input.layout);
+                return bars && !bars.includes(null) ? {
+                    colorFillBars: bars
+                } : {};
+            })()
         };
     }
 };
@@ -834,16 +1021,16 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         const legend = legends[index];
         return series.y.map((yValue, i)=>{
-            var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
-            if (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_x;
+            if (isInvalidValue(yValue)) {
                 return null;
             }
             // resolve color for each legend's bars from the colorscale or extracted colors
-            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             const opacity = getOpacity(series, i);
             var _rgb_copy_formatHex8;
             return {
-                x: series.x[i],
+                x: isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) ? 0 : series.x[i],
                 y: yValue,
                 legend,
                 color: (_rgb_copy_formatHex8 = rgb(color).copy({
@@ -883,46 +1070,71 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
 };
 export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout1;
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    const data = input.data.filter((series)=>series.type !== 'scatter' || series.mode !== 'markers');
+    const { legends, hideLegend } = getLegendProps(data, input.layout, isMultiPlot);
     let colorScale = undefined;
-    const chartData = input.data.map((series, index)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_xaxis, _input_layout1;
-        colorScale = createColorScale(input.layout, series, colorScale);
-        // extract colors for each series only once
-        const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+    const xAxisType = getAxisType(data, getAxisObjects(data, input.layout).x);
+    const resolveXValue = getAxisValueResolver(xAxisType, parseLocalDate);
+    const resolveGanttXValue = (value)=>{
+        const resolvedValue = resolveXValue(value);
+        return typeof resolvedValue === 'string' ? 0 : resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : 0;
+    };
+    const isXDate = xAxisType === 'date';
+    const ganttData = [];
+    data.forEach((series, index)=>{
         const legend = legends[index];
-        const isXDate = ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_xaxis = _input_layout1.xaxis) === null || _input_layout_xaxis === void 0 ? void 0 : _input_layout_xaxis.type) === 'date' || isDateArray(series.x);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const convertXValueToNumber = (value)=>{
-            return isInvalidValue(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
-        };
-        return series.y.map((yVal, i)=>{
-            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _series_base, _series_x;
-            if (isInvalidValue(yVal)) {
-                return null;
+        if (series.type === 'bar') {
+            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
+            colorScale = createColorScale(input.layout, series, colorScale);
+            // extract colors for each series only once
+            const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+            series.y.forEach((yVal, i)=>{
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_base, _series_x;
+                if (isInvalidValue(yVal)) {
+                    return;
+                }
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
+                const opacity = getOpacity(series, i);
+                const base = +resolveGanttXValue((_series_base = series.base) === null || _series_base === void 0 ? void 0 : _series_base[i]);
+                const xVal = +resolveGanttXValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]);
+                var _rgb_copy_formatHex8;
+                ganttData.push({
+                    x: {
+                        start: isXDate ? new Date(base) : base,
+                        end: isXDate ? new Date(base + xVal) : base + xVal
+                    },
+                    y: yVal,
+                    legend,
+                    color: (_rgb_copy_formatHex8 = rgb(color).copy({
+                        opacity
+                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                });
+            });
+        } else if (series.type === 'scatter' && series.mode === 'none' && series.fill === 'toself') {
+            for(let i = 0; i < series.y.length; i += 5){
+                if (isInvalidValue(series.y[i]) || isInvalidValue(series.y[i + 3])) {
+                    continue;
+                }
+                const x0 = resolveGanttXValue(series.x[i]);
+                const x1 = resolveGanttXValue(series.x[i + 1]);
+                const y0 = series.y[i];
+                const y1 = series.y[i + 3];
+                ganttData.push({
+                    x: {
+                        start: x0,
+                        end: x1
+                    },
+                    y: Math.round((y0 + y1) / 2),
+                    legend,
+                    color: series.fillcolor
+                });
             }
-            // resolve color for each legend's bars from the colorscale or extracted colors
-            const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
-            const opacity = getOpacity(series, i);
-            const base = convertXValueToNumber((_series_base = series.base) === null || _series_base === void 0 ? void 0 : _series_base[i]);
-            const xVal = convertXValueToNumber((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]);
-            var _rgb_copy_formatHex8;
-            return {
-                x: {
-                    start: isXDate ? new Date(base) : base,
-                    end: isXDate ? new Date(base + xVal) : base + xVal
-                },
-                y: yVal,
-                legend,
-                color: (_rgb_copy_formatHex8 = rgb(color).copy({
-                    opacity
-                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
-            };
-        }).filter((point)=>point !== null);
-    }).flat();
+        }
+    });
     var _input_layout_height;
     return {
-        data: chartData,
+        data: ganttData,
         showYAxisLables: true,
         height: (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
@@ -933,9 +1145,9 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
         roundCorners: true,
         useUTC: false,
         ...getTitles(input.layout),
-        ...getAxisCategoryOrderProps(input.data, input.layout),
-        ...getBarProps(input.data, input.layout, true),
-        ...getAxisTickProps(input.data, input.layout)
+        ...getAxisCategoryOrderProps(data, input.layout),
+        ...getBarProps(data, input.layout, true),
+        ...getAxisTickProps(data, input.layout)
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -951,8 +1163,9 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         const zValues = [];
         (_firstData_x = firstData.x) === null || _firstData_x === void 0 ? void 0 : _firstData_x.forEach((xVal, index)=>{
             var _firstData_y;
-            const zVal = getNumberAtIndexOrDefault(firstData.z, index);
-            if (isInvalidValue(xVal) || isInvalidValue((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index]) || isInvalidValue(zVal)) {
+            var _getNumberAtIndexOrDefault;
+            const zVal = (_getNumberAtIndexOrDefault = getNumberAtIndexOrDefault(firstData.z, index)) !== null && _getNumberAtIndexOrDefault !== void 0 ? _getNumberAtIndexOrDefault : 0;
+            if (isInvalidValue(xVal) || isInvalidValue((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index])) {
                 return;
             }
             xValues.push(xVal);
@@ -1091,7 +1304,8 @@ export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, c
     const extractedNodeColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
     const sankeyChartData = {
         nodes: (_node_label = node.label) === null || _node_label === void 0 ? void 0 : _node_label.map((label, index)=>{
-            const color = resolveColor(extractedNodeColors, index, label, colorMap, isDarkTheme);
+            var _input_layout_template_layout, _input_layout_template, _input_layout;
+            const color = resolveColor(extractedNodeColors, index, label, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
             return {
                 nodeId: index,
                 name: label,
@@ -1128,9 +1342,9 @@ export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, co
     const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, stepsColors, colorMap, isDarkTheme);
     var _firstData_gauge_axis_range_, _firstData_value, _firstData_gauge_axis_range_1, _firstData_value1;
     const segments = ((_firstData_gauge1 = firstData.gauge) === null || _firstData_gauge1 === void 0 ? void 0 : (_firstData_gauge_steps = _firstData_gauge1.steps) === null || _firstData_gauge_steps === void 0 ? void 0 : _firstData_gauge_steps.length) ? firstData.gauge.steps.map((step, index)=>{
-        var _step_range, _step_range1;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _step_range, _step_range1;
         const legend = step.name || `Segment ${index + 1}`;
-        const color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        const color = resolveColor(extractedColors, index, legend, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
         return {
             legend,
             size: ((_step_range = step.range) === null || _step_range === void 0 ? void 0 : _step_range[1]) - ((_step_range1 = step.range) === null || _step_range1 === void 0 ? void 0 : _step_range1[0]),
@@ -1153,16 +1367,16 @@ export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, co
     if ((_firstData_delta = firstData.delta) === null || _firstData_delta === void 0 ? void 0 : _firstData_delta.reference) {
         const diff = firstData.value - firstData.delta.reference;
         if (diff >= 0) {
-            var _input_layout_template_layout2, _input_layout_template2, _input_layout4, _firstData_delta_increasing, _firstData_delta1;
+            var _input_layout_template_layout2, _input_layout_template2, _input_layout4, _firstData_delta_increasing, _firstData_delta1, _input_layout_template_layout3, _input_layout_template3, _input_layout5;
             sublabel = `\u25B2 ${diff}`;
             const extractedIncreasingDeltaColors = extractColor((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template2 = _input_layout4.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_layout2 = _input_layout_template2.layout) === null || _input_layout_template_layout2 === void 0 ? void 0 : _input_layout_template_layout2.colorway, colorwayType, (_firstData_delta1 = firstData.delta) === null || _firstData_delta1 === void 0 ? void 0 : (_firstData_delta_increasing = _firstData_delta1.increasing) === null || _firstData_delta_increasing === void 0 ? void 0 : _firstData_delta_increasing.color, colorMap, isDarkTheme);
-            const color = resolveColor(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            const color = resolveColor(extractedIncreasingDeltaColors, 0, '', colorMap, (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template3 = _input_layout5.template) === null || _input_layout_template3 === void 0 ? void 0 : (_input_layout_template_layout3 = _input_layout_template3.layout) === null || _input_layout_template_layout3 === void 0 ? void 0 : _input_layout_template_layout3.colorway, isDarkTheme);
             sublabelColor = color;
         } else {
-            var _input_layout_template_layout3, _input_layout_template3, _input_layout5, _firstData_delta_decreasing, _firstData_delta2;
+            var _input_layout_template_layout4, _input_layout_template4, _input_layout6, _firstData_delta_decreasing, _firstData_delta2, _input_layout_template_layout5, _input_layout_template5, _input_layout7;
             sublabel = `\u25BC ${Math.abs(diff)}`;
-            const extractedDecreasingDeltaColors = extractColor((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template3 = _input_layout5.template) === null || _input_layout_template3 === void 0 ? void 0 : (_input_layout_template_layout3 = _input_layout_template3.layout) === null || _input_layout_template_layout3 === void 0 ? void 0 : _input_layout_template_layout3.colorway, colorwayType, (_firstData_delta2 = firstData.delta) === null || _firstData_delta2 === void 0 ? void 0 : (_firstData_delta_decreasing = _firstData_delta2.decreasing) === null || _firstData_delta_decreasing === void 0 ? void 0 : _firstData_delta_decreasing.color, colorMap, isDarkTheme);
-            const color = resolveColor(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            const extractedDecreasingDeltaColors = extractColor((_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : (_input_layout_template4 = _input_layout6.template) === null || _input_layout_template4 === void 0 ? void 0 : (_input_layout_template_layout4 = _input_layout_template4.layout) === null || _input_layout_template_layout4 === void 0 ? void 0 : _input_layout_template_layout4.colorway, colorwayType, (_firstData_delta2 = firstData.delta) === null || _firstData_delta2 === void 0 ? void 0 : (_firstData_delta_decreasing = _firstData_delta2.decreasing) === null || _firstData_delta_decreasing === void 0 ? void 0 : _firstData_delta_decreasing.color, colorMap, isDarkTheme);
+            const color = resolveColor(extractedDecreasingDeltaColors, 0, '', colorMap, (_input_layout7 = input.layout) === null || _input_layout7 === void 0 ? void 0 : (_input_layout_template5 = _input_layout7.template) === null || _input_layout_template5 === void 0 ? void 0 : (_input_layout_template_layout5 = _input_layout_template5.layout) === null || _input_layout_template_layout5 === void 0 ? void 0 : _input_layout_template_layout5.colorway, isDarkTheme);
             sublabelColor = color;
         }
     }
@@ -1415,13 +1629,13 @@ export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorM
         // Assign a color per series/category and use it for all subValues of that category
         const seriesColors = {};
         input.data.forEach((series, seriesIdx)=>{
-            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_marker1;
+            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_marker1, _input_layout_template_layout1, _input_layout_template1, _input_layout1;
             const category = series.name || `Category ${seriesIdx + 1}`;
             var _series_marker_colors;
             // Use the same color for this category across all stages
             const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker_colors = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.colors) !== null && _series_marker_colors !== void 0 ? _series_marker_colors : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color, colorMap, isDarkTheme);
             // Always use the first color for the series/category
-            const color = resolveColor(extractedColors, 0, category, colorMap, isDarkTheme);
+            const color = resolveColor(extractedColors, 0, category, colorMap, (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, isDarkTheme);
             seriesColors[category] = color;
             var _series_labels, _ref;
             const labels = (_ref = (_series_labels = series.labels) !== null && _series_labels !== void 0 ? _series_labels : series.y) !== null && _ref !== void 0 ? _ref : series.stage;
@@ -1469,7 +1683,8 @@ export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorM
             var _series_marker_colors;
             const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker_colors = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.colors) !== null && _series_marker_colors !== void 0 ? _series_marker_colors : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color, colorMap, isDarkTheme);
             categories.forEach((label, i)=>{
-                const color = resolveColor(extractedColors, i, label, colorMap, isDarkTheme);
+                var _input_layout_template_layout, _input_layout_template, _input_layout;
+                const color = resolveColor(extractedColors, i, label, colorMap, (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme);
                 const valueNum = Number(values[i]);
                 if (isNaN(valueNum)) {
                     return;
@@ -1808,11 +2023,13 @@ export const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, i
                 var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _pieSeries_marker, _pieSeries_labels;
                 const pieSeries = series;
                 var _input_layout_piecolorway, _input_layout_piecolorway1;
-                const colors = extractColor((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : pieSeries === null || pieSeries === void 0 ? void 0 : (_pieSeries_marker = pieSeries.marker) === null || _pieSeries_marker === void 0 ? void 0 : _pieSeries_marker.colors, colorMap, isDarkTheme);
+                const colors = extractColor((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : pieSeries === null || pieSeries === void 0 ? void 0 : (_pieSeries_marker = pieSeries.marker) === null || _pieSeries_marker === void 0 ? void 0 : _pieSeries_marker.colors, colorMap, isDarkTheme, true);
                 (_pieSeries_labels = pieSeries.labels) === null || _pieSeries_labels === void 0 ? void 0 : _pieSeries_labels.forEach((label, labelIndex)=>{
+                    var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1;
                     const legend = `${label}`;
+                    var _input_layout_piecolorway;
                     // resolve color for each legend from the extracted colors
-                    const color = resolveColor(colors, labelIndex, legend, colorMap, isDarkTheme);
+                    const color = resolveColor(colors, labelIndex, legend, colorMap, (_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, isDarkTheme, true);
                     if (legend !== '' && allupLegends.some((group)=>group.title === legend) === false) {
                         allupLegends.push({
                             title: legend,
@@ -1869,7 +2086,7 @@ export const getNumberAtIndexOrDefault = (data, index)=>{
     }
     return 1;
 };
-export const getValidXYRanges = (series)=>{
+export const getValidXYRanges = (series, resolveX, resolveY)=>{
     if (!isArrayOrTypedArray(series.x) || !isArrayOrTypedArray(series.y)) {
         return [];
     }
@@ -1877,7 +2094,7 @@ export const getValidXYRanges = (series)=>{
     let start = 0;
     let end = 0;
     for(; end < series.x.length; end++){
-        if (isInvalidValue(series.x[end]) || isInvalidValue(series.y[end])) {
+        if (isInvalidValue(series.x[end]) || typeof resolveX === 'function' && isInvalidValue(resolveX(series.x[end])) || isInvalidValue(series.y[end]) || typeof resolveY === 'function' && isInvalidValue(resolveY(series.y[end]))) {
             if (end - start > 0) {
                 ranges.push([
                     start,
@@ -2084,6 +2301,7 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         });
         const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || isStringArray(values) && !isNumberArray(values) && !isDateArray(values);
         if (!isAxisTypeCategory) {
+            result[propName] = 'data';
             return;
         }
         const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
@@ -2093,7 +2311,7 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         }
         if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
             const categoriesInTraceOrder = Array.from(new Set(values));
-            result[propName] = categoriesInTraceOrder;
+            result[propName] = (ax === null || ax === void 0 ? void 0 : ax.autorange) === 'reversed' ? categoriesInTraceOrder.reverse() : categoriesInTraceOrder;
             return;
         }
         result[propName] = ax.categoryorder;
@@ -2164,13 +2382,19 @@ const getAxisScaleTypeProps = (data, layout)=>{
         if (!ax) {
             return;
         }
-        const axType = getAxisType(data, axId[0], ax);
+        const axType = getAxisType(data, ax);
         if ((!ax.tickmode || ax.tickmode === 'array') && isArrayOrTypedArray(ax.tickvals)) {
             const tickValues = axType === 'date' ? ax.tickvals.map((v)=>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;
         }
@@ -2180,12 +2404,12 @@ const getAxisScaleTypeProps = (data, layout)=>{
             if (axId === 'x') {
                 props.xAxis = {
                     tickStep: dtick,
-                    tick0: tick0
+                    tick0
                 };
             } else if (axId === 'y') {
                 props.yAxis = {
                     tickStep: dtick,
-                    tick0: tick0
+                    tick0
                 };
             }
             return;
@@ -2262,44 +2486,84 @@ const getAxisObjects = (data, layout)=>{
         xAxisId = axisIds.x;
         yAxisIds.add(axisIds.y);
     });
+    const makeAxisObject = (axLetter, axId)=>({
+            ...layout === null || layout === void 0 ? void 0 : layout[getAxisKey(axLetter, axId)],
+            _id: `${axLetter}${axId > 1 ? axId : ''}`
+        });
     const axisObjects = {};
     if (typeof xAxisId === 'number') {
-        axisObjects.x = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('x', xAxisId)];
+        axisObjects.x = makeAxisObject('x', xAxisId);
     }
     const sortedYAxisIds = Array.from(yAxisIds).sort();
     if (sortedYAxisIds.length > 0) {
-        axisObjects.y = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('y', sortedYAxisIds[0])];
+        axisObjects.y = makeAxisObject('y', sortedYAxisIds[0]);
     }
     if (sortedYAxisIds.length > 1) {
-        axisObjects.y2 = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('y', sortedYAxisIds[1])];
+        axisObjects.y2 = makeAxisObject('y', sortedYAxisIds[1]);
     }
     return axisObjects;
 };
-const getAxisType = (data, axLetter, ax)=>{
+const getAxisType = (data, ax)=>{
+    if (!ax) {
+        return 'category';
+    }
+    var _ax_type;
+    if ([
+        'linear',
+        'log',
+        'date',
+        'category'
+    ].includes((_ax_type = ax.type) !== null && _ax_type !== void 0 ? _ax_type : '')) {
+        return ax.type;
+    }
+    const axLetter = ax._id[0];
     const values = [];
     data.forEach((series)=>{
-        var _series_axLetter;
-        (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
-            if (!isInvalidValue(val)) {
-                values.push(val);
-            }
-        });
-    });
-    // Note: When ax.type is explicitly specified, Plotly casts the values to match that type.
-    // Therefore, simply checking the type of the values may not be sufficient. At the moment,
-    // we don’t always perform this casting ourselves and instead use the values as provided.
-    if (isNumberArray(values)) {
-        if ((ax === null || ax === void 0 ? void 0 : ax.type) === 'log') {
-            return 'log';
+        const axId = series[`${axLetter}axis`];
+        if (axId === ax._id || !axId && ax._id === axLetter) {
+            var _series_axLetter;
+            (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
+                if (!isInvalidValue(val)) {
+                    values.push(val);
+                }
+            });
         }
+    });
+    if (isNumberArray(values) && !isYearArray(values)) {
         return 'linear';
     }
     if (isDateArray(values)) {
         return 'date';
     }
-    if (isStringArray(values)) {
-        return 'category';
-    }
+    return 'category';
+};
+const getAxisValueResolver = (axType, dateParser)=>{
+    const toDate = (value)=>{
+        const date = dateParser ? dateParser(value) : new Date(value);
+        return isNaN(date.getTime()) ? null : date;
+    };
+    return (value)=>{
+        if (isInvalidValue(value)) {
+            return null;
+        }
+        switch(axType){
+            case 'linear':
+            case 'log':
+                return isNumber(value) ? +value : null;
+            case 'date':
+                if (isNumber(value)) {
+                    return toDate(+value);
+                }
+                if (typeof value === 'string') {
+                    return toDate(value);
+                }
+                return null;
+            case 'category':
+                return `${value}`;
+            default:
+                return null;
+        }
+    };
 };
 /**
  * This is experimental. Use it only with valid datetime strings to verify if they conform to the ISO 8601 format.