Add alternating background bands as an option

examples/simple/src/components/Line.tsx

@@ -24,6 +24,7 @@ export default function Line() {
     () => [
       {
         getValue: (datum) => datum.secondary,
+        alternatingBackgroundColor: "#f5f5f5",
       },
     ],
     []

src/components/AxisLinear.tsx

@@ -107,6 +107,15 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
       }
     })
 
+    // For vertical axis find height, for horizontal width
+    // if not enough ticks, default to 0
+    const bandDim =
+      ticks.length > 1
+        ? axis.isVertical
+          ? ticks[0].from.y - ticks[1].from.y
+          : ticks[1].from.x - ticks[0].from.x
+        : 0
+
     return (
       <g
         key={`Axis-Group ${isOuter ? 'outer' : 'inner'}`}
@@ -198,6 +207,23 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
               )
             })}
           </g>
+          {axis.alternatingBackgroundColor ? (
+            <g className="background-bands">
+              {ticks.map((tick, i) => {
+                return !isOuter && i % 2 ? (
+                  <rect
+                    key={`vx-band-${tick}-${i}`}
+                    fill={axis.alternatingBackgroundColor}
+                    // the shift to the left by bandDim is so that each band is drawn "to the left" of the tick (none will overflow)
+                    x={axis.isVertical ? tick.from.x : tick.to.x - bandDim}
+                    y={axis.isVertical ? tick.from.y : tick.gridTo.y}
+                    width={axis.isVertical ? tick.gridTo.x : bandDim}
+                    height={axis.isVertical ? bandDim : tick.from.y}
+                  ></rect>
+                ) : null
+              })}
+            </g>
+          ) : null}
           <g className="grid">
             {ticks.map((tick, i) => {
               return (
@@ -209,7 +235,7 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
                       x2={tick.gridTo.x}
                       y2={tick.gridTo.y}
                       stroke={
-                        dark ? 'rgba(255,255,255, .05)' : 'rgba(0,0,0, .05)'
+                        dark ? 'rgba(255,255,255, .05)' : 'rgba(0,0,0, .05'
                       }
                     />
                   ) : null}

src/types.ts

@@ -250,6 +250,7 @@ export type AxisOptionsBase = {
   maxBandSize?: number
   minDomainLength?: number
   showGrid?: boolean
+  alternatingBackgroundColor?: string
   show?: boolean
   stacked?: boolean
   stackOffset?: typeof stackOffsetNone

src/utils/buildAxis.linear.ts

@@ -122,12 +122,12 @@ function buildTimeAxis<TDatum>(
 
   // see https://stackoverflow.com/a/2831422
   if (Object.prototype.toString.call(options.min) === '[object Date]') {
-    minValue = min([options.min, minValue as Date])
+    minValue = min([options.min, minValue] as Date[])
     shouldNice = false
   }
 
   if (Object.prototype.toString.call(options.max) === '[object Date]') {
-    maxValue = max([options.max, maxValue as Date])
+    maxValue = max([options.max, maxValue] as Date[])
     shouldNice = false
   }