@windborne/grapher 1.0.32 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windborne/grapher",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "description": "Graphing library",
   "main": "src/index.js",
   "module": "dist/bundle.esm.js",

package/readme.md

@@ -149,8 +149,10 @@ Grapher supports multiple data formats within a series:
 | background | `object` | ✗ | Background configuration. |
 | hideFromKey | `boolean` | ✗ | Whether to hide this series from the legend. |
 | showIndividualPoints | `boolean` | ✗ | Whether to show individual data points. |
-| negativeColor | `string` | ✗ | Color for negative values. |
-| gradient | `string[] \| [number, string][]` | ✗ | Gradient configuration, only applies to area rendering. |
+| minPointSpacing | `number` | ✗ | Minimum pixel spacing between individual points to prevent overlap. |
+| negativeColor | `string` | ✗ | Color for lines and points with negative values (below zero). |
+| gradient | `string[] \| [number, string][]` | ✗ | Gradient configuration for area and shadow fills. Array of colors or [position, color] pairs. |
+| negativeGradient | `string[] \| [number, string][]` | ✗ | Separate gradient for negative values (below zero) in area and shadow charts. Same format as gradient. |
 | zeroLineWidth | `number` | ✗ | Width of the zero line, only applies to bar and area rendering. |
 | zeroLineColor | `string` | ✗ | Color of the zero line, only applies to bar and area rendering. |
 | zeroLineY | `number \| 'bottom'` | ✗ | Y-coordinate of the zero line, only applies to bar and area rendering. Defaults to zero; may also be the string "bottom". |

package/src/helpers/custom_prop_types.js

