apexify.js 5.2.2 → 5.2.6

package/dist/esm/Canvas/utils/Charts/horizontalbarchart.js

@@ -8,7 +8,6 @@ const imageProperties_1 = require("../Image/imageProperties");
  */
 async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textGradient) {
     ctx.save();
-    // Preserve text alignment settings
     const savedTextAlign = ctx.textAlign;
     const savedTextBaseline = ctx.textBaseline;
     const effectiveFontSize = fontSize || style?.fontSize || 16;
@@ -18,30 +17,24 @@ async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textG
         fontString += 'bold ';
     if (style?.italic)
         fontString += 'italic ';
-    // Use font family without quotes for better rendering (quotes can cause rendering issues)
     fontString += `${effectiveFontSize}px ${fontFamily}`;
     ctx.font = fontString;
-    // Reset letter and word spacing to prevent stretched text
     ctx.letterSpacing = '0px';
     ctx.wordSpacing = '0px';
-    // Restore text alignment to ensure correct positioning
     ctx.textAlign = savedTextAlign;
     ctx.textBaseline = savedTextBaseline;
-    // Register custom font if provided
     if (style?.fontPath && style?.fontName) {
         try {
             const { GlobalFonts } = await import('@napi-rs/canvas');
             const path = await import('path');
             const fullPath = path.join(process.cwd(), style.fontPath);
             GlobalFonts.registerFromPath(fullPath, style.fontName);
-            // Replace font family in font string (handle both quoted and unquoted formats)
             ctx.font = fontString.replace(fontFamily, style.fontName);
         }
         catch (error) {
             console.warn(`Failed to register font: ${style.fontPath}`, error);
         }
     }
-    // Apply shadow
     if (style?.shadow) {
         ctx.shadowColor = style.shadow.color || 'rgba(0,0,0,0.5)';
         ctx.shadowOffsetX = style.shadow.offsetX || 2;
@@ -51,7 +44,6 @@ async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textG
             ctx.globalAlpha = style.shadow.opacity;
         }
     }
