@fluentui/react-charts 9.3.7 → 9.3.9

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -50,12 +50,37 @@ const dashOptions = {
     }
 };
 function getTitles(layout) {
-    var _layout_title, _layout_xaxis, _layout_xaxis1, _layout_xaxis_title, _layout_xaxis2, _layout_yaxis, _layout_yaxis1, _layout_yaxis_title, _layout_yaxis2;
-    var _layout_title_text, _layout_xaxis_title_text, _layout_yaxis_title_text;
+    var _layout_xaxis, _layout_xaxis1, _layout_xaxis_title, _layout_xaxis2, _layout_yaxis, _layout_yaxis1, _layout_yaxis_title, _layout_yaxis2;
+    const titleObj = layout === null || layout === void 0 ? void 0 : layout.title;
+    var _titleObj_text;
+    const chartTitle = typeof titleObj === 'string' ? titleObj : (_titleObj_text = titleObj === null || titleObj === void 0 ? void 0 : titleObj.text) !== null && _titleObj_text !== void 0 ? _titleObj_text : '';
+    const titleFont = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.font : undefined;
+    const titleXAnchor = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.xanchor : undefined;
+    const titleYAnchor = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.yanchor : undefined;
+    const titlePad = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.pad : undefined;
+    const titleStyles = {
+        ...titleFont ? {
+            titleFont
+        } : {},
+        ...titleXAnchor ? {
+            titleXAnchor
+        } : {},
+        ...titleYAnchor ? {
+            titleYAnchor
+        } : {},
+        ...titlePad ? {
+            titlePad
+        } : {}
+    };
+    var _layout_xaxis_title_text, _layout_yaxis_title_text;
     const titles = {
-        chartTitle: typeof (layout === null || layout === void 0 ? void 0 : layout.title) === 'string' ? layout.title : (_layout_title_text = layout === null || layout === void 0 ? void 0 : (_layout_title = layout.title) === null || _layout_title === void 0 ? void 0 : _layout_title.text) !== null && _layout_title_text !== void 0 ? _layout_title_text : '',
+        chartTitle,
+        ...Object.keys(titleStyles).length > 0 ? {
+            titleStyles
+        } : {},
         xAxisTitle: typeof (layout === null || layout === void 0 ? void 0 : (_layout_xaxis = layout.xaxis) === null || _layout_xaxis === void 0 ? void 0 : _layout_xaxis.title) === 'string' ? layout === null || layout === void 0 ? void 0 : (_layout_xaxis1 = layout.xaxis) === null || _layout_xaxis1 === void 0 ? void 0 : _layout_xaxis1.title : (_layout_xaxis_title_text = layout === null || layout === void 0 ? void 0 : (_layout_xaxis2 = layout.xaxis) === null || _layout_xaxis2 === void 0 ? void 0 : (_layout_xaxis_title = _layout_xaxis2.title) === null || _layout_xaxis_title === void 0 ? void 0 : _layout_xaxis_title.text) !== null && _layout_xaxis_title_text !== void 0 ? _layout_xaxis_title_text : '',
-        yAxisTitle: typeof (layout === null || layout === void 0 ? void 0 : (_layout_yaxis = layout.yaxis) === null || _layout_yaxis === void 0 ? void 0 : _layout_yaxis.title) === 'string' ? layout === null || layout === void 0 ? void 0 : (_layout_yaxis1 = layout.yaxis) === null || _layout_yaxis1 === void 0 ? void 0 : _layout_yaxis1.title : (_layout_yaxis_title_text = layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis) === null || _layout_yaxis2 === void 0 ? void 0 : (_layout_yaxis_title = _layout_yaxis2.title) === null || _layout_yaxis_title === void 0 ? void 0 : _layout_yaxis_title.text) !== null && _layout_yaxis_title_text !== void 0 ? _layout_yaxis_title_text : ''
+        yAxisTitle: typeof (layout === null || layout === void 0 ? void 0 : (_layout_yaxis = layout.yaxis) === null || _layout_yaxis === void 0 ? void 0 : _layout_yaxis.title) === 'string' ? layout === null || layout === void 0 ? void 0 : (_layout_yaxis1 = layout.yaxis) === null || _layout_yaxis1 === void 0 ? void 0 : _layout_yaxis1.title : (_layout_yaxis_title_text = layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis) === null || _layout_yaxis2 === void 0 ? void 0 : (_layout_yaxis_title = _layout_yaxis2.title) === null || _layout_yaxis_title === void 0 ? void 0 : _layout_yaxis_title.text) !== null && _layout_yaxis_title_text !== void 0 ? _layout_yaxis_title_text : '',
+        xAxisAnnotation: chartTitle
     };
     return titles;
 }
@@ -217,6 +242,62 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
     }
     return x;
 };