@@ -67,8 +67,9 @@ const SingleSeries = PropTypes.shape({
     showIndividualPoints: PropTypes.bool,
     minPointSpacing: PropTypes.number,
     rendering: PropTypes.oneOf(['line', 'bar', 'area', 'shadow']), // defaults to line
-    negativeColor: PropTypes.string, // only applies to bar
-    gradient: PropTypes.array, // only applies to area
+    negativeColor: PropTypes.string, // colors lines and points below zero for all renderings
+    gradient: PropTypes.array, // only applies to area and shadow
+    negativeGradient: PropTypes.array, // gradient for values below zero (area and shadow)
     zeroLineWidth: PropTypes.number, // only applies to bar and area
     zeroLineColor: PropTypes.string,  // only applies to bar and area
     zeroLineY: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), // only applies to bar and area

package/src/index.d.ts

@@ -27,6 +27,7 @@ export interface SeriesData {
   minPointSpacing?: number;
   rendering?: 'line' | 'bar' | 'area' | 'shadow';
   negativeColor?: string;
+  negativeGradient?: string[] | [number, string][];
   zeroLineWidth?: number;
   zeroLineColor?: string;
   zeroLineY?: number | string;

package/src/renderer/draw_area.js

@@ -34,6 +34,7 @@ export default function drawArea(
     zero,
     hasNegatives,
     gradient,
+    negativeGradient,
     zeroColor,
     zeroWidth,
     showIndividualPoints,
@@ -95,9 +96,10 @@ export default function drawArea(
   // we want to draw a polygon with a flat line at areaBottom, and then follows the shape of the data
   const areaBottom = hasNegatives ? zero : sizing.renderHeight;
 
-  const areaPaths = pathsFrom(dataInRenderSpace);
+  const shouldSplitAreaPaths = hasNegatives && negativeGradient;
+  const areaPaths = pathsFrom(dataInRenderSpace, shouldSplitAreaPaths ? { splitAtY: zero } : undefined);
   const areaBottomPaths =
-    inRenderSpaceAreaBottom && pathsFrom(inRenderSpaceAreaBottom);
+    inRenderSpaceAreaBottom && pathsFrom(inRenderSpaceAreaBottom, shouldSplitAreaPaths ? { splitAtY: zero } : undefined);
 
   const linePaths = pathsFrom(dataInRenderSpace, {
     splitAtY: zero,
@@ -139,6 +141,56 @@ export default function drawArea(
   for (let pathI = 0; pathI < areaPaths.length; pathI++) {
     const path = areaPaths[pathI];
     const areaBottomPath = areaBottomPaths && areaBottomPaths[pathI];
+    
+    // Determine if this path segment is positive or negative for gradient application
+    let isPositive = true;
+    if (hasNegatives && negativeGradient && path.length > 0) {
+      // Check the average Y position of the path to determine if it's above or below zero
+      let sumY = 0;
+      for (let i = 0; i < path.length; i++) {
+        sumY += path[i][1];
+      }
+      const avgY = sumY / path.length;
+      isPositive = avgY <= zero; // In screen coordinates, smaller Y is higher up (positive)
+    }
+    
+    // Set the fill style based on whether this is a positive or negative segment
+    if (hasNegatives && negativeGradient) {
+      if (isPositive) {
+        // Use the original gradient or color for positive areas
+        if (gradient && gradient.length >= 2) {
+          const globalGradient = context.createLinearGradient(0, 0, 0, sizing.renderHeight);
+          for (let i = 0; i < gradient.length; i++) {
+            const value = gradient[i];
+            if (Array.isArray(value)) {
+              globalGradient.addColorStop(value[0], value[1]);
+            } else {
+              globalGradient.addColorStop(i / (gradient.length - 1), value);
+            }
+          }
+          context.fillStyle = globalGradient;
+        } else {
+          context.fillStyle = color;
+        }
+      } else {
+        // Use negativeGradient for negative areas
+        if (negativeGradient.length >= 2) {
+          const negGradient = context.createLinearGradient(0, 0, 0, sizing.renderHeight);
+          for (let i = 0; i < negativeGradient.length; i++) {
+            const value = negativeGradient[i];
+            if (Array.isArray(value)) {
+              negGradient.addColorStop(value[0], value[1]);
+            } else {
+              negGradient.addColorStop(i / (negativeGradient.length - 1), value);
+            }
+          }
+          context.fillStyle = negGradient;
+        } else {
+          context.fillStyle = negativeColor || color;
+        }
+      }
+    }
+    
     context.beginPath();
 
     const [firstX, _startY] = path[0];
@@ -180,7 +232,7 @@ export default function drawArea(
       continue;
     }
 
-    if (hasNegatives) {
+    if (hasNegatives && negativeColor) {
       let positive = true;
       if (path.length >= 2) {
         positive = path[1][1] <= zero;
@@ -193,6 +245,8 @@ export default function drawArea(
       } else {
         context.strokeStyle = negativeColor;
       }
+    } else {
+      context.strokeStyle = color;
     }
 
     context.beginPath();
@@ -222,8 +276,6 @@ export default function drawArea(
   }
 
   if (showIndividualPoints && !renderCutoffGradient) {
-    context.fillStyle = color;
-
     // Apply point spacing for individual point circles only
     function applyPointSpacing(points, minSpacing) {
       if (!minSpacing || points.length <= 1) {
@@ -246,16 +298,19 @@ export default function drawArea(
 
     const pointsToRender = applyPointSpacing(individualPoints, minPointSpacing);
     for (let [x, y] of pointsToRender) {
+      // Determine the color for this point
+      let pointColor = color;
       if (negativeColor && hasNegatives) {
         if (y === zero && zeroColor) {
-          context.fillStyle = zeroColor;
+          pointColor = zeroColor;
         } else if (y < zero) {
-          context.fillStyle = color;
+          pointColor = color;
         } else {
-          context.fillStyle = negativeColor;
+          pointColor = negativeColor;
         }
       }
-
+      
+      context.fillStyle = pointColor;
       context.beginPath();
       context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
       context.fill();

package/src/renderer/draw_line.js

@@ -22,7 +22,7 @@ function applyPointSpacing(points, minSpacing) {
 }
 
 export default function drawLine(dataInRenderSpace, {
-    color, width=1, context, shadowColor='black', shadowBlur=5, dashed=false, dashPattern=null, highlighted=false, showIndividualPoints=false, pointRadius, minPointSpacing, getIndividualPoints, getRanges, cutoffIndex, cutoffOpacity, originalData, renderCutoffGradient, currentBounds, selectionBounds, rendering, isPreview
+    color, width=1, context, shadowColor='black', shadowBlur=5, dashed=false, dashPattern=null, highlighted=false, showIndividualPoints=false, pointRadius, minPointSpacing, getIndividualPoints, getRanges, cutoffIndex, cutoffOpacity, originalData, renderCutoffGradient, currentBounds, selectionBounds, rendering, isPreview, negativeColor, hasNegatives, zero, zeroColor
 }) {
     if (!context) {
         console.error("Canvas context is null in drawLine");
@@ -45,7 +45,8 @@ export default function drawLine(dataInRenderSpace, {
         context.setLineDash([]);
     }
 
-    const paths = pathsFrom(dataInRenderSpace);
+    // Split paths at zero line if negativeColor is specified
+    const paths = pathsFrom(dataInRenderSpace, hasNegatives && negativeColor ? { splitAtY: zero } : undefined);
 
     for (let path of paths) {
         if (renderCutoffGradient && cutoffIndex !== undefined && originalData) {
@@ -279,6 +280,18 @@ export default function drawLine(dataInRenderSpace, {
             }
             }
         } else {
+            if (hasNegatives && negativeColor) {
+                let positive = true;
+                if (path.length >= 2) {
+                    positive = path[1][1] <= zero;
+                } else if (path.length > 0) {
+                    positive = path[0][1] <= zero;
+                }
+                context.strokeStyle = positive ? color : negativeColor;
+            } else {
+                context.strokeStyle = color;
+            }
+
             context.beginPath();
 
             for (let i = 0; i < path.length; i++) {
@@ -377,11 +390,22 @@ export default function drawLine(dataInRenderSpace, {
                         isBeforeCutoff = x < cutoffPixelX;
                     }
                     
+                    let pointColor = color;
+                    if (negativeColor && hasNegatives) {
+                        if (y === zero && zeroColor) {
+                            pointColor = zeroColor;
+                        } else if (y < zero) {
+                            pointColor = color;
+                        } else {
+                            pointColor = negativeColor;
+                        }
+                    }
+                    
                     if (isBeforeCutoff) {
-                        const reducedOpacityColor = applyReducedOpacity(color, cutoffOpacity);
+                        const reducedOpacityColor = applyReducedOpacity(pointColor, cutoffOpacity);
                         context.fillStyle = reducedOpacityColor;
                     } else {
-                        context.fillStyle = color;
+                        context.fillStyle = pointColor;
                     }
                     
                     context.beginPath();
@@ -392,7 +416,20 @@ export default function drawLine(dataInRenderSpace, {
                 const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
                 for (let i = 0; i < spacedPoints.length; i++) {
                     const [x, y] = spacedPoints[i];
-                    context.fillStyle = color;
+                    
+                    // Determine point color based on position relative to zero
+                    let pointColor = color;
+                    if (negativeColor && hasNegatives) {
+                        if (y === zero && zeroColor) {
+                            pointColor = zeroColor;
+                        } else if (y < zero) {
+                            pointColor = color;
+                        } else {
+                            pointColor = negativeColor;
+                        }
+                    }
+                    
+                    context.fillStyle = pointColor;
                     context.beginPath();
                     context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
                     context.fill();
@@ -416,11 +453,22 @@ export default function drawLine(dataInRenderSpace, {
                         isBeforeCutoff = x < cutoffPixelX;
                     }
                     
+                    let pointColor = color;
+                    if (negativeColor && hasNegatives) {
+                        if (y === zero && zeroColor) {
+                            pointColor = zeroColor;
+                        } else if (y < zero) {
+                            pointColor = color;
+                        } else {
+                            pointColor = negativeColor;
+                        }
+                    }
+                    
                     if (isBeforeCutoff) {
-                        const reducedOpacityColor = applyReducedOpacity(color, cutoffOpacity);
+                        const reducedOpacityColor = applyReducedOpacity(pointColor, cutoffOpacity);
                         context.fillStyle = reducedOpacityColor;
                     } else {
-                        context.fillStyle = color;
+                        context.fillStyle = pointColor;
                     }
                     
                     context.beginPath();
@@ -432,7 +480,20 @@ export default function drawLine(dataInRenderSpace, {
             const spacedPoints = applyPointSpacing(individualPoints, minPointSpacing);
             for (let i = 0; i < spacedPoints.length; i++) {
                 const [x, y] = spacedPoints[i];
-                context.fillStyle = color;
+                
+                // Determine point color based on position relative to zero
+                let pointColor = color;
+                if (negativeColor && hasNegatives) {
+                    if (y === zero && zeroColor) {
+                        pointColor = zeroColor;
+                    } else if (y < zero) {
+                        pointColor = color;
+                    } else {
+                        pointColor = negativeColor;
+                    }
+                }
+                
+                context.fillStyle = pointColor;
                 context.beginPath();
                 context.arc(x, y, pointRadius || 8, 0, 2 * Math.PI, false);
                 context.fill();

package/src/renderer/graph_body_renderer.js

@@ -370,6 +370,7 @@ export default class GraphBodyRenderer extends Eventable {
                 ...commonCPUParams,
                 showIndividualPoints: typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints,
                 gradient: singleSeries.gradient,
+                negativeGradient: singleSeries.negativeGradient,
                 pointRadius: singleSeries.pointRadius,
                 minPointSpacing: singleSeries.minPointSpacing,
                 highlighted,
@@ -451,9 +452,12 @@ export default class GraphBodyRenderer extends Eventable {
             }
             
             const shadowColor = getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex);
+            const hasNegatives = !!singleSeries.inDataSpace.find((tuple) => tuple[1] < 0);
             let shadowParams = {
                 color: shadowColor,
                 gradient: singleSeries.gradient || createDefaultGradient(shadowColor),
+                negativeGradient: singleSeries.negativeGradient,
+                hasNegatives,
                 zero,
                 sizing: this._sizing,
                 inRenderSpaceAreaBottom
@@ -523,9 +527,54 @@ export default class GraphBodyRenderer extends Eventable {
 
         const shouldShowIndividualPoints = typeof singleSeries.showIndividualPoints === 'boolean' ? singleSeries.showIndividualPoints : showIndividualPoints;
 
+        let zero;
+        if (singleSeries.zeroLineY === 'bottom') {
+            zero = this._sizing.renderHeight;
+        } else if (singleSeries.zeroLineY !== undefined) {
+            zero = (1.0 - ((singleSeries.zeroLineY) - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight;
+        } else {
+            if (bounds.minY <= 0 && bounds.maxY >= 0) {
+                zero = (1.0 - (0 - bounds.minY) / (bounds.maxY - bounds.minY)) * this._sizing.renderHeight;
+            } else {
+                zero = this._sizing.renderHeight;
+            }
+        }
+        const hasNegatives = !!singleSeries.inDataSpace.find((tuple) => tuple[1] < 0);
+
+        // For WebGL shadow rendering, we need a separate 2D canvas overlay for lines/points
+        // since WebGL and 2D contexts can't coexist on the same canvas
+        let drawContext = this._context;
+        
+        if (this._webgl && singleSeries.rendering === 'shadow' && (width > 0 || shouldShowIndividualPoints)) {
+            // Only create overlay if we're actually drawing lines or points
+            if (!this._overlayCanvas) {
+                this._overlayCanvas = document.createElement('canvas');
+                this._overlayCanvas.style.position = 'absolute';
+                this._overlayCanvas.style.top = '0';
+                this._overlayCanvas.style.left = '0';
+                this._overlayCanvas.style.pointerEvents = 'none';
+                this._overlayContext = this._overlayCanvas.getContext('2d');
+                this._canvas.parentNode.insertBefore(this._overlayCanvas, this._canvas.nextSibling);
+            }
+            
+            // Size the overlay canvas to match the main canvas
+            this._overlayCanvas.width = this._canvas.width;
+            this._overlayCanvas.height = this._canvas.height;
+            this._overlayCanvas.style.width = this._canvas.style.width;
+            this._overlayCanvas.style.height = this._canvas.style.height;
+            
+            // Clear the overlay before drawing
+            this._overlayContext.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
+            
+            drawContext = this._overlayContext;
+        } else if (this._context2d) {
+            // For non-WebGL or non-shadow charts with 2D context
+            drawContext = this._context2d;
+        }
+
         const drawParams = {
             color: getColor(singleSeries.color, singleSeries.index, singleSeries.multigrapherSeriesIndex),
-            context: this._context,
+            context: drawContext,
             width: width || singleSeries.width || defaultLineWidth,
             shadowColor,
             shadowBlur,
@@ -537,7 +586,11 @@ export default class GraphBodyRenderer extends Eventable {
             minPointSpacing: singleSeries.minPointSpacing,
             getIndividualPoints,
             getRanges: singleSeries.rangeKey ? getRanges : null,
-            rendering: singleSeries.rendering  // Pass rendering type for all charts
+            rendering: singleSeries.rendering,  // Pass rendering type for all charts
+            negativeColor: singleSeries.negativeColor,
+            hasNegatives,
+            zero,
+            zeroColor: singleSeries.zeroLineColor
         };
         
 
@@ -560,7 +613,10 @@ export default class GraphBodyRenderer extends Eventable {
             drawParams.selectionBounds = selection || bounds;    
         }
         
-        if (this._webgl) {
+        // For shadow rendering, always use 2D canvas for lines/points even with WebGL
+        // This is because shadow uses WebGL for the fill but needs 2D canvas for lines/points
+        // to support negativeColor and other features
+        if (this._webgl && singleSeries.rendering !== 'shadow') {
             this._lineProgram.draw(inRenderSpace, drawParams);
         } else {
             drawLine(inRenderSpace, drawParams);

package/src/renderer/shadow_program.js

@@ -210,7 +210,9 @@ export default class ShadowProgram {
     }
 
     const trapezoids = [];
-    const { zero, inRenderSpaceAreaBottom } = params;
+    const positiveTrapezoids = [];
+    const negativeTrapezoids = [];
+    const { zero, inRenderSpaceAreaBottom, negativeGradient, hasNegatives } = params;
 
 
     for (let i = 0; i < individualPoints.length - 1; i++) {
@@ -232,25 +234,45 @@ export default class ShadowProgram {
         const yCross = zero;
 
         if (Math.abs(y1 - yCross) > 0.1) {
-          trapezoids.push({
+          const trap = {
             x1,
             y1,
             x2: xCross,
             y2: yCross,
             bottomY1,
             bottomY2: zero,
-          });
+          };
+          trapezoids.push(trap);
+          
+          // Determine if positive or negative (in screen coords, smaller Y is higher/positive)
+          if (hasNegatives && negativeGradient) {
+            if (y1 <= zero) {
+              positiveTrapezoids.push(trap);
+            } else {
+              negativeTrapezoids.push(trap);
+            }
+          }
         }
 
         if (Math.abs(y2 - yCross) > 0.1) {
-          trapezoids.push({
+          const trap = {
             x1: xCross,
             y1: yCross,
             x2,
             y2,
             bottomY1: zero,
             bottomY2,
-          });
+          };
+          trapezoids.push(trap);
+          
+          // Determine if positive or negative
+          if (hasNegatives && negativeGradient) {
+            if (y2 <= zero) {
+              positiveTrapezoids.push(trap);
+            } else {
+              negativeTrapezoids.push(trap);
+            }
+          }
         }
       } else {
         // Skip trapezoids completely outside canvas
@@ -272,16 +294,24 @@ export default class ShadowProgram {
         
         const trapezoid = { x1, y1, x2: finalX2, y2: finalY2, bottomY1, bottomY2: finalBottomY2 };
         trapezoids.push(trapezoid);
+        
+        // Determine if positive or negative
+        if (hasNegatives && negativeGradient) {
+          // Check average Y position
+          const avgY = (y1 + finalY2) / 2;
+          if (avgY <= zero) {
+            positiveTrapezoids.push(trapezoid);
+          } else {
+            negativeTrapezoids.push(trapezoid);
+          }
+        }
       }
     }
-    
-
 
     if (trapezoids.length === 0) {
       return;
     }
 
-    const geometry = this.generateTrapezoidGeometry(trapezoids);
     const positionLoc = gl.getAttribLocation(this._program, "position");
     const trapezoidBoundsLoc = gl.getAttribLocation(
       this._program,
@@ -292,63 +322,82 @@ export default class ShadowProgram {
       "trapezoidBottom"
     );
 
-    gl.enableVertexAttribArray(positionLoc);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.STATIC_DRAW);
-    gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
-
-    gl.enableVertexAttribArray(trapezoidBoundsLoc);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this._trapezoidBoundsBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, geometry.trapezoidBounds, gl.STATIC_DRAW);
-    gl.vertexAttribPointer(trapezoidBoundsLoc, 4, gl.FLOAT, false, 0, 0);
-
-    gl.enableVertexAttribArray(trapezoidBottomLoc);
-    gl.bindBuffer(gl.ARRAY_BUFFER, this._trapezoidBottomBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, geometry.trapezoidBottom, gl.STATIC_DRAW);
-    gl.vertexAttribPointer(trapezoidBottomLoc, 4, gl.FLOAT, false, 0, 0);
-
     gl.uniform1f(gl.getUniformLocation(this._program, "width"), width);
     gl.uniform1f(gl.getUniformLocation(this._program, "height"), height);
 
-    const gradientData = this.parseGradient(params.gradient, params.color);
-
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, this._gradientTexture);
-
-    gl.texImage2D(
-      gl.TEXTURE_2D,
-      0,
-      gl.RGBA,
-      gradientData.textureWidth,
-      1,
-      0,
-      gl.RGBA,
-      gl.UNSIGNED_BYTE,
-      gradientData.textureData
-    );
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    // Helper function to render a set of trapezoids with a given gradient
+    const renderTrapezoidSet = (trapSet, gradient, color) => {
+      if (trapSet.length === 0) return;
+
+      const geometry = this.generateTrapezoidGeometry(trapSet);
+
+      gl.enableVertexAttribArray(positionLoc);
+      gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.STATIC_DRAW);
+      gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+
+      gl.enableVertexAttribArray(trapezoidBoundsLoc);
+      gl.bindBuffer(gl.ARRAY_BUFFER, this._trapezoidBoundsBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, geometry.trapezoidBounds, gl.STATIC_DRAW);
+      gl.vertexAttribPointer(trapezoidBoundsLoc, 4, gl.FLOAT, false, 0, 0);
+
+      gl.enableVertexAttribArray(trapezoidBottomLoc);
+      gl.bindBuffer(gl.ARRAY_BUFFER, this._trapezoidBottomBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, geometry.trapezoidBottom, gl.STATIC_DRAW);
+      gl.vertexAttribPointer(trapezoidBottomLoc, 4, gl.FLOAT, false, 0, 0);
+
+      const gradientData = this.parseGradient(gradient, color);
+
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, this._gradientTexture);
+
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        gradientData.textureWidth,
+        1,
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        gradientData.textureData
+      );
 
-    gl.uniform1i(gl.getUniformLocation(this._program, "gradientTexture"), 0);
-    gl.uniform1i(
-      gl.getUniformLocation(this._program, "gradientCount"),
-      gradientData.gradientCount
-    );
-    gl.uniform4fv(
-      gl.getUniformLocation(this._program, "fallbackColor"),
-      gradientData.fallbackColor
-    );
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+      gl.uniform1i(gl.getUniformLocation(this._program, "gradientTexture"), 0);
+      gl.uniform1i(
+        gl.getUniformLocation(this._program, "gradientCount"),
+        gradientData.gradientCount
+      );
+      gl.uniform4fv(
+        gl.getUniformLocation(this._program, "fallbackColor"),
+        gradientData.fallbackColor
+      );
+
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geometry.indices, gl.STATIC_DRAW);
 
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geometry.indices, gl.STATIC_DRAW);
+      gl.drawElements(gl.TRIANGLES, geometry.indices.length, gl.UNSIGNED_INT, 0);
+    };
 
-    gl.drawElements(gl.TRIANGLES, geometry.indices.length, gl.UNSIGNED_INT, 0);
+    // If we have negativeGradient and separate trapezoid sets, render them separately
+    if (hasNegatives && negativeGradient && (positiveTrapezoids.length > 0 || negativeTrapezoids.length > 0)) {
+      // Render positive trapezoids with the normal gradient
+      renderTrapezoidSet(positiveTrapezoids, params.gradient, params.color);
+      
+      // Render negative trapezoids with negativeGradient
+      renderTrapezoidSet(negativeTrapezoids, negativeGradient, params.color);
+    } else {
+      // Fallback to rendering all trapezoids with the same gradient (original behavior)
+      renderTrapezoidSet(trapezoids, params.gradient, params.color);
+    }
     
     const error = gl.getError();
     if (error !== gl.NO_ERROR) {