-    // Set fill style (gradient or color)
     if (textGradient) {
         const metrics = ctx.measureText(text);
         ctx.fillStyle = (0, imageProperties_1.createGradientFill)(ctx, textGradient, {
@@ -61,9 +53,7 @@ async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textG
     else if (color) {
         ctx.fillStyle = color;
     }
-    // Draw text
     ctx.fillText(text, x, y);
-    // Apply stroke
     if (style?.stroke) {
         ctx.strokeStyle = style.stroke.color || '#000000';
         ctx.lineWidth = style.stroke.width || 1;
@@ -75,7 +65,6 @@ async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textG
         }
         ctx.strokeText(text, x, y);
     }
-    // Reset shadow and alpha
     ctx.shadowColor = 'transparent';
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
@@ -120,18 +109,15 @@ function drawXAxisTicks(ctx, originX, originY, axisEndX, minValue, maxValue, ste
     ctx.textBaseline = 'top';
     const chartWidth = axisEndX - originX;
     if (customValues && customValues.length > 0) {
-        // Position labels based on their actual values, not pixel spacing
         const actualMin = Math.min(...customValues);
         const actualMax = Math.max(...customValues);
-        const range = actualMax - actualMin || 1; // Avoid division by zero
+        const range = actualMax - actualMin || 1;
         let lastLabelX = -Infinity;
-        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 40; // Use valueSpacing as min spacing if provided
+        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 40;
         customValues.forEach((value) => {
             const x = originX + ((value - actualMin) / range) * chartWidth;
             const labelText = value.toString();
-            // Check if this label would overlap with the previous one
             if (x - lastLabelX < minLabelSpacing && value > actualMin) {
-                // Skip this label to prevent overlap (but still draw tick mark)
                 ctx.beginPath();
                 ctx.moveTo(x, originY);
                 ctx.lineTo(x, originY + 5);
@@ -142,45 +128,36 @@ function drawXAxisTicks(ctx, originX, originY, axisEndX, minValue, maxValue, ste
             ctx.moveTo(x, originY);
             ctx.lineTo(x, originY + 5);
             ctx.stroke();
-            // Measure label to ensure it doesn't overflow, add minimum 2px spacing
             const labelMetrics = ctx.measureText(labelText);
-            const labelY = originY + 10; // 10px spacing from axis line
+            const labelY = originY + 10;
             ctx.fillText(labelText, x, labelY);
-            lastLabelX = x; // Update last label center position
+            lastLabelX = x;
         });
     }
     else {
-        // Range-based positioning - always position based on values, use valueSpacing only for label density
-        const range = maxValue - minValue || 1; // Avoid division by zero
-        // Calculate all tick positions first
+        const range = maxValue - minValue || 1;
         const tickValues = [];
         for (let value = minValue; value <= maxValue; value += step) {
             tickValues.push(value);
         }
-        // Draw ticks, but skip labels if they're too close together
         let lastLabelX = -Infinity;
-        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 40; // Use valueSpacing as min spacing if provided
+        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 40;
         for (const value of tickValues) {
             const x = originX + ((value - minValue) / range) * chartWidth;
             const labelText = value.toString();
-            // Check if this label center is too close to the previous label center
             if (x - lastLabelX < minLabelSpacing && value > minValue) {
-                // Skip this label to prevent overlap - but still draw the tick mark
                 ctx.beginPath();
                 ctx.moveTo(x, originY);
                 ctx.lineTo(x, originY + 5);
                 ctx.stroke();
                 continue;
             }
-            // Draw tick mark
             ctx.beginPath();
             ctx.moveTo(x, originY);
             ctx.lineTo(x, originY + 5);
             ctx.stroke();
-            // Draw label with minimum 2px spacing
-            const labelY = originY + 10; // 10px spacing from axis line
+            const labelY = originY + 10;
             ctx.fillText(labelText, x, labelY);
-            // Update last label position (center of the label)
             lastLabelX = x;
         }
     }
@@ -218,7 +195,6 @@ function drawYAxisTicks(ctx, originX, originY, axisEndY, minValue, maxValue, ste
             });
         }
         else {
-            // Position based on value range
             const range = maxValue - minValue || 1;
             customValues.forEach((value) => {
                 const y = originY - ((value - minValue) / range) * chartHeight;
@@ -231,16 +207,13 @@ function drawYAxisTicks(ctx, originX, originY, axisEndY, minValue, maxValue, ste
         }
     }
     else {
-        // Range-based positioning
         const range = maxValue - minValue || 1;
         let lastLabelY = Infinity;
-        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 30; // Vertical spacing
+        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 30;
         for (let value = minValue; value <= maxValue; value += step) {
             const y = originY - ((value - minValue) / range) * chartHeight;
             const labelText = value.toString();
-            // Check if this label would overlap with the previous one
             if (lastLabelY - y < minLabelSpacing && value > minValue) {
-                // Skip this label to prevent overlap - but still draw the tick mark
                 ctx.beginPath();
                 ctx.moveTo(originX - 5, y);
                 ctx.lineTo(originX, y);
@@ -252,7 +225,7 @@ function drawYAxisTicks(ctx, originX, originY, axisEndY, minValue, maxValue, ste
             ctx.lineTo(originX, y);
             ctx.stroke();
             ctx.fillText(labelText, originX - 10, y);
-            lastLabelY = y; // Update last label position
+            lastLabelY = y;
         }
     }
     ctx.restore();
@@ -267,7 +240,6 @@ function drawGrid(ctx, originX, originY, axisEndX, axisEndY, xMin, xMax, xStep,
     ctx.setLineDash([2, 2]);
     const chartWidth = axisEndX - originX;
     const chartHeight = originY - axisEndY;
-    // Draw vertical grid lines (based on X-axis values)
     if (xAxisCustomValues && xAxisCustomValues.length > 0) {
         const actualMin = Math.min(...xAxisCustomValues);
         const actualMax = Math.max(...xAxisCustomValues);
@@ -290,7 +262,6 @@ function drawGrid(ctx, originX, originY, axisEndX, axisEndY, xMin, xMax, xStep,
             ctx.stroke();
         }
     }
-    // Draw horizontal grid lines (based on Y-axis values/range)
     if (yAxisCustomValues && yAxisCustomValues.length > 0) {
         const actualMin = Math.min(...yAxisCustomValues);
         const actualMax = Math.max(...yAxisCustomValues);
@@ -345,7 +316,6 @@ function calculateLegendDimensions(legend, fontSize, maxWidth, wrapTextEnabled =
     const boxSize = 15;
     const spacing = 10;
     const padding = paddingBox;
-    // Create a temporary canvas to measure text
     const tempCanvas = (0, canvas_1.createCanvas)(1, 1);
     const tempCtx = tempCanvas.getContext('2d');
     tempCtx.font = `${fontSize}px Arial`;
@@ -384,12 +354,10 @@ async function drawLegendAtPosition(ctx, legend, legendX, legendY, fontSize, bac
     const spacing = 10;
     const padding = paddingBox ?? 8;
     ctx.font = `${fontSize}px Arial`;
-    // Determine colors
     const isDarkBackground = backgroundColor === '#000000' || backgroundColor.toLowerCase() === 'black';
     const effectiveTextColor = textColor ?? (isDarkBackground ? '#FFFFFF' : '#000000');
     const effectiveBgColor = isDarkBackground ? 'rgba(0, 0, 0, 0.8)' : (backgroundColor.startsWith('rgba') || backgroundColor.startsWith('rgb') ? backgroundColor : 'rgba(255, 255, 255, 0.9)');
     const effectiveBorderColor = borderColor ?? (isDarkBackground ? '#FFFFFF' : '#000000');
-    // Calculate dimensions with text wrapping support
     const textSpacing = 10;
     const effectiveMaxWidth = maxWidth ? maxWidth - padding * 2 - boxSize - textSpacing : undefined;
     let maxEntryWidth = 0;
@@ -412,7 +380,6 @@ async function drawLegendAtPosition(ctx, legend, legendX, legendY, fontSize, bac
     });
     const legendWidth = maxWidth ? maxWidth : maxEntryWidth + padding * 2;
     const legendHeight = entryHeights.reduce((sum, h, i) => sum + h + (i < entryHeights.length - 1 ? spacing : 0), 0) + padding * 2;
-    // Draw legend background (gradient or color)
     ctx.beginPath();
     ctx.rect(legendX, legendY, legendWidth, legendHeight);
     fillWithGradientOrColor(ctx, backgroundGradient, effectiveBgColor, effectiveBgColor, { x: legendX, y: legendY, w: legendWidth, h: legendHeight });
@@ -427,7 +394,6 @@ async function drawLegendAtPosition(ctx, legend, legendX, legendY, fontSize, bac
         const entry = legend[index];
         const entryHeight = entryHeights[index];
         const centerY = currentY + entryHeight / 2;
-        // Draw color box (gradient or color)
         ctx.beginPath();
         ctx.rect(legendX + padding, centerY - boxSize / 2, boxSize, boxSize);
         fillWithGradientOrColor(ctx, entry.gradient, entry.color || '#4A90E2', '#4A90E2', { x: legendX + padding, y: centerY - boxSize / 2, w: boxSize, h: boxSize });
@@ -522,25 +488,21 @@ function calculateResponsiveHeight(dataLength, options = {}) {
     const paddingTop = padding.top ?? 60;
     const paddingBottom = padding.bottom ?? 80;
     const minBarHeight = options.bars?.minHeight ?? 40;
-    const barSpacing = options.bars?.spacing ?? 15; // Use same default spacing
-    // Calculate minimum height needed: (number of bars * bar height) + (spacing between bars)
-    // Each bar needs minBarHeight, and between each pair of bars we need barSpacing
+    const barSpacing = options.bars?.spacing ?? 15;
     const chartAreaHeight = dataLength * minBarHeight + (dataLength - 1) * barSpacing;
-    // Add title height if needed (with margin below title)
     const titleHeight = options.labels?.title?.text ? (options.labels.title.fontSize ?? 24) + 20 : 0;
-    const titleMargin = options.labels?.title?.text ? 20 : 0; // 20px gap between title and chart
-    // Calculate x-axis label area height (tick labels + gap + axis label)
+    const titleMargin = options.labels?.title?.text ? 20 : 0;
     const tickFontSize = options.axes?.x?.tickFontSize ?? options.axes?.y?.tickFontSize ?? 12;
     const axisLabelFontSize = options.labels?.barLabelDefaults?.fontSize ?? 14;
     let xAxisLabelAreaHeight = 0;
     if (options.axes?.x?.label || options.axes?.x?.values || options.axes?.x?.range) {
-        const tickLabelHeight = tickFontSize + 10; // 10px spacing below tick labels
-        const xAxisLabelTextHeight = options.axes?.x?.label ? axisLabelFontSize + 2 : 0; // 2px minimum gap
-        xAxisLabelAreaHeight = tickLabelHeight + (options.axes?.x?.label ? 8 : 0) + xAxisLabelTextHeight; // 8px gap between tick labels and axis label
+        const tickLabelHeight = tickFontSize + 10;
+        const xAxisLabelTextHeight = options.axes?.x?.label ? axisLabelFontSize + 2 : 0;
+        xAxisLabelAreaHeight = tickLabelHeight + (options.axes?.x?.label ? 8 : 0) + xAxisLabelTextHeight;
     }
     const yAxisLabelHeight = options.axes?.y?.label ? axisLabelFontSize + 20 : 0;
     const axisLabelHeight = Math.max(xAxisLabelAreaHeight, yAxisLabelHeight);
-    const minBottomGap = 2; // Minimum 2px gap at bottom
+    const minBottomGap = 2;
     return paddingTop + titleHeight + titleMargin + chartAreaHeight + axisLabelHeight + minBottomGap + paddingBottom;
 }
 /**
@@ -550,17 +512,14 @@ function calculateResponsiveHeight(dataLength, options = {}) {
  * @returns Canvas buffer
  */
 async function createHorizontalBarChart(data, options = {}) {
-    // Extract and map organized config to internal variables
     let width = options.dimensions?.width ?? 800;
     const padding = options.dimensions?.padding || {};
-    // Appearance
     const backgroundColor = options.appearance?.backgroundColor ?? '#FFFFFF';
     const backgroundGradient = options.appearance?.backgroundGradient;
     const backgroundImage = options.appearance?.backgroundImage;
     const axisColor = options.appearance?.axisColor ?? options.axes?.x?.color ?? options.axes?.y?.color ?? '#000000';
     const axisWidth = options.appearance?.axisWidth ?? options.axes?.x?.width ?? options.axes?.y?.width ?? 2;
     const arrowSize = options.appearance?.arrowSize ?? 10;
-    // Labels
     const chartTitle = options.labels?.title?.text;
     const chartTitleFontSize = options.labels?.title?.fontSize ?? 24;
     const showBarLabels = options.labels?.barLabelDefaults?.show ?? true;
@@ -569,48 +528,41 @@ async function createHorizontalBarChart(data, options = {}) {
     const showValues = options.labels?.valueLabelDefaults?.show ?? true;
     const valueFontSize = options.labels?.valueLabelDefaults?.fontSize ?? 12;
     const valueColor = options.labels?.valueLabelDefaults?.defaultColor ?? '#000000';
-    // Axes
     const xAxisLabel = options.axes?.x?.label;
     const yAxisLabel = options.axes?.y?.label;
     const axisLabelColor = options.axes?.x?.labelColor ?? options.axes?.y?.labelColor ?? '#000000';
     const xAxisRange = options.axes?.x?.range;
     const xAxisValues = options.axes?.x?.values;
-    const baseline = options.axes?.x?.baseline ?? 0; // Custom baseline value (default: 0)
+    const baseline = options.axes?.x?.baseline ?? 0;
     const yAxisValues = options.axes?.y?.values;
     const tickFontSize = options.axes?.x?.tickFontSize ?? options.axes?.y?.tickFontSize ?? 12;
     const xAxisTickColor = options.axes?.x?.tickColor ?? '#000000';
     const yAxisTickColor = options.axes?.y?.tickColor ?? '#000000';
     const xAxisValueSpacing = options.axes?.x?.valueSpacing;
     const yAxisValueSpacing = options.axes?.y?.valueSpacing;
-    // Legend
     const showLegend = options.legend?.show ?? false;
     const legend = options.legend?.entries;
-    const legendPosition = options.legend?.position ?? 'right'; // Default: right
-    // Grid
+    const legendPosition = options.legend?.position ?? 'right';
     const showGrid = options.grid?.show ?? false;
     const gridColor = options.grid?.color ?? '#E0E0E0';
     const gridWidth = options.grid?.width ?? 1;
-    // Chart type
     const chartType = options.type ?? 'standard';
-    // Bars
     const minBarHeight = options.bars?.minHeight ?? 30;
     const barSpacing = options.bars?.spacing;
     const groupSpacing = options.bars?.groupSpacing ?? 10;
     const segmentSpacing = options.bars?.segmentSpacing ?? 2;
-    const lollipopLineWidth = options.bars?.lineWidth ?? 2; // Line width for lollipop charts (default: 2)
-    const lollipopDotSize = options.bars?.dotSize ?? 8; // Dot/circle size for lollipop charts (default: 8)
+    const lollipopLineWidth = options.bars?.lineWidth ?? 2;
+    const lollipopDotSize = options.bars?.dotSize ?? 8;
     const paddingTop = padding.top ?? 60;
     const paddingRight = padding.right ?? 80;
     const paddingBottom = padding.bottom ?? 80;
     const paddingLeft = padding.left ?? 100;
-    // Calculate responsive height based on number of bars
     let baseHeight = calculateResponsiveHeight(data.length, options);
-    // Calculate legend dimensions and adjust canvas size based on legend position
     let legendWidth = 0;
     let legendHeight = 0;
     let extraWidth = 0;
     let extraHeight = 0;
-    const minLegendSpacing = 10; // Minimum spacing from chart area
+    const minLegendSpacing = 10;
     if (showLegend && legend && legend.length > 0) {
         const legendMaxWidth = options.legend?.maxWidth;
         const legendWrapText = options.legend?.wrapText !== false;
@@ -619,36 +571,27 @@ async function createHorizontalBarChart(data, options = {}) {
         legendWidth = legendDims.width;
         legendHeight = legendDims.height;
         const legendSpacing = options.legend?.spacing ?? 20;
-        // Adjust canvas dimensions based on legend position
-        // For left position, add extra space for Y-axis labels and bar labels
         if (legendPosition === 'left') {
-            // Estimate Y-axis label width: measure potential category labels or numeric values
             const tempCanvas = (0, canvas_1.createCanvas)(1, 1);
             const tempCtx = tempCanvas.getContext('2d');
-            let estimatedYAxisLabelWidth = 80; // Default estimate (category labels can be longer)
+            let estimatedYAxisLabelWidth = 80;
             if (tempCtx) {
-                // Check if bar labels are on the left (they act as Y-axis labels)
                 const barLabelFontSize = options.labels?.barLabelDefaults?.fontSize ?? 14;
                 const showBarLabels = options.labels?.barLabelDefaults?.show ?? true;
                 const barLabelPosition = options.labels?.barLabelDefaults?.defaultPosition ?? 'left';
                 const hasLeftLabels = showBarLabels && (barLabelPosition === 'left' ||
                     data.some(item => (item.labelPosition ?? barLabelPosition) === 'left'));
                 if (hasLeftLabels) {
-                    // Measure category labels (bar labels) which are typically longer
                     tempCtx.font = `${barLabelFontSize}px Arial`;
                     data.forEach(d => {
                         const labelWidth = tempCtx.measureText(d.label).width;
                         estimatedYAxisLabelWidth = Math.max(estimatedYAxisLabelWidth, labelWidth);
                     });
-                    // Add padding: 5px (label offset from originX) + 10px (spacing) = 15px total
                     estimatedYAxisLabelWidth += 15;
                 }
                 else {
-                    // No left labels, but might have Y-axis numeric ticks
                     tempCtx.font = `${tickFontSize}px Arial`;
-                    // Estimate for numeric Y-axis values if custom values are provided
-                    estimatedYAxisLabelWidth = 60; // Default for numeric values
-                    // Add padding: 10px (label offset) + 5px (tick) + 15px (spacing) = 30px total
+                    estimatedYAxisLabelWidth = 60;
                     estimatedYAxisLabelWidth += 30;
                 }
             }
@@ -661,15 +604,9 @@ async function createHorizontalBarChart(data, options = {}) {
             extraHeight = legendHeight + legendSpacing + minLegendSpacing;
         }
     }
-    // adjustedWidth and adjustedHeight are already calculated above
-    // Determine X-axis (value axis) range
-    // For grouped charts: find max value across all segments
-    // For stacked charts: find max sum of values per category
-    // For lollipop charts: same as standard (single value per bar)
     let allValues = [];
     if (chartType === 'grouped' || chartType === 'stacked' || chartType === 'lollipop') {
         if (chartType === 'grouped') {
-            // For grouped: find max value across all segments
             data.forEach(d => {
                 if (d.values && d.values.length > 0) {
                     d.values.forEach(seg => allValues.push(seg.value));
@@ -680,7 +617,6 @@ async function createHorizontalBarChart(data, options = {}) {
             });
         }
         else {
-            // For stacked: find max sum per category
             data.forEach(d => {
                 if (d.values && d.values.length > 0) {
                     const sum = d.values.reduce((acc, seg) => acc + seg.value, 0);
@@ -693,20 +629,17 @@ async function createHorizontalBarChart(data, options = {}) {
         }
     }
     else {
-        // Standard chart: use value directly
         allValues = data.map(d => d.value ?? 0).filter(v => v !== undefined && v !== null);
     }
     let xMin, xMax;
     let xAxisCustomValues = xAxisValues;
     const hasExplicitXRange = xAxisRange && xAxisRange.min !== undefined && xAxisRange.max !== undefined;
-    // Check if any bars have xStart/xEnd (value ranges)
     const hasValueRanges = data.some(d => d.xStart !== undefined || d.xEnd !== undefined);
     if (hasValueRanges) {
         const allXStarts = data.map(d => d.xStart ?? d.value ?? 0).filter(v => v !== undefined);
         const allXEnds = data.map(d => d.xEnd ?? d.value ?? 0).filter(v => v !== undefined);
         xMin = Math.min(...allXStarts, ...allXEnds);
         xMax = Math.max(...allXStarts, ...allXEnds);
-        // Add some padding
         const xPadding = (xMax - xMin) * 0.1;
         xMin = Math.max(0, xMin - xPadding);
         xMax = xMax + xPadding;
@@ -718,7 +651,6 @@ async function createHorizontalBarChart(data, options = {}) {
     else if (hasExplicitXRange) {
         xMin = xAxisRange.min;
         xMax = xAxisRange.max;
-        // Ensure baseline is within range
         const effectiveBaseline = baseline !== undefined ? baseline : 0;
         xMin = Math.min(xMin, effectiveBaseline);
         xMax = Math.max(xMax, effectiveBaseline);
@@ -728,11 +660,9 @@ async function createHorizontalBarChart(data, options = {}) {
         xMax = Math.max(...allValues, 1);
         const xPadding = (xMax - xMin) * 0.1;
         const effectiveBaseline = baseline !== undefined ? baseline : 0;
-        // Ensure baseline is always included in the range
         xMin = Math.min(Math.max(0, xMin - xPadding), effectiveBaseline);
         xMax = xMax + xPadding;
     }
-    // Determine Y-axis (category axis) range - similar to X-axis in standard chart
     const yAxisRange = options.axes?.y?.range;
     let yMin, yMax;
     let yAxisCustomValues = yAxisValues;
@@ -746,22 +676,18 @@ async function createHorizontalBarChart(data, options = {}) {
         yMax = yAxisRange.max;
     }
     else {
-        // Auto-calculate from data indices (0 to data.length - 1)
         yMin = 0;
         yMax = data.length - 1;
     }
-    // Validate data values against explicit axis ranges
     if (hasExplicitXRange || xAxisCustomValues) {
         const effectiveXMin = xAxisCustomValues ? Math.min(...xAxisCustomValues) : xAxisRange.min;
         const effectiveXMax = xAxisCustomValues ? Math.max(...xAxisCustomValues) : xAxisRange.max;
         data.forEach((item, itemIndex) => {
-            // Check value (X-axis for horizontal bars)
             if (item.value !== undefined && (item.value < effectiveXMin || item.value > effectiveXMax)) {
                 throw new Error(`Horizontal Bar Chart Error: Data value out of X-axis bounds.\n` +
                     `Bar ${itemIndex} "${item.label || `at index ${itemIndex}`}" has value ${item.value}, ` +
                     `which exceeds the X-axis range [${effectiveXMin}, ${effectiveXMax}].`);
             }
-            // Check xStart and xEnd if they exist
             if (item.xStart !== undefined && (item.xStart < effectiveXMin || item.xStart > effectiveXMax)) {
                 throw new Error(`Horizontal Bar Chart Error: Data value out of X-axis bounds.\n` +
                     `Bar ${itemIndex} "${item.label || `at index ${itemIndex}`}" has xStart value ${item.xStart}, ` +
@@ -772,7 +698,6 @@ async function createHorizontalBarChart(data, options = {}) {
                     `Bar ${itemIndex} "${item.label || `at index ${itemIndex}`}" has xEnd value ${item.xEnd}, ` +
                     `which exceeds the X-axis range [${effectiveXMin}, ${effectiveXMax}].`);
             }
-            // Check grouped/stacked values
             if (item.values && item.values.length > 0) {
                 item.values.forEach((seg, segIndex) => {
                     if (seg.value < effectiveXMin || seg.value > effectiveXMax) {
@@ -788,7 +713,6 @@ async function createHorizontalBarChart(data, options = {}) {
         const effectiveYMin = yAxisCustomValues ? Math.min(...yAxisCustomValues) : yAxisRange.min;
         const effectiveYMax = yAxisCustomValues ? Math.max(...yAxisCustomValues) : yAxisRange.max;
         data.forEach((item, itemIndex) => {
-            // Check yStart and yEnd (Y-axis for horizontal bars)
             if (item.yStart !== undefined && (item.yStart < effectiveYMin || item.yStart > effectiveYMax)) {
                 throw new Error(`Horizontal Bar Chart Error: Data value out of Y-axis bounds.\n` +
                     `Bar ${itemIndex} "${item.label || `at index ${itemIndex}`}" has yStart value ${item.yStart}, ` +
@@ -801,14 +725,10 @@ async function createHorizontalBarChart(data, options = {}) {
             }
         });
     }
-    // Legend dimensions already calculated above, no need to recalculate
-    // Calculate adjusted dimensions (needed before creating canvas)
     const adjustedWidth = width + extraWidth;
     const adjustedHeight = baseHeight + extraHeight;
-    // Create canvas
     const canvas = (0, canvas_1.createCanvas)(adjustedWidth, adjustedHeight);
     const ctx = canvas.getContext('2d');
-    // Fill background (gradient, image, or color)
     if (backgroundImage) {
         try {
             const bgImage = await (0, canvas_1.loadImage)(backgroundImage);
@@ -816,7 +736,6 @@ async function createHorizontalBarChart(data, options = {}) {
         }
         catch (error) {
             console.warn(`Failed to load background image: ${backgroundImage}`, error);
-            // Fallback to gradient or color if image fails to load
             fillWithGradientOrColor(ctx, backgroundGradient, backgroundColor, backgroundColor, {
                 x: 0, y: 0, w: adjustedWidth, h: adjustedHeight
             });
@@ -829,165 +748,114 @@ async function createHorizontalBarChart(data, options = {}) {
         });
         ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
     }
-    // Calculate axis positions with proper spacing
-    // Title height: fontSize + spacing below title (minimum 20px gap)
     const titleHeight = chartTitle ? chartTitleFontSize + 20 : 0;
-    // Calculate actual height needed for x-axis labels (tick labels + axis label)
     let xAxisLabelAreaHeight = 0;
     if (xAxisLabel || (xAxisCustomValues && xAxisCustomValues.length > 0) || xAxisRange) {
-        // Measure tick label height (tickFontSize + spacing)
-        const tickLabelHeight = tickFontSize + 10; // 10px spacing below tick labels
-        // Measure x-axis label height if present
-        const xAxisLabelTextHeight = xAxisLabel ? axisLabelFontSize + 2 : 0; // 2px minimum gap
-        // Total height needed: tick labels + gap + axis label
-        xAxisLabelAreaHeight = tickLabelHeight + (xAxisLabel ? 8 : 0) + xAxisLabelTextHeight; // 8px gap between tick labels and axis label
+        const tickLabelHeight = tickFontSize + 10;
+        const xAxisLabelTextHeight = xAxisLabel ? axisLabelFontSize + 2 : 0;
+        xAxisLabelAreaHeight = tickLabelHeight + (xAxisLabel ? 8 : 0) + xAxisLabelTextHeight;
     }
-    // Y-axis label height (if present)
     const yAxisLabelHeight = yAxisLabel ? axisLabelFontSize + 20 : 0;
     const axisLabelHeight = Math.max(xAxisLabelAreaHeight, yAxisLabelHeight);
-    // Adjust chart area based on legend position
-    // Note: adjustedWidth and adjustedHeight are already calculated above (before canvas creation)
-    // Chart area should use the ORIGINAL width/height, not adjusted, so legend space is added to canvas, not taken from chart
     let chartAreaLeft = paddingLeft;
-    let chartAreaRight = width - paddingRight; // Use original width - chart area stays the same size
-    // Add margin between title and chart area (minimum 2px)
-    const titleMargin = chartTitle ? 20 : 0; // 20px gap between title and chart
+    let chartAreaRight = width - paddingRight;
+    const titleMargin = chartTitle ? 20 : 0;
     let chartAreaTop = paddingTop + titleHeight + titleMargin;
-    let chartAreaBottom = baseHeight - paddingBottom; // Use baseHeight, not adjustedHeight - chart area stays the same size
+    let chartAreaBottom = baseHeight - paddingBottom;
     if (showLegend && legend && legend.length > 0) {
         const legendSpacing = options.legend?.spacing ?? 20;
         if (legendPosition === 'left') {
-            // Calculate actual Y-axis label width (category labels or numeric values)
-            let actualYAxisLabelWidth = 80; // Default estimate
+            let actualYAxisLabelWidth = 80;
             const tempCanvas = (0, canvas_1.createCanvas)(1, 1);
             const tempCtx = tempCanvas.getContext('2d');
             if (tempCtx) {
-                // Check if bar labels are positioned on the left (they act as Y-axis labels)
                 const barLabelFontSize = options.labels?.barLabelDefaults?.fontSize ?? 14;
                 tempCtx.font = `${barLabelFontSize}px Arial`;
-                // Check if bar labels are on the left side
                 const hasLeftLabels = barLabelPosition === 'left' ||
                     data.some(item => (item.labelPosition ?? barLabelPosition) === 'left');
                 if (hasLeftLabels && showBarLabels) {
-                    // Measure category labels (bar labels) - these are the Y-axis labels
                     data.forEach(d => {
                         const labelWidth = tempCtx.measureText(d.label).width;
                         actualYAxisLabelWidth = Math.max(actualYAxisLabelWidth, labelWidth);
                     });
-                    // Add padding: 5px (label offset from originX) + 10px (spacing) = 15px total
                     actualYAxisLabelWidth += 15;
                 }
                 else {
-                    // No left labels, but might have Y-axis numeric ticks
                     tempCtx.font = `${tickFontSize}px Arial`;
-                    // Estimate for numeric Y-axis values if custom values are provided
-                    actualYAxisLabelWidth = 60; // Default for numeric values
-                    // Add padding: 10px (label offset) + 5px (tick) + 15px (spacing) = 30px total
+                    actualYAxisLabelWidth = 60;
                     actualYAxisLabelWidth += 30;
                 }
             }
-            // For left position, we need to shift chart area to the right to make room for legend
-            // But the chart area width itself should remain the same (using original width)
             chartAreaLeft = paddingLeft + legendWidth + legendSpacing + actualYAxisLabelWidth;
-            chartAreaRight = width - paddingRight; // Keep using original width
+            chartAreaRight = width - paddingRight;
         }
         else if (legendPosition === 'right') {
-            // For right position, chart area stays at original position and size
-            // Legend will be positioned to the right of chartAreaRight, in the extraWidth space
             chartAreaLeft = paddingLeft;
-            chartAreaRight = width - paddingRight; // Use original width - chart area doesn't shrink
+            chartAreaRight = width - paddingRight;
         }
         else if (legendPosition === 'top') {
-            // For top position, shift chart area down but keep same height
             chartAreaTop = paddingTop + titleHeight + legendHeight + legendSpacing + minLegendSpacing;
-            chartAreaBottom = baseHeight - paddingBottom; // Use baseHeight, not adjustedHeight
+            chartAreaBottom = baseHeight - paddingBottom;
         }
         else if (legendPosition === 'bottom') {
-            // For bottom position, chart area stays at original position
-            // Legend will be positioned below in the extraHeight space
             chartAreaTop = paddingTop + titleHeight;
-            chartAreaBottom = baseHeight - paddingBottom; // Use baseHeight, not adjustedHeight
+            chartAreaBottom = baseHeight - paddingBottom;
         }
     }
     const originX = chartAreaLeft;
-    // Use baseHeight (not adjustedHeight) for originY calculation - chart area should be based on original dimensions
-    // The adjustedHeight is only for canvas size expansion, not chart area positioning
-    // This ensures the chart size stays constant and legend space is added to canvas, not taken from chart
-    // Ensure at least 2px gap at bottom for labels
     const minBottomGap = 2;
     const originY = baseHeight - paddingBottom - xAxisLabelAreaHeight - minBottomGap;
     const axisEndY = chartAreaTop;
     const axisEndX = chartAreaRight;
-    // Draw chart title
     if (chartTitle) {
         ctx.save();
         ctx.textAlign = 'center';
         ctx.textBaseline = 'top';
-        // Title positioned with proper spacing from top
         const titleY = paddingTop + 10;
         const titleX = adjustedWidth / 2;
         await renderEnhancedText(ctx, chartTitle, titleX, titleY, options.labels?.title?.textStyle, chartTitleFontSize, options.labels?.title?.color, options.labels?.title?.gradient);
         ctx.restore();
     }
-    // Set axis style
     ctx.strokeStyle = axisColor;
     ctx.fillStyle = axisColor;
     ctx.lineWidth = axisWidth;
     ctx.lineCap = 'round';
-    // X-axis will be drawn after calculating zero line
-    // Draw Y-axis (vertical - category axis)
     ctx.beginPath();
     ctx.moveTo(originX, originY);
     ctx.lineTo(originX, axisEndY);
     ctx.stroke();
-    // Draw Y-axis arrow
-    drawArrow(ctx, originX, axisEndY, -Math.PI / 2, arrowSize); // Y-axis arrow (up)
-    // Calculate X-axis step
+    drawArrow(ctx, originX, axisEndY, -Math.PI / 2, arrowSize);
     const xStep = xAxisRange?.step ?? Math.ceil((xMax - xMin) / 10);
-    // Calculate Y-axis step
     const yStep = yAxisRange?.step ?? 1;
-    // Calculate chart area dimensions (needed for baseline calculation)
     const chartAreaWidth = axisEndX - originX;
-    // Calculate baseline position for X-axis (custom baseline value, default is 0)
     const baselineX = originX + ((baseline - xMin) / (xMax - xMin)) * chartAreaWidth;
-    // Draw X-axis at baseline position (horizontal line at originY)
     ctx.beginPath();
     ctx.moveTo(originX, originY);
     ctx.lineTo(axisEndX, originY);
     ctx.stroke();
-    // Draw X-axis arrow
     drawArrow(ctx, axisEndX, originY, 0, arrowSize);
-    // Draw X-axis ticks and labels at baseline position
     drawXAxisTicks(ctx, originX, originY, axisEndX, xMin, xMax, xStep, tickFontSize, xAxisCustomValues, xAxisValueSpacing, xAxisTickColor);
-    // Draw Y-axis ticks and labels only if yAxisValues or yAxisRange is explicitly provided
-    // For horizontal bar charts, we typically only want bar labels, not numeric y-axis values
     const shouldDrawYAxisTicks = (yAxisValues && yAxisValues.length > 0) || (options.axes?.y?.range && options.axes.y.range.min !== undefined && options.axes.y.range.max !== undefined);
     if (shouldDrawYAxisTicks) {
         drawYAxisTicks(ctx, originX, originY, axisEndY, yMin, yMax, yStep, tickFontSize, yAxisCustomValues, yAxisValueSpacing, yAxisTickColor);
     }
-    // Draw axis labels
     if (xAxisLabel) {
         ctx.save();
         ctx.fillStyle = axisLabelColor;
         ctx.font = `${axisLabelFontSize}px Arial`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'top';
-        // Position x-axis label with proper spacing: tick labels end at originY + tickFontSize + 10
-        // Add 8px gap between tick labels and axis label, then position axis label
         const tickLabelBottom = originY + tickFontSize + 10;
-        const xAxisLabelY = tickLabelBottom + 8; // 8px gap between tick labels and axis label
+        const xAxisLabelY = tickLabelBottom + 8;
         ctx.fillText(xAxisLabel, (originX + axisEndX) / 2, xAxisLabelY);
         ctx.restore();
     }
     if (yAxisLabel) {
-        // Check if bar labels are on the left side - if so, position Y-axis label further left
         let maxBarLabelWidth = 0;
         if (showBarLabels) {
-            // Check if default position or any bar has labels on the left
             const hasLeftLabels = barLabelPosition === 'left' ||
                 data.some(item => (item.labelPosition ?? barLabelPosition) === 'left');
             if (hasLeftLabels) {
-                // Calculate maximum width of bar labels
                 ctx.save();
                 ctx.font = `${axisLabelFontSize}px Arial`;
                 data.forEach(item => {
@@ -1005,8 +873,6 @@ async function createHorizontalBarChart(data, options = {}) {
         ctx.font = `${axisLabelFontSize}px Arial`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
-        // Position Y-axis label further left if bar labels are on the left
-        // Add extra spacing (20px) after the bar labels
         const labelX = originX - maxBarLabelWidth - 20 - 30;
         const labelY = (originY + axisEndY) / 2;
         ctx.translate(labelX, labelY);
@@ -1014,11 +880,9 @@ async function createHorizontalBarChart(data, options = {}) {
         ctx.fillText(yAxisLabel, 0, 0);
         ctx.restore();
     }
-    // Draw grid lines if enabled
     if (showGrid) {
         drawGrid(ctx, originX, originY, axisEndX, axisEndY, xMin, xMax, xStep, yMin, yMax, yStep, yAxisCustomValues, xAxisCustomValues, gridColor, gridWidth);
     }
-    // Draw legend if provided - positioned based on legendPosition option
     if (showLegend && legend && legend.length > 0) {
         const legendSpacing = options.legend?.spacing ?? 20;
         const legendFontSize = options.legend?.fontSize ?? 16;
@@ -1028,78 +892,57 @@ async function createHorizontalBarChart(data, options = {}) {
         const legendPadding = options.legend?.padding;
         const legendMaxWidth = options.legend?.maxWidth;
         const legendWrapText = options.legend?.wrapText !== false;
-        // Calculate legend position based on legendPosition option
         let legendX, legendY;
         const chartAreaHeight = originY - axisEndY;
         const chartAreaWidth = axisEndX - originX;
         switch (legendPosition) {
             case 'top':
-                legendX = (adjustedWidth - legendWidth) / 2; // Centered horizontally
+                legendX = (adjustedWidth - legendWidth) / 2;
                 legendY = paddingTop + titleHeight + minLegendSpacing;
                 break;
             case 'bottom':
-                legendX = (adjustedWidth - legendWidth) / 2; // Centered horizontally
+                legendX = (adjustedWidth - legendWidth) / 2;
                 legendY = adjustedHeight - paddingBottom - legendHeight - minLegendSpacing;
                 break;
             case 'left':
-                // Position legend at the very left edge to make maximum room for Y-axis labels
-                // The chart area already accounts for legend width + label width, so position legend at leftmost
                 legendX = paddingLeft;
-                legendY = axisEndY + (chartAreaHeight - legendHeight) / 2; // Vertically centered in chart area
+                legendY = axisEndY + (chartAreaHeight - legendHeight) / 2;
                 break;
             case 'right':
             default:
                 legendX = axisEndX + minLegendSpacing;
-                legendY = axisEndY + (chartAreaHeight - legendHeight) / 2; // Vertically centered in chart area
+                legendY = axisEndY + (chartAreaHeight - legendHeight) / 2;
                 break;
         }
         await drawLegendAtPosition(ctx, legend, legendX, legendY, legendFontSize, legendBgColor || backgroundColor, legendTextColor, legendBorderColor, legendPadding, legendMaxWidth, legendWrapText, options.legend?.backgroundGradient, options.legend?.textGradient, options.legend?.textStyle);
     }
-    // Calculate chart area dimensions (Y-axis area for bars)
-    // chartAreaWidth and baselineX already calculated above when drawing X-axis
     const chartAreaHeight = originY - axisEndY;
-    // Calculate bar dimensions to fit within Y-axis bounds (between axisEndY and originY)
     const calculatedBarSpacing = barSpacing ?? 15;
-    // Total spacing needed: spacing between bars (n-1) + initial spacing before first bar
-    const totalSpacing = data.length * calculatedBarSpacing; // Include spacing before first bar
+    const totalSpacing = data.length * calculatedBarSpacing;
     const availableHeight = chartAreaHeight - totalSpacing;
     const calculatedBarHeight = Math.max(minBarHeight, availableHeight / data.length);
-    // Verify all bars will fit
     const totalBarsHeight = data.length * calculatedBarHeight + totalSpacing;
     if (totalBarsHeight > chartAreaHeight) {
-        // Adjust bar height if needed to fit all bars
         const adjustedBarHeight = Math.max(minBarHeight, (chartAreaHeight - totalSpacing) / data.length);
         if (adjustedBarHeight < calculatedBarHeight) {
             console.warn(`Bar height adjusted from ${calculatedBarHeight} to ${adjustedBarHeight} to fit all ${data.length} bars`);
         }
     }
     const labelsToDraw = [];
-    // Track value label positions per bar (for adjusting bar label positions)
     const valueLabelPositions = new Map();
-    // First pass: Draw all bars (no labels)
     data.forEach((item, index) => {
-        // Calculate bar Y position - start from axisEndY (top) and space bars downward
-        // First bar starts at axisEndY, each subsequent bar: previous position + bar height + spacing
         const barY = axisEndY + (index * (calculatedBarHeight + calculatedBarSpacing));
         const barCenterY = barY + calculatedBarHeight / 2;
-        // Ensure bar stays within Y-axis bounds (between axisEndY and originY)
         if (barY + calculatedBarHeight > originY) {
-            // Bar would exceed Y-axis bottom - skip it to prevent overflow
-            // This should not happen if chartAreaHeight is calculated correctly, but check anyway
             console.warn(`Bar at index ${index} (${item.label}) would exceed chart bounds. Skipping.`);
             return;
         }
-        // Calculate bar position and dimensions for label positioning (used for all chart types)
         let barX, barEndX, barLength;
-        // Handle grouped/stacked/lollipop vs standard charts
         if ((chartType === 'grouped' || chartType === 'stacked' || chartType === 'lollipop') && item.values && item.values.length > 0) {
-            // Grouped or stacked chart
             const segments = item.values;
             const numSegments = segments.length;
             if (chartType === 'grouped') {
-                // Grouped: bars side-by-side (vertically stacked in horizontal chart)
                 const segmentHeight = (calculatedBarHeight - (groupSpacing * (numSegments - 1))) / numSegments;
-                // Calculate overall bar bounds for label positioning (use max segment)
                 const maxSegment = segments.reduce((max, seg) => seg.value > max.value ? seg : max, segments[0]);
                 if (item.xStart !== undefined || item.xEnd !== undefined) {
                     const startValue = item.xStart ?? xMin;
@@ -1110,7 +953,6 @@ async function createHorizontalBarChart(data, options = {}) {
                     barEndX = originX + endRatio * chartAreaWidth;
                 }
                 else {
-                    // Calculate based on positive/negative
                     if (maxSegment.value >= 0) {
                         const positiveRatio = (maxSegment.value - 0) / (xMax - xMin);
                         barX = baselineX;
@@ -1126,7 +968,6 @@ async function createHorizontalBarChart(data, options = {}) {
                 segments.forEach((segment, segIndex) => {
                     const segY = barY + (segIndex * (segmentHeight + groupSpacing));
                     const segCenterY = segY + segmentHeight / 2;
-                    // Calculate segment bar position and length
                     let segBarX, segBarEndX;
                     if (item.xStart !== undefined || item.xEnd !== undefined) {
                         const startValue = item.xStart ?? xMin;
@@ -1137,7 +978,6 @@ async function createHorizontalBarChart(data, options = {}) {
                         segBarEndX = originX + endRatio * chartAreaWidth;
                     }
                     else {
-                        // Calculate bar position based on positive/negative value
                         if (segment.value >= baseline) {
                             const positiveRatio = (segment.value - baseline) / (xMax - xMin);
                             segBarX = baselineX;
@@ -1150,12 +990,10 @@ async function createHorizontalBarChart(data, options = {}) {
                         }
                     }
                     const segBarLength = Math.abs(segBarEndX - segBarX);
-                    // Draw segment bar with gradient or color
                     ctx.beginPath();
                     ctx.rect(segBarX, segY, segBarLength, segmentHeight);
                     fillWithGradientOrColor(ctx, segment.gradient || item.gradient, segment.color || item.color || '#4A90E2', '#4A90E2', { x: segBarX, y: segY, w: segBarLength, h: segmentHeight });
                     ctx.fill();
-                    // Store value label for later drawing
                     const shouldShowValue = segment.showValue !== undefined ? segment.showValue : showValues;
                     if (shouldShowValue) {
                         labelsToDraw.push({
@@ -1172,10 +1010,8 @@ async function createHorizontalBarChart(data, options = {}) {
                 });
             }
             else {
-                // Stacked: bars on top of each other (horizontally stacked in horizontal chart)
                 let accumulatedLength = 0;
                 segments.forEach((segment, segIndex) => {
-                    // For stacked, separate positive and negative segments
                     let segmentLength;
                     let segBarX;
                     if (segment.value >= baseline) {
@@ -1188,10 +1024,8 @@ async function createHorizontalBarChart(data, options = {}) {
                         segmentLength = negativeRatio * chartAreaWidth;
                         segBarX = baselineX - accumulatedLength - segmentLength;
                     }
-                    // Draw segment bar
                     ctx.fillStyle = segment.color || item.color || '#4A90E2';
                     ctx.fillRect(segBarX, barY, segmentLength, calculatedBarHeight);
-                    // Store value label for later drawing
                     const shouldShowValue = segment.showValue !== undefined ? segment.showValue : showValues;
                     if (shouldShowValue && segmentLength > valueFontSize + 10) {
                         labelsToDraw.push({
@@ -1207,15 +1041,12 @@ async function createHorizontalBarChart(data, options = {}) {
                     }
                     accumulatedLength += segmentLength;
                 });
-                // Calculate overall bar bounds for label positioning
                 barX = originX;
                 barEndX = originX + accumulatedLength;
                 barLength = accumulatedLength;
-                // Store total value label for later drawing
                 const totalValue = segments.reduce((sum, seg) => sum + seg.value, 0);
                 const shouldShowValue = item.showValue !== undefined ? item.showValue : showValues;
                 if (shouldShowValue) {
-                    // Calculate total position
                     const totalPositive = segments.filter(s => s.value >= 0).reduce((sum, s) => sum + s.value, 0);
                     const totalNegative = segments.filter(s => s.value < 0).reduce((sum, s) => sum + Math.abs(s.value), 0);
                     const totalPositiveLength = (totalPositive / (xMax - xMin)) * chartAreaWidth;
@@ -1237,21 +1068,16 @@ async function createHorizontalBarChart(data, options = {}) {
             }
         }
         else if (chartType === 'lollipop') {
-            // Lollipop chart: line with dot at end (horizontal)
             const value = item.value ?? baseline;
-            // Calculate value X position
             let valueX;
             if (value >= baseline) {
-                // Value to the right of baseline
                 const positiveRatio = (value - baseline) / (xMax - xMin);
                 valueX = baselineX + positiveRatio * chartAreaWidth;
             }
             else {
-                // Value to the left of baseline
                 const negativeRatio = (baseline - value) / (xMax - xMin);
                 valueX = baselineX - negativeRatio * chartAreaWidth;
             }
-            // Draw horizontal line from baseline to value position
             ctx.save();
             ctx.strokeStyle = item.color || '#4A90E2';
             ctx.lineWidth = lollipopLineWidth;
@@ -1259,20 +1085,16 @@ async function createHorizontalBarChart(data, options = {}) {
             ctx.moveTo(baselineX, barCenterY);
             ctx.lineTo(valueX, barCenterY);
             ctx.stroke();
-            // Draw dot/circle at value position
             ctx.fillStyle = item.color || '#4A90E2';
             ctx.beginPath();
             ctx.arc(valueX, barCenterY, lollipopDotSize / 2, 0, Math.PI * 2);
             ctx.fill();
-            // Draw dot border for better visibility
             ctx.strokeStyle = item.color || '#4A90E2';
             ctx.lineWidth = 1;
             ctx.stroke();
             ctx.restore();
-            // Store value label for later drawing
             const shouldShowValue = item.showValue !== undefined ? item.showValue : showValues;
             if (shouldShowValue) {
-                // Store value label position for this bar (for adjusting bar label position)
                 if (value >= baseline) {
                     valueLabelPositions.set(index, { x: valueX + lollipopDotSize / 2 + 5, fontSize: valueFontSize, align: 'left' });
                 }
@@ -1287,15 +1109,11 @@ async function createHorizontalBarChart(data, options = {}) {
                     fontSize: valueFontSize
                 });
             }
-            // Set bar bounds for label positioning
             barX = baselineX;
             barEndX = valueX;
             barLength = Math.abs(barEndX - barX);
         }
         else {
-            // Standard chart: single bar
-            // Calculate bar position and length
-            // If xStart/xEnd are provided, use them for bar range; otherwise use value
             if (item.xStart !== undefined || item.xEnd !== undefined) {
                 const startValue = item.xStart ?? xMin;
                 const endValue = item.xEnd ?? (item.value ?? 0);
@@ -1305,7 +1123,6 @@ async function createHorizontalBarChart(data, options = {}) {
                 barEndX = originX + endRatio * chartAreaWidth;
             }
             else {
-                // Use value as end position, handle relative to baseline
                 const value = item.value ?? baseline;
                 if (value >= baseline) {
                     const positiveRatio = (value - baseline) / (xMax - xMin);
@@ -1319,18 +1136,15 @@ async function createHorizontalBarChart(data, options = {}) {
                 }
             }
             barLength = barEndX - barX;
-            // Draw horizontal bar
             ctx.beginPath();
             ctx.rect(barX, barY, barLength, calculatedBarHeight);
             fillWithGradientOrColor(ctx, item.gradient, item.color || '#4A90E2', '#4A90E2', { x: barX, y: barY, w: barLength, h: calculatedBarHeight });
             ctx.fill();
-            // Store value label for later drawing
             const shouldShowValue = item.showValue !== undefined ? item.showValue : showValues;
             if (shouldShowValue) {
                 const value = item.value ?? baseline;
                 const valueLabelX = value >= baseline ? barEndX + 5 : barX - 5;
                 const valueLabelAlign = value >= baseline ? 'left' : 'right';
-                // Store value label position for this bar (for adjusting bar label position)
                 if (value >= baseline) {
                     valueLabelPositions.set(index, { x: valueLabelX, fontSize: valueFontSize, align: valueLabelAlign });
                 }
@@ -1346,7 +1160,6 @@ async function createHorizontalBarChart(data, options = {}) {
                 });
             }
         }
-        // Store bar label information for later drawing
         if (showBarLabels) {
             let labelX, labelY;
             let textAlign = 'right';
@@ -1362,16 +1175,13 @@ async function createHorizontalBarChart(data, options = {}) {
                 case 'right':
                     labelX = barEndX + 5;
                     labelY = barCenterY;
-                    // Check if there's a value label at the right - if so, position bar label to the right of it
                     const valueLabelInfo = valueLabelPositions.get(index);
                     if (valueLabelInfo && valueLabelInfo.align === 'left') {
-                        // Value label is at right, so position bar label to the right of it
-                        // Calculate spacing: value label width + gap
                         ctx.save();
                         ctx.font = `${valueLabelInfo.fontSize}px Arial`;
                         const valueLabelWidth = ctx.measureText((item.value ?? baseline).toString()).width;
                         ctx.restore();
-                        const spacing = 5; // Gap between value and bar label
+                        const spacing = 5;
                         labelX = valueLabelInfo.x + valueLabelWidth + spacing;
                     }
                     else {
@@ -1382,11 +1192,6 @@ async function createHorizontalBarChart(data, options = {}) {
                     break;
                 case 'top':
                     labelX = barX + barLength / 2;
-                    // Check if there's a value label - for horizontal charts, value labels are at the end (right side)
-                    // So 'top' bar label won't conflict with value labels (they're on different axes)
-                    // But we still need to check if value is shown and adjust if needed
-                    // For horizontal charts, 'top' means above the bar, value labels are at the end
-                    // So no conflict, but if we want to be safe, we can check
                     labelY = barY - 5;
                     textAlign = 'center';
                     textBaseline = 'bottom';
@@ -1409,8 +1214,6 @@ async function createHorizontalBarChart(data, options = {}) {
                     textAlign = 'right';
                     textBaseline = 'middle';
             }
-            // Calculate label color (for 'inside' position, check if bar is dark)
-            // Use item.labelColor if provided, otherwise fall back to barLabelDefaults.defaultColor
             const defaultBarLabelColor = options.labels?.barLabelDefaults?.defaultColor ?? '#000000';
             let labelColor = item.labelColor || defaultBarLabelColor;
             if (currentLabelPosition === 'inside') {
@@ -1431,12 +1234,10 @@ async function createHorizontalBarChart(data, options = {}) {
             });
         }
     });
-    // Second pass: Draw all labels (values and bar labels) on top of everything
     for (const label of labelsToDraw) {
         ctx.save();
         ctx.textAlign = label.align;
         ctx.textBaseline = label.baseline;
-        // Determine text style and gradient based on label type
         let textStyle;
         let textGradient;
         if (label.type === 'bar') {