svelteplot 0.10.3 → 0.11.0

package/dist/marks/ColorLegend.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     interface ColorLegendMarkProps {
+        /** CSS class applied to the legend container element */
         class: string | null;
     }
     import Plot from '../Plot.svelte';
@@ -9,7 +10,7 @@
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
-    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
@@ -28,7 +29,7 @@
                   plot.options.color.tickFormat || { ...DEFAULTS.numberFormat, notation: 'compact' }
               ).format
     );
-    const randId = Math.round(Math.random() * 1e6).toFixed(32);
+    const randId = Math.round(Math.random() * 1e6).toString(36);
 </script>
 
 <!--
@@ -72,7 +73,7 @@
                 </div>
             {/each}
         {:else if scaleType === 'quantile' || scaleType === 'quantize' || scaleType === 'threshold'}
-            {@const domain = extent(plot.scales.color.fn.domain())}
+            {@const domain = extent(plot.scales.color.fn.domain() as number[]) as [number, number]}
             {@const range = plot.scales.color.range}
             {@const tickLabels =
                 scaleType === 'quantile'
@@ -94,28 +95,34 @@
                 marginBottom={20}
                 height={38}
                 inset={0}
-                x={{ domain, ticks }}>
+                x={{ domain: domain as [number, number], ticks }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
-                        <stop offset="0%" stop-color={range[0]} />
+                        <stop offset="0%" stop-color={range[0] as string} />
                         {#each ticks as t, i (i)}
                             {@const offset = (100 * (t - domain[0])) / (domain[1] - domain[0])}
                             <stop
                                 offset="{offset - 0.001}%"
-                                stop-color={plot.scales.color.fn(tickLabels[i] - 0.1)} />
+                                stop-color={plot.scales.color.fn(
+                                    (tickLabels[i] as number) - 0.1
+                                )} />
                             <stop
                                 offset="{offset}%"
-                                stop-color={plot.scales.color.fn(tickLabels[i])} />
+                                stop-color={plot.scales.color.fn(tickLabels[i] as number)} />
                         {/each}
-                        <stop offset="100%" stop-color={range.at(-1)} />
+                        <stop offset="100%" stop-color={range.at(-1) as string} />
                     </linearGradient>
                 </defs>
-                <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
-                <AxisX tickSize={18} dy={-17} tickFormat={(d, i) => tickFormat(tickLabels[i])} />
+                <Frame dy={-5} stroke={undefined} fill="url(#gradient-{randId})" />
+                <AxisX
+                    tickSize={18}
+                    dy={-17}
+                    tickFormat={(d, i) =>
+                        (tickFormat as (d: number) => string)(tickLabels[i] as number)} />
             </Plot>
         {:else}
             <!--- continuous -->
-            {@const domain = extent(plot.scales.color.domain)}
+            {@const domain = extent(plot.scales.color.domain as number[]) as [number, number]}
             {@const ticks = d3Range(domain[0], domain[1], (domain[1] - domain[0]) / 7).slice(1)}
 
             <Plot
@@ -127,7 +134,11 @@
                 marginBottom={20}
                 height={38}
                 inset={0}
-                x={{ domain, tickSpacing: 30, tickFormat }}>
+                x={{
+                    domain: domain as [number, number],
+                    tickSpacing: 30,
+                    tickFormat: tickFormat as any
+                }}>
                 <defs>
                     <linearGradient id="gradient-{randId}" x2="1">
                         {#each ticks as t (t)}
@@ -137,7 +148,7 @@
                         {/each}
                     </linearGradient>
                 </defs>
-                <Frame dy={-5} stroke={null} fill="url(#gradient-{randId})" />
+                <Frame dy={-5} stroke={undefined} fill="url(#gradient-{randId})" />
                 <AxisX tickSize={18} dy={-17} />
             </Plot>
         {/if}

package/dist/marks/ColorLegend.svelte.d.ts

@@ -1,4 +1,5 @@
 interface ColorLegendMarkProps {
+    /** CSS class applied to the legend container element */
     class: string | null;
 }
 /**

package/dist/marks/CustomMark.svelte

@@ -4,23 +4,31 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
+        /** the input data array */
         data?: Datum[];
-        type?: string;
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the starting horizontal position; bound to the x scale */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position; bound to the x scale */
         x2?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** the starting vertical position; bound to the y scale */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position; bound to the y scale */
         y2?: ChannelAccessor<Datum>;
+        /** the radius channel; bound to the r scale */
         r?: ChannelAccessor<Datum>;
+        /** snippet rendered once per data point with the scaled record */
         mark?: Snippet<
             [{ record: ScaledDataRecord<Datum>; index: number; usedScales: UsedScales }]
         >;
+        /** snippet rendered once with all scaled records */
         marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
     }
 
     import type {
-        PlotContext,
         DataRecord,
         ChannelAccessor,
         BaseMarkProps,
@@ -33,13 +41,7 @@
 
     import Mark from '../Mark.svelte';
 
-    let {
-        data = [{} as Datum],
-        mark,
-        type = 'custom',
-        marks,
-        ...options
-    }: CustomMarkProps = $props();
+    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
 
     const args = $derived(sort({ data, ...options })) as CustomMarkProps;
 
@@ -59,7 +61,11 @@
     ];
 </script>
 
-<Mark {type} required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+<Mark
+    type="custom"
+    required={[]}
+    channels={channels.filter((d) => !!(options as Record<string, unknown>)[d])}
+    {...args}>
     {#snippet children({ scaledData, usedScales })}
         {#if marks}
             {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}

package/dist/marks/CustomMark.svelte.d.ts

@@ -12,6 +12,16 @@ declare function $$render<Datum extends DataRecord>(): {
         dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -25,60 +35,131 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }> & {
+        /** the input data array */
         data?: Datum[];
-        type?: string;
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the starting horizontal position; bound to the x scale */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position; bound to the x scale */
         x2?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** the starting vertical position; bound to the y scale */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position; bound to the y scale */
         y2?: ChannelAccessor<Datum>;
+        /** the radius channel; bound to the r scale */
         r?: ChannelAccessor<Datum>;
+        /** snippet rendered once per data point with the scaled record */
         mark?: Snippet<[{
             record: ScaledDataRecord<Datum>;
             index: number;
             usedScales: UsedScales;
         }]>;
+        /** snippet rendered once with all scaled records */
         marks?: Snippet<[{
             records: ScaledDataRecord<Datum>[];
             usedScales: UsedScales;

package/dist/marks/CustomMarkHTML.svelte

@@ -5,9 +5,13 @@
 
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkHTMLProps {
+        /** the input data array */
         data: Datum[];
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** anchor position within the frame when x or y is not specified */
         frameAnchor?: ConstantAccessor<
             | 'bottom'
             | 'top'
@@ -20,8 +24,10 @@
             | 'center',
             Datum
         >;
+        /** CSS class applied to the wrapper element */
         class: string | null;
-        children: Snippet<{ datum: Datum; x: number; y: number }>;
+        /** snippet rendered for each data point with the datum and its projected coordinates */
+        children: Snippet<[{ datum: Datum; x: number; y: number }]>;
     }
     import { type Snippet } from 'svelte';
     import type { ChannelAccessor, ConstantAccessor, DataRecord } from '../types/index.js';
@@ -43,7 +49,7 @@
     }: CustomMarkHTMLProps = $props();
 
     function getXY(datum: Datum) {
-        const fa = frameAnchor || 'center';
+        const fa = (frameAnchor || 'center') as string;
         const isLeft = fa.endsWith('left');
         const isRight = fa.endsWith('right');
         const isTop = fa.startsWith('top');

package/dist/marks/CustomMarkHTML.svelte.d.ts

@@ -2,16 +2,22 @@ import { type Snippet } from 'svelte';
 import type { ChannelAccessor, ConstantAccessor, DataRecord } from '../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: {
+        /** the input data array */
         data: Datum[];
+        /** the horizontal position channel; bound to the x scale */
         x?: ChannelAccessor<Datum>;
+        /** the vertical position channel; bound to the y scale */
         y?: ChannelAccessor<Datum>;
+        /** anchor position within the frame when x or y is not specified */
         frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "top-left" | "bottom-left" | "top-right" | "bottom-right" | "center", Datum>;
+        /** CSS class applied to the wrapper element */
         class: string | null;
-        children: Snippet<{
+        /** snippet rendered for each data point with the datum and its projected coordinates */
+        children: Snippet<[{
             datum: Datum;
             x: number;
             y: number;
-        }>;
+        }]>;
     };
     exports: {};
     bindings: "";

package/dist/marks/DifferenceY.svelte

@@ -1,25 +1,29 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface DifferenceYMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** the input data array */
         data: Datum[];
-        /*
+        /**
          * the horizontal position of the comparison; bound to the x scale
          */
-        x1: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
         /**
          * the horizontal position of the metric; bound to the x scale
          */
-        x2: ChannelAccessor<Datum>;
-        x: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        /** the shared horizontal position channel; used when x1 and x2 are the same */
+        x?: ChannelAccessor<Datum>;
         /**
          * the vertical position of the comparison; bound to the y scale
          */
-        y1: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
         /**
          * the vertical position of the metric; bound to the y scale
          */
-        y2: ChannelAccessor<Datum>;
-        y: ChannelAccessor<Datum>;
-        fillOpacity?: number;
+        y2?: ChannelAccessor<Datum>;
+        /** the shared vertical position channel; used when y1 and y2 are the same */
+        y?: ChannelAccessor<Datum>;
+        /** the fill opacity for both positive and negative areas */
+        fillOpacity?: ConstantAccessor<number, Datum>;
         /**
          * the stroke color of the "positive" area; defaults to 'blue'
          */
@@ -48,6 +52,7 @@
     import type {
         BaseMarkProps,
         ChannelAccessor,
+        ConstantAccessor,
         CurveName,
         DataRecord
     } from '../types/index.js';
@@ -76,7 +81,7 @@
     const {
         data,
         stroke,
-        class: className = null,
+        class: className = '',
         ...options
     }: DifferenceYMarkProps = $derived({
         ...DEFAULTS,
@@ -87,27 +92,33 @@
     const x1x2Differ = $derived((x1 == null || x2 == null) && x1 !== x2);
 
     const xExtent = $derived(
-        x1x2Differ && x != null ? extent(data, (d) => resolveChannel('x', d, options)) : null
+        x1x2Differ && x != null
+            ? extent(data, (d) => resolveChannel('x', d, options) as number | null | undefined)
+            : null
     );
     const x1Extent = $derived(
-        x1x2Differ && x1 != null ? extent(data, (d) => resolveChannel('x1', d, options)) : null
+        x1x2Differ && x1 != null
+            ? extent(data, (d) => resolveChannel('x1', d, options) as number | null | undefined)
+            : null
     );
     const x2Extent = $derived(
-        x1x2Differ && x2 != null ? extent(data, (d) => resolveChannel('x2', d, options)) : null
+        x1x2Differ && x2 != null
+            ? extent(data, (d) => resolveChannel('x2', d, options) as number | null | undefined)
+            : null
     );
 
     const maxMin = $derived(
-        max([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[0]))
+        max([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d![0] as number))
     );
     const minMax = $derived(
-        min([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d[1]))
+        min([xExtent, x1Extent, x2Extent].filter((d) => d != null).map((d) => d![1] as number))
     );
 
     const croppedX1 = $derived(
         x1x2Differ
             ? data.filter((d) => {
-                  const x1val = resolveChannel(x1 != null ? 'x1' : 'x', d, options);
-                  return x1val >= maxMin && x1val <= minMax;
+                  const x1val = resolveChannel(x1 != null ? 'x1' : 'x', d, options) as number;
+                  return x1val >= (maxMin as number) && x1val <= (minMax as number);
               })
             : data
     );
@@ -115,8 +126,8 @@
     const croppedX2 = $derived(
         x1x2Differ
             ? data.filter((d) => {
-                  const x2val = resolveChannel(x2 != null ? 'x2' : 'x', d, options);
-                  return x2val >= maxMin && x2val <= minMax;
+                  const x2val = resolveChannel(x2 != null ? 'x2' : 'x', d, options) as number;
+                  return x2val >= (maxMin as number) && x2val <= (minMax as number);
               })
             : data
     );
@@ -141,7 +152,7 @@
         data={croppedX1}
         {...options}
         fill={options.positiveFill || 'pink'}
-        fillOpacity={coalesce(options.positiveFillOpacity, options.fillOpacity, 1)}
+        fillOpacity={coalesce(options.positiveFillOpacity, options.fillOpacity, 1) as number}
         x1={coalesce(x1, x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y1, x1x2Differ ? coalesce(y2, y) : 0)} />
@@ -163,7 +174,7 @@
         data={croppedX2}
         {...options}
         fill={options.negativeFill || 'cyan'}
-        fillOpacity={coalesce(options.negativeFillOpacity, options.fillOpacity, 1)}
+        fillOpacity={coalesce(options.negativeFillOpacity, options.fillOpacity, 1) as number}
         x1={coalesce(x2, x)}
         y1={{ scale: null, value: 0 }}
         y2={coalesce(y2, y)} />