apexify.js 5.2.2 → 5.2.6

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

@@ -13,7 +13,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;
@@ -25,10 +24,8 @@ async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textG
         fontString += 'italic ';
     fontString += `${effectiveFontSize}px "${fontFamily}"`;
     ctx.font = fontString;
-    // 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');
@@ -41,7 +38,6 @@ async function renderEnhancedText(ctx, text, x, y, style, fontSize, color, textG
             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 +47,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 +56,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 +68,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;
@@ -99,10 +91,8 @@ function fillWithGradientOrColor(ctx, gradient, color, defaultColor = '#000000',
  */
 function drawBar(ctx, x, y, width, height, color, gradient, opacity, shadow, stroke, globalShadow, globalStroke) {
     ctx.save();
-    // Apply opacity
     const effectiveOpacity = opacity !== undefined ? opacity : 1;
     ctx.globalAlpha = effectiveOpacity;
-    // Apply shadow (segment/item shadow takes precedence over global)
     const effectiveShadow = shadow || globalShadow;
     if (effectiveShadow) {
         ctx.shadowColor = effectiveShadow.color || 'rgba(0,0,0,0.3)';
@@ -110,7 +100,6 @@ function drawBar(ctx, x, y, width, height, color, gradient, opacity, shadow, str
         ctx.shadowOffsetY = effectiveShadow.offsetY ?? 2;
         ctx.shadowBlur = effectiveShadow.blur ?? 4;
     }
-    // Draw bar fill
     ctx.beginPath();
     ctx.rect(x, y, width, height);
     if (gradient) {
@@ -120,14 +109,12 @@ function drawBar(ctx, x, y, width, height, color, gradient, opacity, shadow, str
         ctx.fillStyle = color;
     }
     ctx.fill();
-    // Reset shadow before stroke
     if (effectiveShadow) {
         ctx.shadowColor = 'transparent';
         ctx.shadowOffsetX = 0;
         ctx.shadowOffsetY = 0;
         ctx.shadowBlur = 0;
     }
-    // Apply stroke (segment/item stroke takes precedence over global)
     const effectiveStroke = stroke || globalStroke;
     if (effectiveStroke && effectiveStroke.width && effectiveStroke.width > 0) {
         ctx.beginPath();
@@ -174,62 +161,48 @@ function drawYAxisTicks(ctx, originX, originY, axisEndY, minValue, maxValue, ste
     ctx.textBaseline = 'middle';
     const chartHeight = originY - axisEndY;
     if (customValues && customValues.length > 0) {
-        // Use custom Y-axis values
         const actualMin = Math.min(...customValues);
         const actualMax = Math.max(...customValues);
         const range = actualMax - actualMin;
-        // Always position ticks based on their actual values
-        // valueSpacing is used only to prevent label overlap (skip labels that are too close)
         let lastLabelY = Infinity;
-        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 30; // Minimum pixels between labels
+        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 30;
         customValues.forEach((value) => {
             const y = originY - ((value - actualMin) / range) * chartHeight;
-            // Check if this label would overlap with the previous one
             if (Math.abs(y - lastLabelY) < minLabelSpacing) {
-                // Skip this label to prevent overlap, but still draw the tick mark
                 ctx.beginPath();
                 ctx.moveTo(originX - 5, y);
                 ctx.lineTo(originX, y);
                 ctx.stroke();
                 return;
             }
-            // Draw tick mark
             ctx.beginPath();
             ctx.moveTo(originX - 5, y);
             ctx.lineTo(originX, y);
             ctx.stroke();
-            // Draw label
             ctx.fillText(value.toFixed(1), originX - 10, y);
-            lastLabelY = y; // Update last label position
+            lastLabelY = y;
         });
     }
     else {
-        // Use regular step-based ticks
         const range = maxValue - minValue;
-        // Always position ticks based on their actual values
-        // valueSpacing is used only to prevent label overlap (skip labels that are too close)
         let lastLabelY = Infinity;
-        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 30; // Minimum pixels between labels
+        const minLabelSpacing = valueSpacing && valueSpacing > 0 ? valueSpacing : 30;
         for (let value = minValue; value <= maxValue; value += step) {
             const y = originY - ((value - minValue) / range) * chartHeight;
-            // Check if this label would overlap with the previous one
             if (Math.abs(y - lastLabelY) < 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);
                 ctx.stroke();
                 continue;
             }
-            // Draw tick mark
             ctx.beginPath();
             ctx.moveTo(originX - 5, y);
             ctx.lineTo(originX, y);
             ctx.stroke();
-            // Draw label
             const labelText = value.toFixed(1);
             ctx.fillText(labelText, originX - 10, y);
-            lastLabelY = y; // Update last label position
+            lastLabelY = y;
         }
     }
     ctx.restore();
@@ -245,98 +218,76 @@ function drawXAxisTicks(ctx, originX, originY, axisEndX, minValue, maxValue, ste
     ctx.textBaseline = 'top';
     const chartWidth = axisEndX - originX;
     if (customValues && customValues.length > 0) {
-        // Use custom X-axis values
         if (valueSpacing && valueSpacing > 0) {
-            // Use specified spacing - position ticks with exact pixel spacing
             let currentX = originX;
             customValues.forEach((value, index) => {
                 if (index === 0) {
                     currentX = originX;
                 }
                 else {
-                    currentX += valueSpacing; // Move right by spacing amount
+                    currentX += valueSpacing;
                 }
-                // Clamp to chart area
                 if (currentX >= originX && currentX <= axisEndX) {
-                    // Draw tick mark
                     ctx.beginPath();
                     ctx.moveTo(currentX, originY);
                     ctx.lineTo(currentX, originY + 5);
                     ctx.stroke();
-                    // Draw label
                     ctx.fillText(value.toString(), currentX, originY + 10);
                 }
             });
         }
         else {
-            // Use index-based positioning (original behavior)
-            // But check for label overlap and skip labels if they're too close
             const totalValues = customValues.length;
             const divisor = totalValues > 1 ? totalValues - 1 : 1;
             let lastLabelX = -Infinity;
-            const minLabelSpacing = 40; // Minimum pixels between label centers
+            const minLabelSpacing = 40;
             customValues.forEach((value, index) => {
-                // Position based on index in the array, not the numeric value
                 const x = originX + (index / divisor) * chartWidth;
                 const labelText = value.toString();
                 const labelWidth = ctx.measureText(labelText).width;
-                // Check if this label would overlap with the previous one
                 if (x - lastLabelX < minLabelSpacing && index > 0) {
-                    // Skip this label to prevent overlap
                     return;
                 }
-                // Draw tick mark
                 ctx.beginPath();
                 ctx.moveTo(x, originY);
                 ctx.lineTo(x, originY + 5);
                 ctx.stroke();
-                // Draw label
                 ctx.fillText(labelText, x, originY + 10);
-                lastLabelX = x + labelWidth / 2; // Update last label position
+                lastLabelX = x + labelWidth / 2;
             });
         }
     }
     else {
-        // Use regular step-based ticks
         const range = maxValue - minValue;
         if (valueSpacing && valueSpacing > 0) {
-            // Use specified spacing - only show ticks that fit with spacing
             let currentX = originX;
             let currentValue = minValue;
             while (currentX <= axisEndX && currentValue <= maxValue) {
-                // Draw tick mark
                 ctx.beginPath();
                 ctx.moveTo(currentX, originY);
                 ctx.lineTo(currentX, originY + 5);
                 ctx.stroke();
-                // Draw label
                 ctx.fillText(currentValue.toString(), currentX, originY + 10);
                 currentX += valueSpacing;
                 currentValue += step;
             }
         }
         else {
-            // Original behavior - evenly distribute based on value
-            // But check for label overlap and skip labels if they're too close
             let lastLabelX = -Infinity;
-            const minLabelSpacing = 40; // Minimum pixels between label centers
+            const minLabelSpacing = 40;
             for (let value = minValue; value <= maxValue; value += step) {
                 const x = originX + ((value - minValue) / range) * chartWidth;
                 const labelText = value.toString();
                 const labelWidth = ctx.measureText(labelText).width;
-                // Check if this label would overlap with the previous one
                 if (x - lastLabelX < minLabelSpacing && value > minValue) {
-                    // Skip this label to prevent overlap
                     continue;
                 }
-                // Draw tick mark
                 ctx.beginPath();
                 ctx.moveTo(x, originY);
                 ctx.lineTo(x, originY + 5);
                 ctx.stroke();
-                // Draw label
                 ctx.fillText(labelText, x, originY + 10);
-                lastLabelX = x + labelWidth / 2; // Update last label position
+                lastLabelX = x + labelWidth / 2;
             }
         }
     }
@@ -351,7 +302,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`;
@@ -411,12 +361,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;
@@ -427,7 +375,7 @@ async function drawLegendAtPosition(ctx, legend, legendX, legendY, fontSize, bac
         if (wrapTextEnabled && effectiveMaxWidth) {
             const wrappedLines = wrapText(ctx, entry.label, effectiveMaxWidth);
             textWidth = Math.max(...wrappedLines.map(line => ctx.measureText(line).width));
-            textHeight = wrappedLines.length * fontSize * 1.2; // Line height multiplier
+            textHeight = wrappedLines.length * fontSize * 1.2;
         }
         else {
             textWidth = ctx.measureText(entry.label).width;
@@ -439,16 +387,13 @@ 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 });
     ctx.fill();
-    // Draw legend border
     ctx.strokeStyle = effectiveBorderColor;
     ctx.lineWidth = 1;
     ctx.strokeRect(legendX, legendY, legendWidth, legendHeight);
-    // Draw legend entries
     ctx.textAlign = 'left';
     ctx.textBaseline = 'middle';
     ctx.fillStyle = effectiveTextColor;
@@ -457,16 +402,13 @@ 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 });
         ctx.fill();
-        // Draw box border
         ctx.strokeStyle = effectiveBorderColor;
         ctx.lineWidth = 1;
         ctx.strokeRect(legendX + padding, centerY - boxSize / 2, boxSize, boxSize);
-        // Draw label (with wrapping if enabled) using enhanced text
         const textX = legendX + padding + boxSize + textSpacing;
         if (wrapTextEnabled && effectiveMaxWidth) {
             const wrappedLines = wrapText(ctx, entry.label, effectiveMaxWidth);
@@ -493,7 +435,6 @@ async function drawLegend(ctx, legend, position, width, height, padding, fontSiz
     const boxSize = 15;
     const spacing = 10;
     const paddingBox = 8;
-    // Calculate legend dimensions
     ctx.font = `${fontSize}px Arial`;
     const maxLabelWidth = Math.max(...legend.map(e => ctx.measureText(e.label).width));
     const legendWidth = boxSize + spacing + maxLabelWidth + paddingBox * 2;
@@ -520,19 +461,15 @@ async function drawLegend(ctx, legend, position, width, height, padding, fontSiz
             legendX = width - padding.right - legendWidth - legendSpacing;
             legendY = padding.top + legendSpacing;
     }
-    // Determine text color based on background
     const isDarkBackground = backgroundColor === '#000000' || backgroundColor.toLowerCase() === 'black';
     const textColor = isDarkBackground ? '#FFFFFF' : '#000000';
     const bgColor = isDarkBackground ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)';
     const borderColor = isDarkBackground ? '#FFFFFF' : '#000000';
-    // Draw legend background
     ctx.fillStyle = bgColor;
     ctx.fillRect(legendX, legendY, legendWidth, legendHeight);
-    // Draw legend border
     ctx.strokeStyle = borderColor;
     ctx.lineWidth = 1;
     ctx.strokeRect(legendX, legendY, legendWidth, legendHeight);
-    // Draw legend entries
     ctx.font = `${fontSize}px Arial`;
     ctx.textAlign = 'left';
     ctx.textBaseline = 'middle';
@@ -540,16 +477,13 @@ async function drawLegend(ctx, legend, position, width, height, padding, fontSiz
         const entry = legend[index];
         const y = legendY + paddingBox + index * (boxSize + spacing) + boxSize / 2;
         const x = legendX + paddingBox;
-        // Draw color box (gradient or color)
         ctx.beginPath();
         ctx.rect(x, y - boxSize / 2, boxSize, boxSize);
         fillWithGradientOrColor(ctx, entry.gradient, entry.color || '#4A90E2', '#4A90E2', { x, y: y - boxSize / 2, w: boxSize, h: boxSize });
         ctx.fill();
-        // Draw box border
         ctx.strokeStyle = borderColor;
         ctx.lineWidth = 1;
         ctx.strokeRect(x, y - boxSize / 2, boxSize, boxSize);
-        // Draw label
         ctx.fillStyle = textColor;
         ctx.fillText(entry.label, x + boxSize + spacing, y);
     }
@@ -562,10 +496,9 @@ function drawGrid(ctx, originX, originY, axisEndX, axisEndY, xMin, xMax, xStep,
     ctx.save();
     ctx.strokeStyle = gridColor;
     ctx.lineWidth = gridWidth;
-    ctx.setLineDash([2, 2]); // Dashed lines for grid
+    ctx.setLineDash([2, 2]);
     const chartWidth = axisEndX - originX;
     const chartHeight = originY - axisEndY;
-    // Draw vertical grid lines (based on X-axis)
     if (xAxisCustomValues && xAxisCustomValues.length > 0) {
         const totalValues = xAxisCustomValues.length;
         const divisor = totalValues > 1 ? totalValues - 1 : 1;
@@ -587,7 +520,6 @@ function drawGrid(ctx, originX, originY, axisEndX, axisEndY, xMin, xMax, xStep,
             ctx.stroke();
         }
     }
-    // Draw horizontal grid lines (based on Y-axis)
     if (yAxisCustomValues && yAxisCustomValues.length > 0) {
         const actualMin = Math.min(...yAxisCustomValues);
         const actualMax = Math.max(...yAxisCustomValues);
@@ -620,15 +552,11 @@ function calculateResponsiveWidth(xAxisRange, options = {}, customValues) {
     const paddingLeft = padding.left ?? 100;
     const paddingRight = padding.right ?? 80;
     if (customValues && customValues.length > 0) {
-        // Calculate width based on number of custom values
-        // Use about 20-25 pixels per tick mark
         const minChartAreaWidth = Math.max(400, customValues.length * 20);
         return paddingLeft + minChartAreaWidth + paddingRight;
     }
-    // Calculate width based on X-axis range
-    // Use a reasonable scale: about 10-15 pixels per unit on X-axis
     const xRange = xAxisRange.max - xAxisRange.min;
-    const minChartAreaWidth = Math.max(400, xRange * 10); // At least 400px, or 10px per unit
+    const minChartAreaWidth = Math.max(400, xRange * 10);
     return paddingLeft + minChartAreaWidth + paddingRight;
 }
 /**
@@ -648,35 +576,27 @@ function drawAxes(width = 800, height = 600, options = {}) {
     const paddingRight = padding.right ?? 80;
     const paddingBottom = padding.bottom ?? 80;
     const paddingLeft = padding.left ?? 100;
-    // Create canvas
     const canvas = (0, canvas_1.createCanvas)(width, height);
     const ctx = canvas.getContext('2d');
-    // Fill white background
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, width, height);
-    // Calculate axis positions
     const originX = paddingLeft;
     const originY = height - paddingBottom;
     const axisEndX = width - paddingRight;
     const axisEndY = paddingTop;
-    // Set axis style
     ctx.strokeStyle = axisColor;
     ctx.fillStyle = axisColor;
     ctx.lineWidth = axisWidth;
     ctx.lineCap = 'round';
-    // Draw Y-axis (vertical line from origin to top)
     ctx.beginPath();
     ctx.moveTo(originX, originY);
     ctx.lineTo(originX, axisEndY);
     ctx.stroke();
-    // Draw X-axis (horizontal line from origin to right)
     ctx.beginPath();
     ctx.moveTo(originX, originY);
     ctx.lineTo(axisEndX, originY);
     ctx.stroke();
-    // Draw arrow on Y-axis (pointing up)
     drawArrow(ctx, originX, axisEndY, -Math.PI / 2, arrowSize);
-    // Draw arrow on X-axis (pointing right)
     drawArrow(ctx, axisEndX, originY, 0, arrowSize);
     return { buffer: canvas.toBuffer('image/png'), ctx, canvas };
 }
@@ -687,18 +607,14 @@ function drawAxes(width = 800, height = 600, options = {}) {
  * @returns Canvas buffer
  */
 async function createBarChart(data, options = {}) {
-    // Extract and map organized config to internal variables
-    // Dimensions
     const height = options.dimensions?.height ?? 600;
     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;
@@ -707,7 +623,6 @@ async function createBarChart(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';
@@ -715,23 +630,18 @@ async function createBarChart(data, options = {}) {
     const xAxisValues = options.axes?.x?.values;
     const yAxisRange = options.axes?.y?.range;
     const yAxisValues = options.axes?.y?.values;
-    const baseline = options.axes?.y?.baseline ?? 0; // Custom baseline value (default: 0)
+    const baseline = options.axes?.y?.baseline ?? 0;
     const tickFontSize = options.axes?.x?.tickFontSize ?? options.axes?.y?.tickFontSize ?? 12;
     const xAxisValueSpacing = options.axes?.x?.valueSpacing;
     const yAxisValueSpacing = options.axes?.y?.valueSpacing;
-    // Chart type
     const chartType = options.type ?? 'standard';
-    // Waterfall chart options
     const initialValue = options.waterfall?.initialValue ?? 0;
-    // 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;
-    // Bars
     const minBarWidth = options.bars?.minWidth ?? 20;
     const barSpacing = options.bars?.spacing;
     const groupSpacing = options.bars?.groupSpacing ?? 10;
@@ -745,11 +655,9 @@ async function createBarChart(data, options = {}) {
     const paddingRight = padding.right ?? 80;
     const paddingBottom = padding.bottom ?? 80;
     const paddingLeft = padding.left ?? 100;
-    // Determine X-axis range from custom values, options, or data
     let xMin, xMax;
     let xAxisCustomValues = xAxisValues;
     if (xAxisCustomValues && xAxisCustomValues.length > 0) {
-        // Use custom X-axis values
         xMin = Math.min(...xAxisCustomValues);
         xMax = Math.max(...xAxisCustomValues);
     }
@@ -758,7 +666,6 @@ async function createBarChart(data, options = {}) {
         xMax = xAxisRange.max;
     }
     else {
-        // Auto-calculate from data
         if (data.length === 0) {
             xMin = 0;
             xMax = 100;
@@ -768,20 +675,17 @@ async function createBarChart(data, options = {}) {
             const allXEnds = data.map(d => d.xEnd);
             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;
         }
     }
-    // Calculate responsive width based on X-axis range or custom values
     let baseWidth = calculateResponsiveWidth({ min: xMin, max: xMax }, options, xAxisCustomValues);
-    // 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;
@@ -790,16 +694,12 @@ async function createBarChart(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
         if (legendPosition === 'left') {
-            // Estimate Y-axis label width: measure potential large values
             const tempCanvas = (0, canvas_1.createCanvas)(1, 1);
             const tempCtx = tempCanvas.getContext('2d');
-            let estimatedYAxisLabelWidth = 60; // Default estimate
+            let estimatedYAxisLabelWidth = 60;
             if (tempCtx) {
                 tempCtx.font = `${tickFontSize}px Arial`;
-                // Get max value from data to estimate label width
                 const allValues = [];
                 data.forEach(d => {
                     if (d.values && d.values.length > 0) {
@@ -817,7 +717,6 @@ async function createBarChart(data, options = {}) {
                 if (allValues.length > 0) {
                     const maxValue = Math.max(...allValues);
                     const minValue = Math.min(...allValues);
-                    // Measure potential labels
                     const testLabels = [
                         maxValue.toFixed(1),
                         minValue.toFixed(1),
@@ -829,7 +728,6 @@ async function createBarChart(data, options = {}) {
                         estimatedYAxisLabelWidth = Math.max(estimatedYAxisLabelWidth, width);
                     });
                 }
-                // Add padding: 10px (label offset) + 5px (tick) + 15px (spacing) = 30px total
                 estimatedYAxisLabelWidth += 30;
             }
             extraWidth = legendWidth + legendSpacing + estimatedYAxisLabelWidth + minLegendSpacing;
@@ -843,19 +741,15 @@ async function createBarChart(data, options = {}) {
     }
     const width = baseWidth + extraWidth;
     const adjustedHeight = height + extraHeight;
-    // Create canvas
     const canvas = (0, canvas_1.createCanvas)(width, adjustedHeight);
     const ctx = canvas.getContext('2d');
-    // Fill background (gradient, image, or color)
     if (backgroundImage) {
         try {
             const bgImage = await (0, canvas_1.loadImage)(backgroundImage);
-            // Draw image to fill entire canvas
             ctx.drawImage(bgImage, 0, 0, width, adjustedHeight);
         }
         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: width, h: adjustedHeight
             });
@@ -868,10 +762,8 @@ async function createBarChart(data, options = {}) {
         });
         ctx.fillRect(0, 0, width, adjustedHeight);
     }
-    // Calculate axis positions
     const titleHeight = chartTitle ? chartTitleFontSize + 30 : 0;
     const axisLabelHeight = (xAxisLabel || yAxisLabel) ? axisLabelFontSize + 20 : 0;
-    // Adjust chart area based on legend position
     let chartAreaLeft = paddingLeft;
     let chartAreaRight = baseWidth - paddingRight;
     let chartAreaTop = paddingTop + titleHeight;
@@ -879,13 +771,11 @@ async function createBarChart(data, options = {}) {
     if (showLegend && legend && legend.length > 0) {
         const legendSpacing = options.legend?.spacing ?? 20;
         if (legendPosition === 'left') {
-            // Calculate actual Y-axis label width after we have value ranges
-            let actualYAxisLabelWidth = 60; // Default estimate
+            let actualYAxisLabelWidth = 60;
             const tempCanvas = (0, canvas_1.createCanvas)(1, 1);
             const tempCtx = tempCanvas.getContext('2d');
             if (tempCtx) {
                 tempCtx.font = `${tickFontSize}px Arial`;
-                // Use the calculated min/max values if available, otherwise estimate
                 const allValues = [];
                 data.forEach(d => {
                     if (d.values && d.values.length > 0) {
@@ -914,10 +804,8 @@ async function createBarChart(data, options = {}) {
                         actualYAxisLabelWidth = Math.max(actualYAxisLabelWidth, width);
                     });
                 }
-                // Add padding: 10px (label offset) + 5px (tick) + 15px (spacing)
                 actualYAxisLabelWidth += 30;
             }
-            // Position chart area to leave room for legend + Y-axis labels
             chartAreaLeft = paddingLeft + legendWidth + legendSpacing + actualYAxisLabelWidth;
             chartAreaRight = baseWidth - paddingRight;
         }
@@ -938,37 +826,27 @@ async function createBarChart(data, options = {}) {
     const originY = chartAreaBottom - axisLabelHeight;
     const axisEndX = chartAreaRight;
     const axisEndY = chartAreaTop;
-    // Draw chart title if provided
     if (chartTitle) {
         ctx.save();
         ctx.textAlign = 'center';
         ctx.textBaseline = 'top';
-        // Title positioned with proper spacing from top
         const titleY = paddingTop + 10;
         const titleX = width / 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';
-    // Draw Y-axis
     ctx.beginPath();
     ctx.moveTo(originX, originY);
     ctx.lineTo(originX, axisEndY);
     ctx.stroke();
-    // Draw arrows (X-axis will be drawn after calculating zero line)
     drawArrow(ctx, originX, axisEndY, -Math.PI / 2, arrowSize);
-    // Calculate Y-axis value ranges
-    // For grouped charts: find max value across all segments
-    // For stacked charts: find max sum of values per category
-    // For waterfall charts: find cumulative min/max across all bars
     let allValues = [];
     if (chartType === 'grouped' || chartType === 'stacked' || chartType === 'waterfall') {
         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));
@@ -979,24 +857,20 @@ async function createBarChart(data, options = {}) {
             });
         }
         else if (chartType === 'waterfall') {
-            // For waterfall: calculate all cumulative values (initial + each step's cumulative total)
             let cumulativeValue = initialValue;
-            allValues.push(initialValue); // Include initial value
+            allValues.push(initialValue);
             data.forEach(d => {
                 if (d.values && d.values.length > 0) {
-                    // Sum all segments for this item
                     const itemTotal = d.values.reduce((sum, seg) => sum + seg.value, 0);
                     cumulativeValue += itemTotal;
                 }
                 else if (d.value !== undefined) {
                     cumulativeValue += d.value;
                 }
-                // Add each cumulative total to allValues
                 allValues.push(cumulativeValue);
             });
         }
         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);
@@ -1009,7 +883,6 @@ async function createBarChart(data, options = {}) {
         }
     }
     else {
-        // Standard chart: use value directly
         allValues = data.map(d => d.value ?? 0).filter(v => v !== undefined && v !== null);
     }
     let minValue, maxValue, yStep;
@@ -1017,28 +890,21 @@ async function createBarChart(data, options = {}) {
     const hasExplicitYRange = yAxisRange && yAxisRange.min !== undefined && yAxisRange.max !== undefined;
     const hasExplicitXRange = xAxisRange && xAxisRange.min !== undefined && xAxisRange.max !== undefined;
     if (yAxisCustomValues && yAxisCustomValues.length > 0) {
-        // Use custom Y-axis values
         minValue = Math.min(...yAxisCustomValues);
         maxValue = Math.max(...yAxisCustomValues);
-        yStep = 1; // Not used when custom values are provided
+        yStep = 1;
     }
     else if (hasExplicitYRange) {
-        // Use Y-axis range, but for waterfall charts, ensure it includes all cumulative values
-        // TypeScript narrowing: hasExplicitYRange ensures min and max are defined
         minValue = yAxisRange.min;
         maxValue = yAxisRange.max;
-        // Ensure baseline is within range
         const effectiveBaseline = baseline !== undefined ? baseline : 0;
         minValue = Math.min(minValue, effectiveBaseline);
         maxValue = Math.max(maxValue, effectiveBaseline);
-        // For waterfall charts, expand range if needed to include all cumulative values
         if (chartType === 'waterfall' && allValues.length > 0) {
             const dataMin = Math.min(...allValues);
             const dataMax = Math.max(...allValues);
-            // Ensure the range includes all data values
             minValue = Math.min(minValue, dataMin);
             maxValue = Math.max(maxValue, dataMax);
-            // Add padding, but ensure baseline is always included
             const range = maxValue - minValue;
             const padding = range * 0.1;
             minValue = Math.min(minValue - padding, effectiveBaseline);
@@ -1047,20 +913,16 @@ async function createBarChart(data, options = {}) {
         yStep = yAxisRange.step ?? Math.ceil((maxValue - minValue) / 10);
     }
     else {
-        // Auto-calculate from data
         if (allValues.length > 0) {
             minValue = Math.min(...allValues);
             maxValue = Math.max(...allValues);
-            // Ensure baseline is within range for waterfall charts
             if (chartType === 'waterfall') {
                 minValue = Math.min(minValue, initialValue);
                 maxValue = Math.max(maxValue, initialValue);
             }
-            // Add some padding, but ensure baseline is always included in the range
             const range = maxValue - minValue;
             const padding = range * 0.1;
             const effectiveBaseline = baseline !== undefined ? baseline : 0;
-            // Ensure baseline is within the range
             minValue = Math.min(minValue - padding, effectiveBaseline);
             maxValue = maxValue + padding;
         }
@@ -1070,7 +932,6 @@ async function createBarChart(data, options = {}) {
         }
         yStep = Math.ceil((maxValue - minValue) / 10);
     }
-    // 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;
@@ -1110,7 +971,6 @@ async function createBarChart(data, options = {}) {
                 }
             }
             else if (chartType === 'waterfall') {
-                // For waterfall, check individual segment values and cumulative totals
                 if (item.values && item.values.length > 0) {
                     item.values.forEach((seg, segIndex) => {
                         if (seg.value < effectiveYMin || seg.value > effectiveYMax) {
@@ -1129,7 +989,6 @@ async function createBarChart(data, options = {}) {
                 }
             }
             else {
-                // Standard chart
                 if (item.value !== undefined && (item.value < effectiveYMin || item.value > effectiveYMax)) {
                     throw new Error(`Bar Chart Error: Data value out of Y-axis bounds.\n` +
                         `Bar ${itemIndex} "${item.label || `at index ${itemIndex}`}" has value ${item.value}, ` +
@@ -1138,37 +997,26 @@ async function createBarChart(data, options = {}) {
             }
         });
     }
-    // Draw Y-axis ticks and labels (with custom values if provided)
     drawYAxisTicks(ctx, originX, originY, axisEndY, minValue, maxValue, yStep, tickFontSize, yAxisCustomValues, yAxisValueSpacing);
-    // Calculate chart area dimensions (needed for baseline calculation)
     const chartAreaHeight = originY - axisEndY;
-    // Calculate baseline position (custom baseline value, default is 0)
-    // Position the baseline within the chart area based on minValue, maxValue, and baseline
     const baselineY = originY - ((baseline - minValue) / (maxValue - minValue)) * chartAreaHeight;
-    // Draw X-axis at baseline position
     const xAxisY = baselineY;
     ctx.beginPath();
     ctx.moveTo(originX, xAxisY);
     ctx.lineTo(axisEndX, xAxisY);
     ctx.stroke();
-    // Draw X-axis arrow
     drawArrow(ctx, axisEndX, xAxisY, 0, arrowSize);
-    // Calculate X-axis step
     const xStep = xAxisRange?.step ?? Math.ceil((xMax - xMin) / 10);
-    // Draw X-axis ticks and labels at baseline position
     drawXAxisTicks(ctx, originX, xAxisY, axisEndX, xMin, xMax, xStep, tickFontSize, xAxisCustomValues, xAxisValueSpacing);
-    // Draw grid lines if enabled (before calculating zero line, but will use correct Y position)
     if (showGrid) {
         drawGrid(ctx, originX, originY, axisEndX, axisEndY, xMin, xMax, xStep, minValue, maxValue, yStep, xAxisCustomValues, yAxisCustomValues, gridColor, gridWidth);
     }
-    // Draw X-axis label if provided
     if (xAxisLabel) {
         ctx.save();
         ctx.fillStyle = axisLabelColor;
         ctx.font = `${axisLabelFontSize}px Arial`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'top';
-        // Position label below X-axis ticks (ticks are at xAxisY + 10, so add more spacing)
         ctx.fillText(xAxisLabel, (originX + axisEndX) / 2, xAxisY + 25);
         ctx.restore();
     }
@@ -1178,7 +1026,6 @@ async function createBarChart(data, options = {}) {
         ctx.font = `${axisLabelFontSize}px Arial`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
-        // Rotate for vertical text
         const labelX = originX - 30;
         const labelY = (originY + axisEndY) / 2;
         ctx.translate(labelX, labelY);
@@ -1186,7 +1033,6 @@ async function createBarChart(data, options = {}) {
         ctx.fillText(yAxisLabel, 0, 0);
         ctx.restore();
     }
-    // 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;
@@ -1196,111 +1042,85 @@ async function createBarChart(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 = (width - legendWidth) / 2; // Centered horizontally
+                legendX = (width - legendWidth) / 2;
                 legendY = paddingTop + titleHeight + minLegendSpacing;
                 break;
             case 'bottom':
-                legendX = (width - legendWidth) / 2; // Centered horizontally
+                legendX = (width - legendWidth) / 2;
                 legendY = adjustedHeight - paddingBottom - legendHeight - minLegendSpacing;
                 break;
             case 'left':
-                // Position legend further left to make room for Y-axis labels
-                // Position legend on the left side
                 legendX = paddingLeft + minLegendSpacing;
-                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
     const chartAreaWidth = axisEndX - originX;
     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, itemIndex) => {
-        // Calculate bar position and width based on X-axis range
-        // If custom X-axis values are provided, map to those positions
         let barXStart, barXEnd;
         if (xAxisCustomValues && xAxisCustomValues.length > 0) {
-            // Map to custom X-axis values
             const actualMin = Math.min(...xAxisCustomValues);
             const actualMax = Math.max(...xAxisCustomValues);
             const xRange = actualMax - actualMin;
-            // Find the position of xStart and xEnd in the custom values array
-            // If xStart equals xEnd, it's a single-position bar
             const startIndex = xAxisCustomValues.indexOf(item.xStart);
             const endIndex = xAxisCustomValues.indexOf(item.xEnd);
             if (startIndex !== -1 && endIndex !== -1) {
-                // Both values found in custom array - use index-based positioning
                 const totalValues = xAxisCustomValues.length;
                 const divisor = totalValues > 1 ? totalValues - 1 : 1;
                 barXStart = originX + (startIndex / divisor) * chartAreaWidth;
                 barXEnd = originX + (endIndex / divisor) * chartAreaWidth;
             }
             else {
-                // Fallback to range-based positioning
                 barXStart = originX + ((item.xStart - actualMin) / xRange) * chartAreaWidth;
                 barXEnd = originX + ((item.xEnd - actualMin) / xRange) * chartAreaWidth;
             }
         }
         else {
-            // Use regular range mapping
             const xRange = xMax - xMin;
             barXStart = originX + ((item.xStart - xMin) / xRange) * chartAreaWidth;
             barXEnd = originX + ((item.xEnd - xMin) / xRange) * chartAreaWidth;
         }
-        // If xStart equals xEnd, use a minimum bar width
         const groupWidth = Math.max(barXEnd - barXStart, minBarWidth);
         if (item.xStart === item.xEnd) {
-            // Center the bar at the position
             const centerX = barXStart;
             barXStart = centerX - groupWidth / 2;
         }
-        // Handle grouped/stacked/waterfall vs standard charts
         if ((chartType === 'grouped' || chartType === 'stacked' || chartType === 'waterfall') && item.values && item.values.length > 0) {
-            // Grouped, stacked, or waterfall chart
             const segments = item.values;
             const numSegments = segments.length;
             if (chartType === 'grouped') {
-                // Grouped: bars side-by-side
                 const segmentWidth = (groupWidth - (groupSpacing * (numSegments - 1))) / numSegments;
-                // Track the highest value label Y position for this grouped bar
                 let highestValueLabelY = null;
                 segments.forEach((segment, segIndex) => {
                     const segXStart = barXStart + (segIndex * (segmentWidth + groupSpacing));
-                    // Calculate bar position relative to baseline
                     let barY, barHeight;
                     if (segment.value >= baseline) {
-                        // Bar extends above baseline
                         const positiveRatio = (segment.value - baseline) / (maxValue - minValue);
                         barHeight = positiveRatio * chartAreaHeight;
                         barY = baselineY - barHeight;
                     }
                     else {
-                        // Bar extends below baseline
                         const negativeRatio = (baseline - segment.value) / (maxValue - minValue);
                         barHeight = negativeRatio * chartAreaHeight;
                         barY = baselineY;
                     }
-                    // Draw segment bar with gradient, opacity, shadow, and stroke
                     drawBar(ctx, segXStart, barY, segmentWidth, barHeight, segment.color || item.color || '#4A90E2', segment.gradient || item.gradient, segment.opacity ?? item.opacity ?? globalBarOpacity, segment.shadow || item.shadow, segment.stroke || item.stroke, globalBarShadow, globalBarStroke);
-                    // Store value label for later drawing
                     const shouldShowValue = segment.showValue !== undefined ? segment.showValue : showValues;
                     if (shouldShowValue) {
                         const valueLabelY = barY - 5;
-                        // Track the highest (smallest Y value = highest on screen) value label
                         if (segment.value >= baseline && (highestValueLabelY === null || valueLabelY < highestValueLabelY)) {
                             highestValueLabelY = valueLabelY;
                         }
@@ -1316,20 +1136,16 @@ async function createBarChart(data, options = {}) {
                         });
                     }
                 });
-                // Store the highest value label position for this grouped bar (for adjusting bar label position)
                 if (highestValueLabelY !== null) {
                     valueLabelPositions.set(data.indexOf(item), { y: highestValueLabelY, fontSize: valueFontSize, baseline: 'bottom' });
                 }
             }
             else if (chartType === 'waterfall') {
-                // Waterfall: each bar starts from cumulative total of previous bars
-                // Calculate cumulative value up to this point
                 let cumulativeValue = initialValue;
                 const currentIndex = data.indexOf(item);
                 for (let i = 0; i < currentIndex; i++) {
                     const prevItem = data[i];
                     if (prevItem.values && prevItem.values.length > 0) {
-                        // Sum all segments for previous item
                         const prevTotal = prevItem.values.reduce((sum, seg) => sum + seg.value, 0);
                         cumulativeValue += prevTotal;
                     }
@@ -1337,9 +1153,7 @@ async function createBarChart(data, options = {}) {
                         cumulativeValue += prevItem.value;
                     }
                 }
-                // Calculate baseline Y position for this cumulative value
                 const cumulativeBaselineY = originY - ((cumulativeValue - minValue) / (maxValue - minValue)) * chartAreaHeight;
-                // Separate positive and negative segments
                 const positiveSegments = [];
                 const negativeSegments = [];
                 segments.forEach(seg => {
@@ -1350,17 +1164,14 @@ async function createBarChart(data, options = {}) {
                         negativeSegments.push(seg);
                     }
                 });
-                // Draw positive segments (stacked upward from cumulative baseline)
                 let accumulatedPositiveHeight = 0;
                 positiveSegments.forEach((segment) => {
                     const positiveRatio = segment.value / (maxValue - minValue);
                     const segmentHeight = positiveRatio * chartAreaHeight;
                     const barY = cumulativeBaselineY - accumulatedPositiveHeight - segmentHeight;
-                    // Ensure bar stays within chart area bounds
                     const clampedBarY = Math.max(axisEndY, barY);
                     const clampedBarHeight = Math.min(segmentHeight, cumulativeBaselineY - accumulatedPositiveHeight - clampedBarY);
                     if (clampedBarHeight > 0) {
-                        // Ensure bar doesn't exceed X-axis bounds
                         const clampedBarXStart = Math.max(originX, Math.min(barXStart, axisEndX));
                         const clampedGroupWidth = Math.min(groupWidth, axisEndX - clampedBarXStart);
                         if (clampedGroupWidth > 0) {
@@ -1382,17 +1193,14 @@ async function createBarChart(data, options = {}) {
                     }
                     accumulatedPositiveHeight += segmentHeight;
                 });
-                // Draw negative segments (stacked downward from cumulative baseline)
                 let accumulatedNegativeHeight = 0;
                 negativeSegments.forEach((segment) => {
                     const negativeRatio = Math.abs(segment.value) / (maxValue - minValue);
                     const segmentHeight = negativeRatio * chartAreaHeight;
                     const barY = cumulativeBaselineY + accumulatedNegativeHeight;
-                    // Ensure bar stays within chart area bounds
                     const clampedBarY = Math.max(barY, axisEndY);
                     const clampedBarHeight = Math.min(segmentHeight, originY - clampedBarY);
                     if (clampedBarHeight > 0) {
-                        // Ensure bar doesn't exceed X-axis bounds
                         const clampedBarXStart = Math.max(originX, Math.min(barXStart, axisEndX));
                         const clampedGroupWidth = Math.min(groupWidth, axisEndX - clampedBarXStart);
                         if (clampedGroupWidth > 0) {
@@ -1416,8 +1224,6 @@ async function createBarChart(data, options = {}) {
                 });
             }
             else {
-                // Stacked: bars on top of each other
-                // For stacked with negatives, we need to separate positive and negative segments
                 const positiveSegments = [];
                 const negativeSegments = [];
                 segments.forEach(seg => {
@@ -1428,7 +1234,6 @@ async function createBarChart(data, options = {}) {
                         negativeSegments.push(seg);
                     }
                 });
-                // Draw positive segments (stacked upward from baseline)
                 let accumulatedPositiveHeight = 0;
                 positiveSegments.forEach((segment) => {
                     const positiveRatio = (segment.value - baseline) / (maxValue - minValue);
@@ -1450,7 +1255,6 @@ async function createBarChart(data, options = {}) {
                     }
                     accumulatedPositiveHeight += segmentHeight;
                 });
-                // Draw negative segments (stacked downward from baseline)
                 let accumulatedNegativeHeight = 0;
                 negativeSegments.forEach((segment) => {
                     const negativeRatio = (baseline - segment.value) / (maxValue - minValue);
@@ -1472,13 +1276,11 @@ async function createBarChart(data, options = {}) {
                     }
                     accumulatedNegativeHeight += segmentHeight;
                 });
-                // 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) {
                     const totalValueY = totalValue >= baseline ? baselineY - accumulatedPositiveHeight - 5 : baselineY + accumulatedNegativeHeight + 5;
                     const totalValueBaseline = totalValue >= baseline ? 'bottom' : 'top';
-                    // Store value label position for this bar (for adjusting bar label position)
                     if (totalValue >= baseline) {
                         valueLabelPositions.set(data.indexOf(item), { y: totalValueY, fontSize: valueFontSize, baseline: totalValueBaseline });
                     }
@@ -1496,22 +1298,17 @@ async function createBarChart(data, options = {}) {
             }
         }
         else if (chartType === 'lollipop') {
-            // Lollipop chart: line with dot at end
             const barCenterX = barXStart + groupWidth / 2;
             const value = item.value ?? baseline;
-            // Calculate value Y position
             let valueY;
             if (value >= baseline) {
-                // Value above baseline
                 const positiveRatio = (value - baseline) / (maxValue - minValue);
                 valueY = baselineY - positiveRatio * chartAreaHeight;
             }
             else {
-                // Value below baseline
                 const negativeRatio = (baseline - value) / (maxValue - minValue);
                 valueY = baselineY + negativeRatio * chartAreaHeight;
             }
-            // Draw line from baseline to value position
             ctx.save();
             ctx.strokeStyle = item.color || '#4A90E2';
             ctx.lineWidth = lollipopLineWidth;
@@ -1519,13 +1316,11 @@ async function createBarChart(data, options = {}) {
             ctx.moveTo(barCenterX, baselineY);
             ctx.lineTo(barCenterX, valueY);
             ctx.stroke();
-            // Draw dot/circle at value position with opacity, shadow, and stroke
             ctx.save();
             const dotOpacity = item.opacity ?? globalBarOpacity;
             if (dotOpacity !== undefined) {
                 ctx.globalAlpha = dotOpacity;
             }
-            // Apply shadow
             const dotShadow = item.shadow || globalBarShadow;
             if (dotShadow) {
                 ctx.shadowColor = dotShadow.color || 'rgba(0,0,0,0.3)';
@@ -1537,14 +1332,12 @@ async function createBarChart(data, options = {}) {
             ctx.arc(barCenterX, valueY, lollipopDotSize / 2, 0, Math.PI * 2);
             fillWithGradientOrColor(ctx, item.gradient, item.color || '#4A90E2', '#4A90E2', { x: barCenterX - lollipopDotSize / 2, y: valueY - lollipopDotSize / 2, w: lollipopDotSize, h: lollipopDotSize });
             ctx.fill();
-            // Reset shadow before stroke
             if (dotShadow) {
                 ctx.shadowColor = 'transparent';
                 ctx.shadowOffsetX = 0;
                 ctx.shadowOffsetY = 0;
                 ctx.shadowBlur = 0;
             }
-            // Draw dot border/stroke
             const dotStroke = item.stroke || globalBarStroke;
             if (dotStroke && dotStroke.width && dotStroke.width > 0) {
                 ctx.beginPath();
@@ -1564,13 +1357,11 @@ async function createBarChart(data, options = {}) {
                 ctx.stroke();
             }
             else {
-                // Default border for better visibility if no stroke specified
                 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) {
                 labelsToDraw.push({
@@ -1586,32 +1377,25 @@ async function createBarChart(data, options = {}) {
             }
         }
         else {
-            // Standard chart: single bar
             const barWidth = groupWidth;
             const value = item.value ?? baseline;
-            // Calculate bar height and position based on value relative to baseline
             let barHeight;
             let barY;
             if (value >= baseline) {
-                // Value above baseline: bar goes up from baseline
                 const positiveRatio = (value - baseline) / (maxValue - minValue);
                 barHeight = positiveRatio * chartAreaHeight;
                 barY = baselineY - barHeight;
             }
             else {
-                // Value below baseline: bar goes down from baseline
                 const negativeRatio = (baseline - value) / (maxValue - minValue);
                 barHeight = negativeRatio * chartAreaHeight;
                 barY = baselineY;
             }
-            // Draw bar with gradient, opacity, shadow, and stroke
             drawBar(ctx, barXStart, barY, barWidth, barHeight, item.color || '#4A90E2', item.gradient, item.opacity ?? globalBarOpacity, item.shadow, item.stroke, globalBarShadow, globalBarStroke);
-            // Store value label for later drawing
             const shouldShowValue = item.showValue !== undefined ? item.showValue : showValues;
             if (shouldShowValue) {
                 const valueLabelY = value >= baseline ? barY - 5 : barY + barHeight + 5;
                 const valueLabelBaseline = value >= baseline ? 'bottom' : 'top';
-                // Store value label position for this bar (for adjusting bar label position)
                 if (value >= baseline) {
                     valueLabelPositions.set(data.indexOf(item), { y: valueLabelY, fontSize: valueFontSize, baseline: valueLabelBaseline });
                 }
@@ -1627,7 +1411,6 @@ async function createBarChart(data, options = {}) {
                 });
             }
         }
-        // Store bar label information for later drawing
         if (showBarLabels) {
             ctx.save();
             ctx.fillStyle = item.labelColor || '#000000';
@@ -1635,33 +1418,26 @@ async function createBarChart(data, options = {}) {
             let labelX, labelY;
             let textAlign = 'center';
             let textBaseline = 'middle';
-            // Calculate bar center - use groupWidth for all chart types
             const barCenterX = barXStart + groupWidth / 2;
-            // For grouped/stacked, calculate appropriate center Y
             let barCenterY;
             if ((chartType === 'grouped' || chartType === 'stacked') && item.values && item.values.length > 0) {
                 if (chartType === 'stacked') {
-                    // For stacked, use the total height
                     const totalValue = item.values.reduce((sum, seg) => sum + seg.value, 0);
                     const totalHeight = ((totalValue - minValue) / (maxValue - minValue)) * chartAreaHeight;
                     barCenterY = originY - totalHeight / 2;
                 }
                 else {
-                    // For grouped, use the max value height
                     const maxSegValue = Math.max(...item.values.map(seg => seg.value));
                     const maxHeight = ((maxSegValue - minValue) / (maxValue - minValue)) * chartAreaHeight;
                     barCenterY = originY - maxHeight / 2;
                 }
             }
             else {
-                // Standard chart
                 const value = item.value ?? 0;
                 const barHeight = ((value - minValue) / (maxValue - minValue)) * chartAreaHeight;
                 barCenterY = originY - barHeight / 2;
             }
-            // Use individual bar label position if provided, otherwise use global setting
             const currentLabelPosition = item.labelPosition ?? barLabelPosition;
-            // Calculate top Y position for label
             let topBarY;
             if ((chartType === 'grouped' || chartType === 'stacked') && item.values && item.values.length > 0) {
                 if (chartType === 'stacked') {
@@ -1683,13 +1459,9 @@ async function createBarChart(data, options = {}) {
             switch (currentLabelPosition) {
                 case 'top':
                     labelX = barCenterX;
-                    // Check if there's a value label at the top - if so, position bar label below it
                     const valueLabelInfo = valueLabelPositions.get(data.indexOf(item));
                     if (valueLabelInfo && valueLabelInfo.baseline === 'bottom') {
-                        // Value label is at top, so position bar label below it
-                        // Value label uses 'bottom' baseline, so its top is at valueLabelInfo.y
-                        // Bar label uses 'bottom' baseline, so position it below the value label
-                        const spacing = 5; // Gap between value and bar label
+                        const spacing = 5;
                         labelY = valueLabelInfo.y - valueLabelInfo.fontSize - spacing;
                     }
                     else {
@@ -1721,9 +1493,7 @@ async function createBarChart(data, options = {}) {
                     labelY = barCenterY;
                     textAlign = 'center';
                     textBaseline = 'middle';
-                    // Use white or black text based on bar color for better visibility
                     const barColor = item.color || '#4A90E2';
-                    // Simple brightness check - if bar is dark, use white text
                     const isDark = barColor === '#000000' || barColor.toLowerCase().includes('dark') ||
                         (barColor.startsWith('#') && parseInt(barColor.slice(1, 3), 16) < 128);
                     ctx.fillStyle = isDark ? '#FFFFFF' : (item.labelColor || '#000000');
@@ -1734,7 +1504,6 @@ async function createBarChart(data, options = {}) {
                     textAlign = 'center';
                     textBaseline = 'top';
             }
-            // Calculate label color (for 'inside' position, check if bar is dark)
             let labelColor = item.labelColor || '#000000';
             if (currentLabelPosition === 'inside') {
                 const barColor = item.color || '#4A90E2';
@@ -1742,7 +1511,6 @@ async function createBarChart(data, options = {}) {
                     (barColor.startsWith('#') && parseInt(barColor.slice(1, 3), 16) < 128);
                 labelColor = isDark ? '#FFFFFF' : (item.labelColor || '#000000');
             }
-            // Store bar label for later drawing
             labelsToDraw.push({
                 type: 'bar',
                 text: item.label,
@@ -1755,12 +1523,10 @@ async function createBarChart(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') {
@@ -1776,7 +1542,6 @@ async function createBarChart(data, options = {}) {
     }
     return canvas.toBuffer('image/png');
 }
-// Example usage with organized, categorized configuration:
 (async () => {
     const chart = await createBarChart([
         {
@@ -1813,9 +1578,7 @@ async function createBarChart(data, options = {}) {
             showValue: true
         }
     ], {
-        // Chart Type
-        type: 'standard', // 'standard' | 'grouped' | 'stacked' | 'horizontal'
-        // Dimensions
+        type: 'standard',
         dimensions: {
             height: 600,
             padding: {
@@ -1825,34 +1588,28 @@ async function createBarChart(data, options = {}) {
                 left: 100
             }
         },
-        // Appearance
         appearance: {
             backgroundColor: 'white',
-            // backgroundImage: './path/to/background.png', // Optional
             axisColor: '#000000',
             axisWidth: 2,
             arrowSize: 10
         },
-        // Axes Configuration
         axes: {
             x: {
                 label: 'Day',
                 labelColor: 'black',
                 values: [24, 25, 26, 27, 28, 29, 30, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
-                // OR use range: { min: 0, max: 100, step: 20 }
                 tickFontSize: 10,
-                valueSpacing: 5 // Pixel spacing between each tick value (e.g., 5px gap between value 1 and 2)
+                valueSpacing: 5
             },
             y: {
                 label: 'Count',
                 labelColor: 'black',
                 values: [0, 2, 4, 6, 8, 10, 12, 14],
-                // OR use range: { min: 0, max: 14, step: 2 }
                 tickFontSize: 10,
-                valueSpacing: 3 // Pixel spacing between each tick value (e.g., 3px gap between value 0 and 2)
+                valueSpacing: 3
             }
         },
-        // Labels & Text
         labels: {
             title: {
                 text: 'Joined Members',
@@ -1860,18 +1617,17 @@ async function createBarChart(data, options = {}) {
                 color: '#000000'
             },
             barLabelDefaults: {
-                show: true, // Global show/hide - each bar's label is defined in data
-                defaultPosition: 'bottom', // Default when bar doesn't specify labelPosition
+                show: true,
+                defaultPosition: 'bottom',
                 fontSize: 12,
-                defaultColor: '#000000' // Default when bar doesn't specify labelColor
+                defaultColor: '#000000'
             },
             valueLabelDefaults: {
-                show: true, // Global show/hide - each bar can override with showValue
+                show: true,
                 fontSize: 11,
-                defaultColor: '#000000' // Default when bar doesn't specify valueColor
+                defaultColor: '#000000'
             }
         },
-        // Legend (always positioned at top)
         legend: {
             show: true,
             entries: [
@@ -1879,7 +1635,6 @@ async function createBarChart(data, options = {}) {
                 { color: '#4A90E2', label: 'Bots' }
             ]
         },
-        // Grid
         grid: {
             show: true,
             color: '#E0E0E0',