+/**
+ * Formats text values according to the texttemplate specification
+ * Supports D3 format specifiers within %{text:format} patterns
+ * @param textValue The raw text value to format
+ * @param textTemplate The template string (e.g., "%{text:.1f}%", "%{text:.2%}", "%{text:,.0f}")
+ * @param index Optional index for array-based templates
+ * @returns Formatted text string
+ *
+ * Examples:
+ * - "%{text:.1f}%" → Formats number with 1 decimal place and adds % suffix
+ * - "%{text:.2%}" → Formats as percentage with 2 decimal places
+ * - "%{text:,.0f}" → Formats with thousands separator and no decimals
+ * - "%{text:$,.2f}" → Formats as currency with thousands separator and 2 decimals
+ */ const formatTextWithTemplate = (textValue, textTemplate, index)=>{
+    if (!textTemplate) {
+        return String(textValue);
+    }
+    const numVal = typeof textValue === 'number' ? textValue : parseFloat(String(textValue));
+    if (isNaN(numVal)) {
+        return String(textValue);
+    }
+    const template = typeof textTemplate === 'string' ? textTemplate : textTemplate[index || 0] || '';
+    // Match Plotly's texttemplate pattern: %{text:format} or %{text}
+    // Can be followed by any literal text like %, $, etc.
+    const plotlyPattern = /%\{text(?::([^}]+))?\}(.*)$/;
+    const match = template.match(plotlyPattern);
+    if (match) {
+        const formatSpec = match[1]; // The format specifier (e.g., ".1f", ".2%", ",.0f") or undefined
+        const suffix = match[2]; // Any text after the closing brace (e.g., "%", " units")
+        // If no format specifier is provided (e.g., %{text}%), try to infer from suffix
+        if (!formatSpec) {
+            // Check if suffix starts with % - assume simple percentage with 1 decimal
+            if (suffix.startsWith('%')) {
+                return `${numVal.toFixed(1)}${suffix}`;
+            }
+            // No format specifier, just return the number with the suffix
+            return `${numVal}${suffix}`;
+        }
+        try {
+            // Use D3 format function to apply the format specifier
+            const formatter = d3Format(formatSpec);
+            const formattedValue = formatter(numVal);
+            return `${formattedValue}${suffix}`;
+        } catch (error) {
+            // Try to extract precision for basic fallback
+            const precisionMatch = formatSpec.match(/\.(\d+)[f%]/);
+            const precision = precisionMatch ? parseInt(precisionMatch[1], 10) : 2;
+            // Check if it's a percentage format
+            if (formatSpec.includes('%')) {
+                return `${(numVal * 100).toFixed(precision)}%${suffix}`;
+            }
+            return `${numVal.toFixed(precision)}${suffix}`;
+        }
+    }
+    return String(textValue);
+};
 /**
  * Extracts unique X-axis categories from Plotly data traces
  * @param data Array of Plotly data traces
@@ -282,60 +363,55 @@ const toFiniteNumber = (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.
- */ const normalizeAxisRef = (ref, axis)=>{
+ * Parses Plotly axis references (e.g. `x`, `x2`, `xaxis2`, `paper`, `pixel`, `x domain`) into a ref type + axis id.
+ */ const parseAxisRef = (ref, axis)=>{
     if (!ref) {
-        return axis;
+        return {
+            refType: 'axis',
+            axisId: 1
+        };
     }
-    const normalized = ref.toLowerCase();
-    if (normalized === axis || normalized === `${axis}axis` || normalized === `${axis}axis1` || normalized === `${axis}1`) {
-        return axis;
+    const normalized = ref.toLowerCase().trim();
+    if (normalized === 'pixel') {
+        return {
+            refType: 'pixel',
+            axisId: 1
+        };
     }
-    const match = normalized.match(/^([xy])(axis)?(\d+)$/);
-    if (match && match[1] === axis && match[3]) {
-        return match[3] === '1' ? axis : `${axis}${match[3]}`;
+    if (normalized === 'paper') {
+        return {
+            refType: 'relative',
+            axisId: 1
+        };
     }
-    return normalized;
-};
-/**
- * Scans the data traces bound to a given axis and returns the numeric min/max values plotted on that axis.
- */ const getAxisNumericRangeFromData = (axis, ref, layout, data)=>{
-    if (!data || data.length === 0) {
-        return undefined;
+    if (normalized.endsWith(' domain')) {
+        return normalized.startsWith(axis) ? {
+            refType: 'relative',
+            axisId: 1
+        } : {
+            refType: undefined,
+            axisId: 1
+        };
     }
-    const axisLayout = getAxisLayoutByRef(layout, ref, axis);
-    const targetRef = normalizeAxisRef(ref, axis);
-    const traceAxisKey = axis === 'x' ? 'xaxis' : 'yaxis';
-    let minValue;
-    let maxValue;
-    data.forEach((trace)=>{
-        const plotTrace = trace;
-        const traceAxisRef = normalizeAxisRef(plotTrace[traceAxisKey], axis);
-        if (traceAxisRef !== targetRef) {
-            return;
-        }
-        const values = axis === 'x' ? plotTrace.x : plotTrace.y;
-        if (!isArrayOrTypedArray(values)) {
-            return;
-        }
-        const arrayLike = values;
-        for(let index = 0; index < arrayLike.length; index++){
-            const value = arrayLike[index];
-            const 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;
+    const match = normalized.match(/^([xy])(axis)?(\d*)$/);
+    if (!match || match[1] !== axis) {
+        return {
+            refType: undefined,
+            axisId: 1
+        };
     }
-    return [
-        minValue,
-        maxValue
-    ];
+    const suffix = match[3];
+    if (!suffix || suffix === '1') {
+        return {
+            refType: 'axis',
+            axisId: 1
+        };
+    }
+    const parsed = Number(suffix);
+    return {
+        refType: 'axis',
+        axisId: Number.isFinite(parsed) && parsed >= 1 ? parsed : 1
+    };
 };
 /**
  * Converts Plotly's bottom-origin relative Y coordinate into the SVG top-origin space used by our overlay.
@@ -390,21 +466,13 @@ const appendPx = (value)=>{
     if (!ref) {
         return 'axis';
     }
-    const normalized = ref.toLowerCase();
-    if (normalized === 'pixel') {
-        return 'pixel';
-    }
-    if (normalized === 'paper') {
-        return 'relative';
-    }
-    if (normalized.endsWith(' domain')) {
-        return normalized.startsWith(axis) ? 'relative' : undefined;
+    const parsed = parseAxisRef(ref, axis);
+    if (parsed.refType !== 'axis') {
+        return parsed.refType;
     }
+    const normalized = (ref !== null && ref !== void 0 ? ref : '').toLowerCase().trim();
     const match = normalized.match(/^([xy])(\d*)$/);
-    if (match && match[1] === axis) {
-        return 'axis';
-    }
-    return undefined;
+    return match && match[1] === axis ? 'axis' : undefined;
 };
 /**
  * Retrieves the appropriate axis layout section from Plotly's layout given an axis reference alias.
@@ -413,74 +481,37 @@ const appendPx = (value)=>{
         return undefined;
     }
     const defaultAxisKey = `${axis}axis`;
-    if (!ref) {
+    const { refType, axisId } = parseAxisRef(ref, axis);
+    if (refType !== 'axis' || axisId === 1) {
         return layout[defaultAxisKey];
     }
-    const normalized = ref.toLowerCase();
-    if (normalized === 'paper' || normalized === 'pixel' || normalized.endsWith(' domain')) {
-        return layout[defaultAxisKey];
-    }
-    const match = normalized.match(/^([xy])(\d*)$/);
-    if (match && match[1] === axis) {
-        const index = match[2];
-        if (index && index !== '' && index !== '1') {
-            const axisKey = `${axis}axis${index}`;
-            return layout[axisKey];
-        }
-        return layout[defaultAxisKey];
-    }
-    return layout[defaultAxisKey];
+    const axisKey = `${axis}axis${axisId}`;
+    return layout[axisKey];
 };
-/**
- * Normalizes raw Plotly data values into canonical number/date/string types based on axis configuration.
- */ const convertDataValue = (value, axisLayout)=>{
+const convertAnnotationDataValue = (value, axisType)=>{
     if (value === undefined || value === null) {
         return undefined;
     }
-    if ((axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) === 'date' || isDate(value)) {
+    if (axisType === 'date') {
         const 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') {
+    if (axisType === 'linear' || axisType === 'log') {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : undefined;
+        }
         const numeric = Number(value);
         return Number.isFinite(numeric) ? numeric : undefined;
     }
+    // For category-like axes, preserve raw strings (and avoid date parsing heuristics).
     if (value instanceof Date) {
         return value;
     }
-    return value;
-};
-const toNumericValue = (value)=>{
-    if (value instanceof Date) {
-        const timestamp = value.getTime();
-        return Number.isFinite(timestamp) ? timestamp : undefined;
-    }
-    if (typeof value === 'number') {
-        return Number.isFinite(value) ? value : undefined;
-    }
-    if (typeof value === 'string') {
-        const numeric = Number(value);
-        return Number.isFinite(numeric) ? numeric : undefined;
+    if (typeof value === 'number' || typeof value === 'string') {
+        return value;
     }
     return undefined;
 };
-const toRelativeCoordinate = (value, axisLayout, fallbackRange)=>{
-    const range = Array.isArray(axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.range) ? axisLayout.range : undefined;
-    let start = range && range.length >= 2 ? toNumericValue(convertDataValue(range[0], axisLayout)) : undefined;
-    let end = range && range.length >= 2 ? toNumericValue(convertDataValue(range[1], axisLayout)) : undefined;
-    if ((start === undefined || end === undefined || start === end) && fallbackRange) {
-        [start, end] = fallbackRange;
-    }
-    const current = toNumericValue(convertDataValue(value, axisLayout));
-    if (start === undefined || end === undefined || current === undefined || start === end) {
-        return undefined;
-    }
-    const relative = (current - start) / (end - start);
-    return Number.isFinite(relative) ? relative : undefined;
-};
 const createAnnotationId = (text, index)=>{
     const normalized = text.replace(/\s+/g, ' ').trim();
     if (normalized) {
@@ -544,10 +575,37 @@ const mapArrowDashToPattern = (value)=>{
             return value;
     }
 };
+const mapRefTypeToCoordinateType = (refType)=>{
+    return refType === 'axis' ? 'data' : refType;
+};
+const normalizeCoordinateValueForType = (coordinateType, value)=>{
+    if (coordinateType === 'data') {
+        return value;
+    }
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+};
+const getAnnotationCoordinateValue = (axis, refType, annotation, layout)=>{
+    if (refType === 'axis') {
+        const axisRef = axis === 'x' ? annotation === null || annotation === void 0 ? void 0 : annotation.xref : annotation === null || annotation === void 0 ? void 0 : annotation.yref;
+        const axisLayout = getAxisLayoutByRef(layout, axisRef, axis);
+        const rawValue = axis === 'x' ? annotation === null || annotation === void 0 ? void 0 : annotation.x : annotation === null || annotation === void 0 ? void 0 : annotation.y;
+        var _axisLayout_type;
+        const axisType = (_axisLayout_type = axisLayout === null || axisLayout === void 0 ? void 0 : axisLayout.type) !== null && _axisLayout_type !== void 0 ? _axisLayout_type : 'category';
+        return convertAnnotationDataValue(rawValue, axisType);
+    }
+    const numericValue = toFiniteNumber(axis === 'x' ? annotation === null || annotation === void 0 ? void 0 : annotation.x : annotation === null || annotation === void 0 ? void 0 : annotation.y);
+    if (numericValue === undefined) {
+        return undefined;
+    }
+    if (refType === 'relative') {
+        return axis === 'y' ? transformRelativeYForChart(numericValue) : numericValue;
+    }
+    return numericValue;
+};
 /**
  * Converts a Plotly annotation definition into the internal `ChartAnnotation` format, translating coordinates,
  * layout alignment, styling, and connector metadata while skipping unsupported configurations.
- */ const convertPlotlyAnnotation = (annotation, layout, data, index)=>{
+ */ const convertPlotlyAnnotation = (annotation, layout, index)=>{
     if (!annotation || annotation.visible === false) {
         return undefined;
     }
@@ -556,77 +614,51 @@ const mapArrowDashToPattern = (value)=>{
     if (!xRefType || !yRefType) {
         return undefined;
     }
+    const xValue = getAnnotationCoordinateValue('x', xRefType, annotation, layout);
+    const yValue = getAnnotationCoordinateValue('y', yRefType, annotation, layout);
+    if (xValue === undefined || yValue === undefined) {
+        return undefined;
+    }
+    const xCoordinateType = mapRefTypeToCoordinateType(xRefType);
+    const yCoordinateType = mapRefTypeToCoordinateType(yRefType);
+    const normalizedX = normalizeCoordinateValueForType(xCoordinateType, xValue);
+    const normalizedY = normalizeCoordinateValueForType(yCoordinateType, yValue);
+    if (normalizedX === undefined || normalizedY === undefined) {
+        return undefined;
+    }
+    const yRefNormalized = typeof annotation.yref === 'string' ? annotation.yref.toLowerCase() : undefined;
+    const yAxisProps = yCoordinateType === 'data' && yRefNormalized === 'y2' ? {
+        yAxis: 'secondary'
+    } : undefined;
     let coordinates;
-    if (xRefType === 'axis' && yRefType === 'axis') {
-        const xAxisLayout = getAxisLayoutByRef(layout, annotation.xref, 'x');
-        const yAxisLayout = getAxisLayoutByRef(layout, annotation.yref, 'y');
-        const xValue = convertDataValue(annotation.x, xAxisLayout);
-        const yValue = convertDataValue(annotation.y, yAxisLayout);
-        if (xValue === undefined || yValue === undefined) {
-            return undefined;
-        }
-        const yRefNormalized = typeof annotation.yref === 'string' ? annotation.yref.toLowerCase() : undefined;
+    if (xCoordinateType === 'data' && yCoordinateType === 'data') {
         coordinates = {
             type: 'data',
-            x: xValue,
-            y: yValue,
-            ...yRefNormalized === 'y2' ? {
-                yAxis: 'secondary'
-            } : {}
+            x: normalizedX,
+            y: normalizedY,
+            ...yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {}
         };
-    } else if (xRefType === 'relative' && yRefType === 'relative') {
-        const xValue = toFiniteNumber(annotation.x);
-        const yValue = toFiniteNumber(annotation.y);
-        const chartRelativeY = transformRelativeYForChart(yValue);
-        if (xValue === undefined || chartRelativeY === undefined) {
-            return undefined;
-        }
+    } else if (xCoordinateType === 'relative' && yCoordinateType === 'relative') {
         coordinates = {
             type: 'relative',
-            x: xValue,
-            y: chartRelativeY
+            x: normalizedX,
+            y: normalizedY
         };
-    } else if (xRefType === 'relative' && yRefType === 'axis') {
-        const xValue = toFiniteNumber(annotation.x);
-        const yAxisLayout = getAxisLayoutByRef(layout, annotation.yref, 'y');
-        const yFallbackRange = getAxisNumericRangeFromData('y', annotation.yref, layout, data);
-        const yRelative = toRelativeCoordinate(annotation.y, yAxisLayout, yFallbackRange);
-        const chartRelativeY = transformRelativeYForChart(yRelative);
-        if (xValue === undefined || chartRelativeY === undefined) {
-            return undefined;
-        }
-        coordinates = {
-            type: 'relative',
-            x: xValue,
-            y: chartRelativeY
-        };
-    } else if (xRefType === 'axis' && yRefType === 'relative') {
-        const yValue = toFiniteNumber(annotation.y);
-        const xAxisLayout = getAxisLayoutByRef(layout, annotation.xref, 'x');
-        const xFallbackRange = getAxisNumericRangeFromData('x', annotation.xref, layout, data);
-        const xRelative = toRelativeCoordinate(annotation.x, xAxisLayout, xFallbackRange);
-        const chartRelativeY = transformRelativeYForChart(yValue);
-        if (xRelative === undefined || chartRelativeY === undefined) {
-            return undefined;
-        }
-        coordinates = {
-            type: 'relative',
-            x: xRelative,
-            y: chartRelativeY
-        };
-    } else if (xRefType === 'pixel' && yRefType === 'pixel') {
-        const xValue = toFiniteNumber(annotation.x);
-        const yValue = toFiniteNumber(annotation.y);
-        if (xValue === undefined || yValue === undefined) {
-            return undefined;
-        }
+    } else if (xCoordinateType === 'pixel' && yCoordinateType === 'pixel') {
         coordinates = {
             type: 'pixel',
-            x: xValue,
-            y: yValue
+            x: normalizedX,
+            y: normalizedY
         };
     } else {
-        return undefined;
+        coordinates = {
+            type: 'mixed',
+            xCoordinateType,
+            yCoordinateType,
+            x: normalizedX,
+            y: normalizedY,
+            ...yAxisProps !== null && yAxisProps !== void 0 ? yAxisProps : {}
+        };
     }
     const textValue = annotation.text;
     const rawText = textValue === undefined || textValue === null ? '' : String(textValue);
@@ -783,14 +815,82 @@ const mapArrowDashToPattern = (value)=>{
     }
     return chartAnnotation;
 };
-const getChartAnnotationsFromLayout = (layout, data, isMultiPlot)=>{
+const getChartAnnotationsFromLayout = (data, layout, isMultiPlot)=>{
     if (isMultiPlot || !(layout === null || layout === void 0 ? void 0 : layout.annotations)) {
         return undefined;
     }
+    // Infer axis types when they are not explicitly set.
+    // This is needed so annotation coordinate parsing can correctly treat values as 'date' vs 'category'
+    // (for example, bar chart category axes with date-like strings).
+    const inferredLayout = (()=>{
+        if (!data || !isArrayOrTypedArray(data) || data.length === 0) {
+            return layout;
+        }
+        const valuesByAxisKey = new Map();
+        const axesExpectingCategories = new Set();
+        data.forEach((series)=>{
+            const trace = series;
+            const axisIds = getAxisIds(trace);
+            if (trace.type === 'bar') {
+                const categoryAxisLetter = trace.orientation === 'h' ? 'y' : 'x';
+                axesExpectingCategories.add(getAxisKey(categoryAxisLetter, axisIds[categoryAxisLetter]));
+            }
+            [
+                'x',
+                'y'
+            ].forEach((axLetter)=>{
+                const coords = trace[axLetter];
+                if (!coords || !isArrayOrTypedArray(coords)) {
+                    return;
+                }
+                const axisKey = getAxisKey(axLetter, axisIds[axLetter]);
+                var _valuesByAxisKey_get;
+                const existing = (_valuesByAxisKey_get = valuesByAxisKey.get(axisKey)) !== null && _valuesByAxisKey_get !== void 0 ? _valuesByAxisKey_get : [];
+                coords.forEach((val)=>{
+                    if (!isInvalidValue(val)) {
+                        existing.push(val);
+                    }
+                });
+                valuesByAxisKey.set(axisKey, existing);
+            });
+        });
+        let nextLayout;
+        valuesByAxisKey.forEach((values, axisKey)=>{
+            const currentAxis = layout === null || layout === void 0 ? void 0 : layout[axisKey];
+            const currentType = currentAxis === null || currentAxis === void 0 ? void 0 : currentAxis.type;
+            if ([
+                'linear',
+                'log',
+                'date',
+                'category'
+            ].includes(currentType !== null && currentType !== void 0 ? currentType : '')) {
+                return;
+            }
+            let inferredType;
+            if (axesExpectingCategories.has(axisKey) || isYearArray(values)) {
+                inferredType = 'category';
+            } else if (isDateArray(values)) {
+                inferredType = 'date';
+            }
+            if (!inferredType) {
+                return;
+            }
+            if (!nextLayout) {
+                nextLayout = {
+                    ...layout
+                };
+            }
+            nextLayout[axisKey] = {
+                ...currentAxis !== null && currentAxis !== void 0 ? currentAxis : {},
+                type: inferredType
+            };
+        });
+        return nextLayout !== null && nextLayout !== void 0 ? nextLayout : layout;
+    })();
     const annotationsArray = Array.isArray(layout.annotations) ? layout.annotations : [
         layout.annotations
     ];
-    const converted = annotationsArray.map((annotation, index)=>convertPlotlyAnnotation(annotation, layout, data, index)).filter((annotation)=>annotation !== undefined);
+    const converted = annotationsArray.map((annotation, index)=>convertPlotlyAnnotation(annotation, inferredLayout, index)).filter((annotation)=>annotation !== undefined);
     return converted.length > 0 ? converted : undefined;
 };
 /**
@@ -872,7 +972,7 @@ const getChartAnnotationsFromLayout = (layout, data, isMultiPlot)=>{
 export const transformPlotlyJsonToAnnotationChartProps = (input, isMultiPlot, _colorMap, _colorwayType, _isDarkTheme)=>{
     var _layoutWithMeta_meta, _input_layout, _input_layout1, _input_layout2, _input_layout3, _input_layout_font, _input_layout4, _input_layout_font1, _input_layout5, _input_layout6;
     var _getChartAnnotationsFromLayout;
-    const annotations = (_getChartAnnotationsFromLayout = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot)) !== null && _getChartAnnotationsFromLayout !== void 0 ? _getChartAnnotationsFromLayout : [];
+    const annotations = (_getChartAnnotationsFromLayout = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot)) !== null && _getChartAnnotationsFromLayout !== void 0 ? _getChartAnnotationsFromLayout : [];
     const titles = getTitles(input.layout);
     const layoutTitle = titles.chartTitle || undefined;
     const layoutWithMeta = input.layout;
@@ -947,12 +1047,13 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     const hideLabels = firstData.textinfo ? ![
         'value',
         'percent',
-        'label+percent'
+        'label+percent',
+        'percent+label'
     ].includes(firstData.textinfo) : false;
     const donutMarginHorizontal = hideLabels ? 0 : 80;
     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);
+    const { chartTitle, titleStyles } = getTitles(input.layout);
     // Build anticlockwise order by keeping the first item, reversing the rest
     const legends = Object.keys(mapLegendToDataPoint);
     const reorderedEntries = legends.length > 1 ? [
@@ -980,14 +1081,18 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
         hideLabels,
         showLabelsInPercent: firstData.textinfo ? [
             'percent',
-            'label+percent'
+            'label+percent',
+            'percent+label'
         ].includes(firstData.textinfo) : true,
         roundCorners: true,
-        order: 'sorted'
+        order: 'sorted',
+        ...titleStyles ? {
+            titleStyles
+        } : {}
     };
 };
 export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1, _input_layout2, _vsbcData_;
+    var _input_layout, _input_layout1, _input_layout2;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     let yMinValue = 0;
@@ -1007,6 +1112,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
+            const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : typeof series.text === 'string' ? series.text : undefined;
             rangeXValues.forEach((x, index2)=>{
                 var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
                 if (!mapXToDataPoints[x]) {
@@ -1022,6 +1128,11 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                 const opacity = getOpacity(series, index2);
                 const yVal = rangeYValues[index2];
                 const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
+                let barLabel = Array.isArray(textValues) ? textValues[index2] : textValues;
+                // Apply texttemplate formatting if specified
+                if (barLabel && series.texttemplate) {
+                    barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index2);
+                }
                 if (series.type === 'bar') {
                     var _rgb_copy_formatHex8;
                     mapXToDataPoints[x].chartData.push({
@@ -1030,7 +1141,10 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                         color: (_rgb_copy_formatHex8 = rgb(color).copy({
                             opacity
                         }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
-                        yAxisCalloutData
+                        yAxisCalloutData,
+                        ...barLabel ? {
+                            barLabel: String(barLabel)
+                        } : {}
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -1128,7 +1242,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         }
     });
     const vsbcData = Object.values(mapXToDataPoints);
-    const annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
+    const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
     var _input_layout_height;
     return {
         data: vsbcData,
@@ -1139,7 +1253,6 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         yMinValue,
         mode: 'plotly',
         ...secondaryYAxisValues,
-        wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
         hideTickOverlap: true,
         barGapMax: 2,
         hideLegend,
@@ -1217,6 +1330,12 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                     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];
+                    // Extract text value for barLabel
+                    let barLabel = Array.isArray(series.text) ? series.text[xIndex] : series.text;
+                    // Apply texttemplate formatting if specified
+                    if (barLabel && series.texttemplate) {
+                        barLabel = formatTextWithTemplate(barLabel, series.texttemplate, xIndex);
+                    }
                     var _rgb_copy_formatHex8;
                     return {
                         x: x.toString(),
@@ -1224,7 +1343,10 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                         yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
                         color: (_rgb_copy_formatHex8 = rgb(color).copy({
                             opacity
-                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                        ...barLabel ? {
+                            barLabel: String(barLabel)
+                        } : {}
                     };
                 }).filter((item)=>typeof item !== 'undefined'),
                 useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout)
@@ -1265,7 +1387,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
             });
         }
     });
-    const annotations = getChartAnnotationsFromLayout(processedInput.layout, processedInput.data, isMultiPlot);
+    const annotations = getChartAnnotationsFromLayout(processedInput.data, processedInput.layout, isMultiPlot);
     var _processedInput_layout_height;
     return {
         dataV2: gvbcDataV2,
@@ -1275,7 +1397,6 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        wrapXAxisLables: true,
         hideLegend,
         roundCorners: true,
         showYAxisLables: true,
@@ -1294,7 +1415,7 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_layout, _input_layout1, _vbcData_;
+    var _input_layout, _input_layout1;
     const vbcData = [];
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
@@ -1341,6 +1462,11 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             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));
+            // Handle text values and texttemplate formatting for histogram bins
+            let barLabel = Array.isArray(series.text) ? series.text[index] : series.text;
+            if (barLabel && series.texttemplate) {
+                barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index);
+            }
             var _rgb_copy_formatHex8;
             vbcData.push({
                 x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -1351,11 +1477,14 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                 ...isXString ? {} : {
                     xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
-                }
+                },
+                ...barLabel ? {
+                    barLabel: String(barLabel)
+                } : {}
             });
         });
     });
-    const annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
+    const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
     var _input_layout_height;
     return {
         data: vbcData,
@@ -1363,7 +1492,6 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
         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,
         mode: 'histogram',
         hideTickOverlap: true,
-        wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
         hideLegend,
         roundCorners: true,
@@ -1426,9 +1554,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    const xAxisType = getAxisType(input.data, getAxisObjects(input.data, input.layout).x);
-    const resolveXValue = getAxisValueResolver(xAxisType);
-    const shouldWrapLabels = xAxisType === 'category';
+    const resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
     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, _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;
@@ -1577,7 +1703,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             ...lineShape
         ]
     };
-    const annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
+    const annotations = getChartAnnotationsFromLayout(input.data, input.layout, isMultiPlot);
     var _input_layout_height;
     const commonProps = {
         supportNegativeData: true,
@@ -1587,7 +1713,6 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
-        wrapXAxisLabels: shouldWrapLabels,
         optimizeLargeData: numDataPoints > 1000,
         showYAxisLables: true,
         roundedTicks: true,
@@ -1636,7 +1761,7 @@ 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_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_x;
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_x, _series_text;
             if (isInvalidValue(yValue)) {
                 return null;
             }
@@ -1650,7 +1775,10 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
                 legend,
                 color: (_rgb_copy_formatHex8 = rgb(color).copy({
                     opacity
-                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                ...((_series_text = series.text) === null || _series_text === void 0 ? void 0 : _series_text[i]) ? {
+                    barLabel: series.text[i].toString()
+                } : {}
             };
         }).filter((point)=>point !== null);
     }).flat();
@@ -1706,14 +1834,14 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
             // 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;
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _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 base = +resolveGanttXValue(isArrayOrTypedArray(series.base) ? series.base[i] : series.base);
                 const xVal = +resolveGanttXValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]);
                 var _rgb_copy_formatHex8;
                 ganttData.push({
@@ -1768,11 +1896,53 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_layout, _input_layout_coloraxis, _input_layout1, _input_layout_template_layout, _input_layout_template, _input_layout2, _input_layout_template_data_histogram2d_, _input_layout_template_data_histogram2d, _input_layout_template_data, _input_layout_template1, _input_layout3, _input_layout_template_data_heatmap_, _input_layout_template_data_heatmap, _input_layout_template_data1, _input_layout_template2, _input_layout4, _input_layout5, _input_layout6;
+    var _input_layout, _input_layout1, _input_layout_coloraxis, _input_layout2, _input_layout_template_layout, _input_layout_template, _input_layout3, _input_layout_template_data_histogram2d_, _input_layout_template_data_histogram2d, _input_layout_template_data, _input_layout_template1, _input_layout4, _input_layout_template_data_heatmap_, _input_layout_template_data_heatmap, _input_layout_template_data1, _input_layout_template2, _input_layout5, _input_layout6, _input_layout7;
     const firstData = input.data[0];
     const heatmapDataPoints = [];
     let zMin = Number.POSITIVE_INFINITY;
     let zMax = Number.NEGATIVE_INFINITY;
+    // Build a 2D array of annotations based on their grid position
+    const annotationGrid = [];
+    const rawAnnotations = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.annotations;
+    if (rawAnnotations) {
+        const annotationsArray = Array.isArray(rawAnnotations) ? rawAnnotations : [
+            rawAnnotations
+        ];
+        // Collect all unique x and y values from valid annotations
+        const xSet = new Set();
+        const ySet = new Set();
+        const validAnnotations = [];
+        annotationsArray.forEach((a)=>{
+            if (a && typeof a.x === 'number' && typeof a.y === 'number' && typeof a.text === 'string' && (a.xref === 'x' || a.xref === undefined) && (a.yref === 'y' || a.yref === undefined)) {
+                xSet.add(a.x);
+                ySet.add(a.y);
+                validAnnotations.push({
+                    x: a.x,
+                    y: a.y,
+                    text: cleanText(a.text)
+                });
+            }
+        });
+        if (validAnnotations.length > 0) {
+            // Get sorted unique x and y values
+            const xValues = Array.from(xSet).sort((a, b)=>a - b);
+            const yValues = Array.from(ySet).sort((a, b)=>a - b);
+            // Initialize 2D grid and populate
+            validAnnotations.forEach((annotation)=>{
+                const xIdx = xValues.indexOf(annotation.x);
+                const yIdx = yValues.indexOf(annotation.y);
+                if (!annotationGrid[yIdx]) {
+                    annotationGrid[yIdx] = [];
+                }
+                annotationGrid[yIdx][xIdx] = annotation.text;
+            });
+        }
+    }
+    // Helper function to get annotation from 2D grid by index
+    const getAnnotationByIndex = (xIdx, yIdx)=>{
+        var _annotationGrid_yIdx;
+        return (_annotationGrid_yIdx = annotationGrid[yIdx]) === null || _annotationGrid_yIdx === void 0 ? void 0 : _annotationGrid_yIdx[xIdx];
+    };
     if (firstData.type === 'histogram2d') {
         var _firstData_x, _firstData_xbins, _firstData_xbins1, _firstData_xbins2, _firstData_ybins, _firstData_ybins1, _firstData_ybins2;
         const xValues = [];
@@ -1812,11 +1982,12 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         xBins.forEach((xBin, xIdx)=>{
             yBins.forEach((yBin, yIdx)=>{
                 const zVal = calculateHistNorm(firstData.histnorm, z[yIdx][xIdx], total, isXString ? xBin.length : getBinSize(xBin), isYString ? yBin.length : getBinSize(yBin));
+                const annotationText = getAnnotationByIndex(xIdx, yIdx);
                 heatmapDataPoints.push({
                     x: isXString ? xBin.join(', ') : getBinCenter(xBin),
                     y: isYString ? yBin.join(', ') : getBinCenter(yBin),
                     value: zVal,
-                    rectText: zVal
+                    rectText: annotationText || zVal
                 });
                 if (typeof zVal === 'number') {
                     zMin = Math.min(zMin, zVal);
@@ -1825,18 +1996,34 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
             });
         });
     } else {
-        var _firstData_x1;
-        (_firstData_x1 = firstData.x) === null || _firstData_x1 === void 0 ? void 0 : _firstData_x1.forEach((xVal, xIdx)=>{
-            var // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            _firstData_y;
-            (_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y.forEach((yVal, yIdx)=>{
-                var _firstData_z_yIdx, _firstData_z, _input_layout_xaxis, _input_layout, _input_layout_yaxis, _input_layout1;
-                const zVal = (_firstData_z = firstData.z) === null || _firstData_z === void 0 ? void 0 : (_firstData_z_yIdx = _firstData_z[yIdx]) === null || _firstData_z_yIdx === void 0 ? void 0 : _firstData_z_yIdx[xIdx];
+        var _zArray_;
+        // If x and y are not provided, generate indices based on z dimensions
+        const zArray = firstData.z;
+        const xValues = firstData.x;
+        const yValues = firstData.y;
+        var _zArray_length;
+        // Determine the dimensions from z array
+        const yLength = (_zArray_length = zArray === null || zArray === void 0 ? void 0 : zArray.length) !== null && _zArray_length !== void 0 ? _zArray_length : 0;
+        var _zArray__length;
+        const xLength = (_zArray__length = zArray === null || zArray === void 0 ? void 0 : (_zArray_ = zArray[0]) === null || _zArray_ === void 0 ? void 0 : _zArray_.length) !== null && _zArray__length !== void 0 ? _zArray__length : 0;
+        // Use provided x/y values or generate indices
+        const xData = xValues !== null && xValues !== void 0 ? xValues : Array.from({
+            length: xLength
+        }, (_, i)=>i);
+        const yData = yValues !== null && yValues !== void 0 ? yValues : Array.from({
+            length: yLength
+        }, (_, i)=>yLength - 1 - i);
+        xData.forEach((xVal, xIdx)=>{
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            yData.forEach((yVal, yIdx)=>{
+                var _zArray_yIdx, _input_layout_xaxis, _input_layout, _input_layout_yaxis, _input_layout1;
+                const zVal = zArray === null || zArray === void 0 ? void 0 : (_zArray_yIdx = zArray[yIdx]) === null || _zArray_yIdx === void 0 ? void 0 : _zArray_yIdx[xIdx];
+                const annotationText = getAnnotationByIndex(xIdx, yIdx);
                 heatmapDataPoints.push({
                     x: ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_xaxis = _input_layout.xaxis) === null || _input_layout_xaxis === void 0 ? void 0 : _input_layout_xaxis.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
                     y: ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_yaxis = _input_layout1.yaxis) === null || _input_layout_yaxis === void 0 ? void 0 : _input_layout_yaxis.type) === 'date' ? yVal : yVal,
                     value: zVal,
-                    rectText: zVal
+                    rectText: annotationText || zVal
                 });
                 if (typeof zVal === 'number') {
                     zMin = Math.min(zMin, zVal);
@@ -1863,7 +2050,7 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         getColorFromToken(DataVizPalette.color3)
     ];
     var _firstData_colorscale, _ref, _ref1, _ref2, _ref3;
-    let colorscale = (_ref3 = (_ref2 = (_ref1 = (_ref = (_firstData_colorscale = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _firstData_colorscale !== void 0 ? _firstData_colorscale : (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.colorscale) !== null && _ref !== void 0 ? _ref : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout1.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : _input_layout_coloraxis.colorscale) !== null && _ref1 !== void 0 ? _ref1 : (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template = _input_layout2.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.colorscale) !== null && _ref2 !== void 0 ? _ref2 : firstData.type === 'histogram2d' && ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_template1 = _input_layout3.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_data = _input_layout_template1.data) === null || _input_layout_template_data === void 0 ? void 0 : (_input_layout_template_data_histogram2d = _input_layout_template_data.histogram2d) === null || _input_layout_template_data_histogram2d === void 0 ? void 0 : (_input_layout_template_data_histogram2d_ = _input_layout_template_data_histogram2d[0]) === null || _input_layout_template_data_histogram2d_ === void 0 ? void 0 : _input_layout_template_data_histogram2d_.colorscale)) !== null && _ref3 !== void 0 ? _ref3 : (_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_data1 = _input_layout_template2.data) === null || _input_layout_template_data1 === void 0 ? void 0 : (_input_layout_template_data_heatmap = _input_layout_template_data1.heatmap) === null || _input_layout_template_data_heatmap === void 0 ? void 0 : (_input_layout_template_data_heatmap_ = _input_layout_template_data_heatmap[0]) === null || _input_layout_template_data_heatmap_ === void 0 ? void 0 : _input_layout_template_data_heatmap_.colorscale;
+    let colorscale = (_ref3 = (_ref2 = (_ref1 = (_ref = (_firstData_colorscale = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _firstData_colorscale !== void 0 ? _firstData_colorscale : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.colorscale) !== null && _ref !== void 0 ? _ref : (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout2.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : _input_layout_coloraxis.colorscale) !== null && _ref1 !== void 0 ? _ref1 : (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_template = _input_layout3.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.colorscale) !== null && _ref2 !== void 0 ? _ref2 : firstData.type === 'histogram2d' && ((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template1 = _input_layout4.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_data = _input_layout_template1.data) === null || _input_layout_template_data === void 0 ? void 0 : (_input_layout_template_data_histogram2d = _input_layout_template_data.histogram2d) === null || _input_layout_template_data_histogram2d === void 0 ? void 0 : (_input_layout_template_data_histogram2d_ = _input_layout_template_data_histogram2d[0]) === null || _input_layout_template_data_histogram2d_ === void 0 ? void 0 : _input_layout_template_data_histogram2d_.colorscale)) !== null && _ref3 !== void 0 ? _ref3 : (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template2 = _input_layout5.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_data1 = _input_layout_template2.data) === null || _input_layout_template_data1 === void 0 ? void 0 : (_input_layout_template_data_heatmap = _input_layout_template_data1.heatmap) === null || _input_layout_template_data_heatmap === void 0 ? void 0 : (_input_layout_template_data_heatmap_ = _input_layout_template_data_heatmap[0]) === null || _input_layout_template_data_heatmap_ === void 0 ? void 0 : _input_layout_template_data_heatmap_.colorscale;
     // determine if the types diverging, sequential or sequentialminus are present in colorscale
     if (colorscale && typeof colorscale === 'object' && ('diverging' in colorscale || 'sequential' in colorscale || 'sequentialminus' in colorscale)) {
         const isDivergent = zMin < 0 && zMax > 0; // Data spans both positive and negative values
@@ -1889,12 +2076,11 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         hideLegend: true,
         showYAxisLables: true,
         sortOrder: 'none',
-        width: (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.width,
-        height: (_input_layout_height = (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
+        height: (_input_layout_height = (_input_layout7 = input.layout) === null || _input_layout7 === void 0 ? void 0 : _input_layout7.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        wrapXAxisLables: true,
         ...getTitles(input.layout),
         ...getAxisCategoryOrderProps([
             firstData
@@ -1903,7 +2089,7 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
     };
 };
 export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _node_label, _input_layout2, _input_layout3;
+    var _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _node_label, _input_layout2, _input_layout3, _input_layout4;
     const { link, node } = input.data[0];
     var _link_value;
     const validLinks = ((_link_value = link === null || link === void 0 ? void 0 : link.value) !== null && _link_value !== void 0 ? _link_value : []).map((val, index)=>{
@@ -1945,7 +2131,7 @@ export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, c
     //     ...(input.layout?.font?.size ? { fontSize: input.layout.font?.size } : {}),
     //   },
     // };
-    const { chartTitle } = getTitles(input.layout);
+    const { chartTitle, titleStyles } = getTitles(input.layout);
     var _input_layout_height;
     return {
         data: {
@@ -1953,7 +2139,13 @@ export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, c
             SankeyChartData: sankeyChartData
         },
         width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
-        height: (_input_layout_height = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468
+        height: (_input_layout_height = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468,
+        // TODO
+        // styles,
+        hideLegend: isMultiPlot || ((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : _input_layout4.showlegend) === false,
+        ...titleStyles ? {
+            titleStyles
+        } : {}
     };
 };
 export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -2004,7 +2196,7 @@ export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, co
     const styles = {
         sublabel: sublabelColor
     };
-    const { chartTitle } = getTitles(input.layout);
+    const { chartTitle, titleStyles } = getTitles(input.layout);
     var _firstData_value2, _input_layout_height;
     return {
         segments,
@@ -2025,7 +2217,10 @@ export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, co
         // styles,
         variant: ((_firstData_gauge9 = firstData.gauge) === null || _firstData_gauge9 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge9.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment',
         styles,
-        roundCorners: true
+        roundCorners: true,
+        ...titleStyles ? {
+            titleStyles
+        } : {}
     };
 };
 const cleanText = (text)=>{
@@ -2168,13 +2363,18 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
         },
         values: (_ref = (_tableHeader_values = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.values) !== null && _tableHeader_values !== void 0 ? _tableHeader_values : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.values) !== null && _ref !== void 0 ? _ref : []
     };
+    const { chartTitle, titleStyles } = getTitles(input.layout);
     var _tableData_header_values;
     return {
         headers: normalizeHeaders((_tableData_header_values = (_tableData_header = tableData.header) === null || _tableData_header === void 0 ? void 0 : _tableData_header.values) !== null && _tableData_header_values !== void 0 ? _tableData_header_values : [], header),
         rows,
         width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
         height: (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : _input_layout4.height,
-        styles
+        styles,
+        chartTitle,
+        ...titleStyles ? {
+            titleStyles
+        } : {}
     };
 };
 function getCategoriesAndValues(series) {
@@ -2318,151 +2518,90 @@ export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorM
             });
         });
     }
+    const { chartTitle, titleStyles } = getTitles(input.layout);
     return {
         data: funnelData,
+        chartTitle,
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height,
         orientation: ((_input_data_ = input.data[0]) === null || _input_data_ === void 0 ? void 0 : _input_data_.orientation) === 'v' ? 'horizontal' : 'vertical',
-        hideLegend: isMultiPlot || ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false
+        hideLegend: isMultiPlot || ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false,
+        ...titleStyles ? {
+            titleStyles
+        } : {}
     };
 };
-export const projectPolarToCartesian = (input)=>{
+export const transformPlotlyJsonToPolarChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout1;
-    const projection = {
-        ...input
-    };
-    // Find the global min and max radius across all series
-    let minRadius = 0;
-    let maxRadius = 0;
-    for(let sindex = 0; sindex < input.data.length; sindex++){
-        const rVals = input.data[sindex].r;
-        if (rVals && isArrayOrTypedArray(rVals)) {
-            for(let ptindex = 0; ptindex < rVals.length; ptindex++){
-                if (!isInvalidValue(rVals[ptindex])) {
-                    minRadius = Math.min(minRadius, rVals[ptindex]);
-                    maxRadius = Math.max(maxRadius, rVals[ptindex]);
-                }
-            }
-        }
-    }
-    // If there are negative radii, compute the shift
-    const radiusShift = minRadius < 0 ? -minRadius : 0;
-    // Collect all unique theta values from all scatterpolar series for equal spacing
-    const allThetaValues = new Set();
-    for(let sindex = 0; sindex < input.data.length; sindex++){
-        const series = input.data[sindex];
-        if (series.theta && isArrayOrTypedArray(series.theta)) {
-            series.theta.forEach((theta)=>allThetaValues.add(String(theta)));
-        }
-    }
-    // Project all points and create a perfect square domain
-    const allX = [];
-    const allY = [];
-    let originX = null;
-    for(let sindex = 0; sindex < input.data.length; sindex++){
-        var _input_layout_polar_angularaxis, _input_layout_polar, _input_layout2, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout3;
-        const series = input.data[sindex];
-        // If scatterpolar, set __axisLabel to all unique theta values for equal spacing
-        if (isArrayOrTypedArray(series.theta)) {
-            series.__axisLabel = Array.from(allThetaValues);
-        }
-        series.x = [];
-        series.y = [];
-        const thetas = series.theta;
-        const rVals = series.r;
-        // Skip if rVals or thetas are not arrays
-        if (!isArrayOrTypedArray(rVals) || !isArrayOrTypedArray(thetas)) {
-            projection.data[sindex] = series;
-            continue;
-        }
-        // retrieve polar axis settings
-        const dirMultiplier = ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar = _input_layout2.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) === 'clockwise' ? -1 : 1;
-        var _input_layout_polar_angularaxis_rotation;
-        const startAngleInRad = ((_input_layout_polar_angularaxis_rotation = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout3.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) !== null && _input_layout_polar_angularaxis_rotation !== void 0 ? _input_layout_polar_angularaxis_rotation : 0) * Math.PI / 180;
-        // Compute tick positions if categorical
-        let uniqueTheta = [];
-        let categorical = false;
-        if (!isNumberArray(thetas)) {
-            uniqueTheta = Array.from(new Set(thetas));
-            categorical = true;
-        }
-        for(let ptindex = 0; ptindex < rVals.length; ptindex++){
-            if (isInvalidValue(thetas === null || thetas === void 0 ? void 0 : thetas[ptindex]) || isInvalidValue(rVals === null || rVals === void 0 ? void 0 : rVals[ptindex])) {
-                continue;
-            }
-            // Map theta to angle in radians
-            let thetaRad;
-            if (categorical) {
-                const idx = uniqueTheta.indexOf(thetas[ptindex]);
-                const step = 2 * Math.PI / uniqueTheta.length;
-                thetaRad = startAngleInRad + dirMultiplier * idx * step;
+    const polarData = [];
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    const resolveRValue = getAxisValueResolver(getPolarAxis(input.data, 'r', input.layout)._type);
+    input.data.forEach((series, index)=>{
+        const legend = legends[index];
+        if (series.type === 'scatterpolar') {
+            var _series_line, _series_marker, _input_layout_template_layout, _input_layout_template, _input_layout, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_r;
+            const isAreaTrace = series.fill === 'toself' || series.fill === 'tonext';
+            const isLineTrace = typeof series.mode === 'undefined' ? true : series.mode.includes('lines');
+            const colors = isAreaTrace ? series.fillcolor : isLineTrace ? (_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;
+            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 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);
+            const finalSeriesColor = rgb(seriesColor).copy({
+                opacity: seriesOpacity
+            }).formatHex8();
+            const lineOptions = getLineOptions(series.line);
+            const thetaUnit = series.thetaunit;
+            const commonProps = {
+                legend,
+                legendShape: getLegendShape(series),
+                color: finalSeriesColor,
+                data: ((_series_r = series.r) === null || _series_r === void 0 ? void 0 : _series_r.map((r, rIndex)=>{
+                    var _series_theta, _series_marker, _series_marker1, _input_layout_template_layout, _input_layout_template, _input_layout;
+                    const theta = (_series_theta = series.theta) === null || _series_theta === void 0 ? void 0 : _series_theta[rIndex];
+                    const markerSize = Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? series.marker.size[rIndex] : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size;
+                    const text = Array.isArray(series.text) ? series.text[rIndex] : series.text;
+                    const markerColor = resolveColor(extractedColors, rIndex, 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 markerOpacity = getOpacity(series, rIndex);
+                    if (isInvalidValue(resolveRValue(r)) || isInvalidValue(theta)) {
+                        return;
+                    }
+                    return {
+                        r: resolveRValue(r),
+                        theta: typeof theta === 'number' ? thetaUnit === 'radians' ? theta * 180 / Math.PI : thetaUnit === 'gradians' ? theta * 0.9 : theta : theta,
+                        color: markerColor ? rgb(markerColor).copy({
+                            opacity: markerOpacity
+                        }).formatHex8() : finalSeriesColor,
+                        ...typeof markerSize !== 'undefined' ? {
+                            markerSize
+                        } : {},
+                        ...typeof text !== 'undefined' ? {
+                            text
+                        } : {}
+                    };
+                }).filter((item)=>typeof item !== 'undefined')) || []
+            };
+            if (isAreaTrace || isLineTrace) {
+                polarData.push({
+                    type: isAreaTrace ? 'areapolar' : 'linepolar',
+                    ...commonProps,
+                    lineOptions
+                });
             } else {
-                thetaRad = startAngleInRad + dirMultiplier * (thetas[ptindex] * Math.PI / 180);
-            }
-            // Shift only the polar origin (not the cartesian)
-            const rawRadius = rVals[ptindex];
-            const polarRadius = rawRadius + radiusShift; // Only for projection
-            // Calculate cartesian coordinates (with shifted polar origin)
-            const x = polarRadius * Math.cos(thetaRad);
-            const y = polarRadius * Math.sin(thetaRad);
-            // Calculate the cartesian coordinates of the original polar origin (0,0)
-            // This is the point that should be mapped to (0,0) in cartesian coordinates
-            if (sindex === 0 && ptindex === 0) {
-                // For polar origin (r=0, θ=0), cartesian coordinates are (0,0)
-                // But since we shifted the radius by radiusShift, the cartesian origin is at (radiusShift, 0)
-                originX = radiusShift;
-            }
-            series.x.push(x);
-            series.y.push(y);
-            allX.push(x);
-            allY.push(y);
-        }
-        // Map text to each data point for downstream chart rendering
-        if (series.x && series.y) {
-            series.data = series.x.map((xVal, idx)=>({
-                    x: xVal,
-                    y: series.y[idx],
-                    ...series.text ? {
-                        text: series.text[idx]
-                    } : {}
-                }));
-        }
-        projection.data[sindex] = series;
-    }
-    // 7. Recenter all cartesian coordinates
-    if (originX !== null) {
-        for(let sindex = 0; sindex < projection.data.length; sindex++){
-            const series = projection.data[sindex];
-            if (series.x && series.y) {
-                series.x = series.x.map((v)=>v - originX);
+                polarData.push({
+                    type: 'scatterpolar',
+                    ...commonProps
+                });
             }
         }
-        // Also recenter allX for normalization
-        for(let i = 0; i < allX.length; i++){
-            allX[i] = allX[i] - originX;
-        }
-    }
-    // 8. Find the maximum absolute value among all x and y
-    let maxAbs = Math.max(...allX.map(Math.abs), ...allY.map(Math.abs));
-    maxAbs = maxAbs === 0 ? 1 : maxAbs;
-    // 9. Rescale all points so that the largest |x| or |y| is 0.5
-    for(let sindex = 0; sindex < projection.data.length; sindex++){
-        const series = projection.data[sindex];
-        if (series.x && series.y) {
-            series.x = series.x.map((v)=>v / (2 * maxAbs));
-            series.y = series.y.map((v)=>v / (2 * maxAbs));
-        }
-    }
-    // 10. Customize layout for perfect square with absolute positioning
-    const size = ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width) || ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) || 500;
-    projection.layout = {
-        ...projection.layout,
-        width: size,
-        height: size
+    });
+    var _input_layout_height;
+    return {
+        data: polarData,
+        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 : 400,
+        hideLegend,
+        ...getPolarAxisProps(input.data, input.layout)
     };
-    // Attach originX as custom properties
-    projection.layout.__polarOriginX = originX !== null && originX !== void 0 ? originX : undefined;
-    return projection;
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isPlainObject(obj) {
@@ -2744,7 +2883,10 @@ export const isNonPlotType = (chartType)=>{
         'donut',
         'sankey',
         'pie',
-        'annotation'
+        'annotation',
+        'table',
+        'gauge',
+        'funnel'
     ].includes(chartType);
 };
 export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
@@ -2777,7 +2919,8 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
                 const xAxisLayout = layout[key];
                 const domainXInfo = {
                     start: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[0] : 0,
-                    end: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[1] : 1
+                    end: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[1] : 1,
+                    cellName: `x${domainX.length === 0 ? '' : domainX.length + 1}`
                 };
                 domainX.push(domainXInfo);
             } else if (key.startsWith('yaxis')) {
@@ -2800,7 +2943,8 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
                 const yAxisLayout = layout[key];
                 const domainYInfo = {
                     start: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[0] : 0,
-                    end: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[1] : 1
+                    end: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[1] : 1,
+                    cellName: `x${domainY.length === 0 ? '' : domainY.length + 1}`
                 };
                 domainY.push(domainYInfo);
             }
@@ -2813,11 +2957,13 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
             const series = schema === null || schema === void 0 ? void 0 : (_schema_data = schema.data) === null || _schema_data === void 0 ? void 0 : _schema_data[index];
             const domainXInfo = {
                 start: ((_series_domain = series.domain) === null || _series_domain === void 0 ? void 0 : _series_domain.x) ? series.domain.x[0] : 0,
-                end: ((_series_domain1 = series.domain) === null || _series_domain1 === void 0 ? void 0 : _series_domain1.x) ? series.domain.x[1] : 1
+                end: ((_series_domain1 = series.domain) === null || _series_domain1 === void 0 ? void 0 : _series_domain1.x) ? series.domain.x[1] : 1,
+                cellName: `${NON_PLOT_KEY_PREFIX}${domainX.length - cartesianDomains + 1}`
             };
             const domainYInfo = {
                 start: ((_series_domain2 = series.domain) === null || _series_domain2 === void 0 ? void 0 : _series_domain2.y) ? series.domain.y[0] : 0,
-                end: ((_series_domain3 = series.domain) === null || _series_domain3 === void 0 ? void 0 : _series_domain3.y) ? series.domain.y[1] : 1
+                end: ((_series_domain3 = series.domain) === null || _series_domain3 === void 0 ? void 0 : _series_domain3.y) ? series.domain.y[1] : 1,
+                cellName: `${NON_PLOT_KEY_PREFIX}${domainY.length - cartesianDomains + 1}`
             };
             domainX.push(domainXInfo);
             domainY.push(domainYInfo);
@@ -2825,6 +2971,24 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
     });
     if (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
         var _layout_annotations;
+        Object.keys(layout !== null && layout !== void 0 ? layout : {}).forEach((key)=>{
+            if (key.startsWith('polar')) {
+                var _polarLayout_domain, _polarLayout_domain1, _polarLayout_domain2, _polarLayout_domain3;
+                const polarLayout = layout[key];
+                const domainXInfo = {
+                    start: ((_polarLayout_domain = polarLayout.domain) === null || _polarLayout_domain === void 0 ? void 0 : _polarLayout_domain.x) ? polarLayout.domain.x[0] : 0,
+                    end: ((_polarLayout_domain1 = polarLayout.domain) === null || _polarLayout_domain1 === void 0 ? void 0 : _polarLayout_domain1.x) ? polarLayout.domain.x[1] : 1,
+                    cellName: key
+                };
+                const domainYInfo = {
+                    start: ((_polarLayout_domain2 = polarLayout.domain) === null || _polarLayout_domain2 === void 0 ? void 0 : _polarLayout_domain2.y) ? polarLayout.domain.y[0] : 0,
+                    end: ((_polarLayout_domain3 = polarLayout.domain) === null || _polarLayout_domain3 === void 0 ? void 0 : _polarLayout_domain3.y) ? polarLayout.domain.y[1] : 1,
+                    cellName: key
+                };
+                domainX.push(domainXInfo);
+                domainY.push(domainYInfo);
+            }
+        });
         (_layout_annotations = layout.annotations) === null || _layout_annotations === void 0 ? void 0 : _layout_annotations.forEach((annotation)=>{
             const xMatches = domainX.flatMap((interval, idx)=>(annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval.start && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval.end ? [
                     idx
@@ -2853,7 +3017,6 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         const sortedXStart = Array.from(uniqueXIntervals.values()).map((interval)=>interval.start).sort();
         templateColumns = `repeat(${sortedXStart.length}, 1fr)`;
         domainX.forEach((interval, index)=>{
-            const cellName = index >= cartesianDomains ? `${NON_PLOT_KEY_PREFIX}${index - cartesianDomains + 1}` : `x${index === 0 ? '' : index + 1}`;
             const columnIndex = sortedXStart.findIndex((start)=>start === interval.start);
             const columnNumber = columnIndex + 1; // Column numbers are 1-based
             const annotationProps = annotations[index];
@@ -2868,7 +3031,7 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
                     end: 1
                 }
             };
-            gridLayout[cellName] = row;
+            gridLayout[interval.cellName] = row;
         });
     }
     if (domainY.length > 0) {
@@ -2883,12 +3046,11 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         const numberOfRows = sortedYStart.length;
         templateRows = `repeat(${numberOfRows}, 1fr)`;
         domainY.forEach((interval, index)=>{
-            const cellName = index >= cartesianDomains ? `${NON_PLOT_KEY_PREFIX}${index - cartesianDomains + 1}` : `x${index === 0 ? '' : index + 1}`;
             const rowIndex = sortedYStart.findIndex((start)=>start === interval.start);
             const rowNumber = numberOfRows - rowIndex; // Rows are 1-based and we need to reverse the order for CSS grid
             const annotationProps = annotations[index];
             const yAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.yAnnotation;
-            const cell = gridLayout[cellName];
+            const cell = gridLayout[interval.cellName];
             if (cell !== undefined) {
                 cell.row = rowNumber;
                 cell.yAnnotation = yAnnotation;
@@ -2930,7 +3092,7 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
         }
         const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
         if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
-            result[propName] = ax.categoryarray;
+            result[propName] = (ax === null || ax === void 0 ? void 0 : ax.autorange) === 'reversed' ? ax.categoryarray.slice().reverse() : ax.categoryarray;
             return;
         }
         if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
@@ -3007,16 +3169,23 @@ const getAxisScaleTypeProps = (data, layout)=>{
             return;
         }
         const axType = getAxisType(data, ax);
+        if (axId === 'x' && axType === 'category') {
+            props.xAxis = {
+                tickLayout: 'auto'
+            };
+        }
         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 = {
+                    ...props.xAxis,
                     tickText: ax.ticktext
                 };
             } else if (axId === 'y') {
                 props.yAxisTickValues = tickValues;
                 props.yAxis = {
+                    ...props.yAxis,
                     tickText: ax.ticktext
                 };
             }
@@ -3027,11 +3196,13 @@ const getAxisScaleTypeProps = (data, layout)=>{
             const tick0 = plotlyTick0(ax.tick0, axType, dtick);
             if (axId === 'x') {
                 props.xAxis = {
+                    ...props.xAxis,
                     tickStep: dtick,
                     tick0
                 };
             } else if (axId === 'y') {
                 props.yAxis = {
+                    ...props.yAxis,
                     tickStep: dtick,
                     tick0
                 };
@@ -3212,3 +3383,109 @@ const getAxisValueResolver = (axType, dateParser)=>{
     }
     return new Date(value);
 };
+const POLAR_AXIS_BY_DATA_KEY = {
+    r: 'radialAxis',
+    theta: 'angularAxis'
+};
+export const DEFAULT_POLAR_SUBPLOT = 'polar';
+const getPolarLayout = (trace, layout)=>{
+    const subplotId = (trace === null || trace === void 0 ? void 0 : trace.subplot) || DEFAULT_POLAR_SUBPLOT;
+    return layout === null || layout === void 0 ? void 0 : layout[subplotId];
+};
+const getValidAxisValues = (data, dataKey)=>{
+    const values = [];
+    data.forEach((series)=>{
+        if (isArrayOrTypedArray(series[dataKey])) {
+            series[dataKey].forEach((val)=>{
+                if (!isInvalidValue(val)) {
+                    values.push(val);
+                }
+            });
+        }
+    });
+    return values;
+};
+const getPolarAxisType = (data, dataKey, declaredType)=>{
+    if ([
+        'linear',
+        'log',
+        'date',
+        'category'
+    ].includes(declaredType !== null && declaredType !== void 0 ? declaredType : '')) {
+        return declaredType;
+    }
+    const values = getValidAxisValues(data, dataKey);
+    if (isNumberArray(values) && !isYearArray(values)) {
+        return 'linear';
+    }
+    if (isDateArray(values)) {
+        return 'date';
+    }
+    return 'category';
+};
+const getPolarAxis = (data, dataKey, layout)=>{
+    const polarLayout = getPolarLayout(data[0], layout);
+    const ax = polarLayout === null || polarLayout === void 0 ? void 0 : polarLayout[POLAR_AXIS_BY_DATA_KEY[dataKey].toLowerCase()];
+    return {
+        ...ax,
+        _dataKey: dataKey,
+        _type: getPolarAxisType(data, dataKey, ax === null || ax === void 0 ? void 0 : ax.type)
+    };
+};
+const getPolarAxisTickProps = (data, ax)=>{
+    const props = {};
+    if ((!ax.tickmode || ax.tickmode === 'array') && isArrayOrTypedArray(ax.tickvals)) {
+        const tickValues = ax._type === 'date' ? ax.tickvals.map((v)=>new Date(v)) : ax.tickvals;
+        props.tickValues = tickValues;
+        props.tickText = ax.ticktext;
+        return props;
+    }
+    if ((!ax.tickmode || ax.tickmode === 'linear') && ax.dtick) {
+        const dtick = plotlyDtick(ax.dtick, ax._type);
+        const tick0 = plotlyTick0(ax.tick0, ax._type, dtick);
+        props.tickStep = dtick;
+        props.tick0 = tick0;
+        return props;
+    }
+    if ((!ax.tickmode || ax.tickmode === 'auto') && typeof ax.nticks === 'number' && ax.nticks >= 0) {
+        props.tickCount = ax.nticks;
+    }
+    return props;
+};
+const getPolarAxisCategoryOrder = (data, ax)=>{
+    if (ax._type !== 'category') {
+        return 'data';
+    }
+    const isValidArray = isArrayOrTypedArray(ax.categoryarray) && ax.categoryarray.length > 0;
+    if (isValidArray && (!ax.categoryorder || ax.categoryorder === 'array')) {
+        return ax.categoryarray;
+    }
+    if (!ax.categoryorder || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+        const values = getValidAxisValues(data, ax._dataKey);
+        const categoriesInTraceOrder = Array.from(new Set(values));
+        return ax.autorange === 'reversed' ? categoriesInTraceOrder.reverse() : categoriesInTraceOrder;
+    }
+    return ax.categoryorder;
+};
+const getPolarAxisProps = (data, layout)=>{
+    const props = {};
+    Object.keys(POLAR_AXIS_BY_DATA_KEY).forEach((dataKey)=>{
+        const propName = POLAR_AXIS_BY_DATA_KEY[dataKey];
+        const ax = getPolarAxis(data, dataKey, layout);
+        props[propName] = {
+            scaleType: ax._type === 'log' ? 'log' : 'default',
+            categoryOrder: getPolarAxisCategoryOrder(data, ax),
+            tickFormat: ax.tickformat,
+            ...getPolarAxisTickProps(data, ax),
+            ...isArrayOrTypedArray(ax.range) ? {
+                rangeStart: ax.range[0],
+                rangeEnd: ax.range[1]
+            } : {}
+        };
+        if (propName === 'angularAxis') {
+            props[propName].unit = ax.thetaunit;
+            props.direction = ax.direction;
+        }
+    });
+    return props;
+};