svelteplot 0.10.3 → 0.11.0

package/dist/marks/AxisX.svelte

@@ -10,7 +10,10 @@
         RawValue,
         ConstantAccessor,
         FacetContext,
-        ChannelName
+        ChannelName,
+        TickFormatFunction,
+        DataRecord,
+        ScaledChannelName
     } from '../types/index.js';
     import type * as CSS from 'csstype';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
@@ -22,24 +25,37 @@
 
     interface AxisXMarkProps extends Omit<
         BaseMarkProps<Datum>,
-        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'textAnchor'
     > {
+        /** custom tick values to display on the axis */
         data?: Datum[];
+        /** whether this axis was automatically added by the Plot component */
         automatic?: boolean;
+        /** the axis title label; set to false or null to hide */
         title?: string | false | null;
+        /** which edge of the plot the axis appears on */
         anchor?: 'top' | 'bottom';
+        /** the interval between ticks, e.g. "day", "month", or a number */
         interval?: string | number;
+        /** controls which facet edge displays this axis */
         facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
+        /** horizontal alignment of the axis title */
         labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        /** the length of tick marks in pixels */
         tickSize?: number;
+        /** font size for tick labels */
         tickFontSize?: ConstantAccessor<number, Datum>;
+        /** font size for the axis title */
         titleFontSize?: number;
+        /** spacing between tick marks and tick labels in pixels */
         tickPadding?: number;
+        /** formatter for tick labels; can be "auto", an Intl format options object, or a custom function */
         tickFormat?:
             | 'auto'
             | Intl.DateTimeFormatOptions
             | Intl.NumberFormatOptions
-            | ((d: RawValue, i: number) => string);
+            | TickFormatFunction;
+        /** CSS class applied to each tick label */
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];
@@ -59,7 +75,7 @@
 
     let markProps: AxisXMarkProps = $props();
 
-    const DEFAULTS: Omit<AxisXMarkProps, 'data' | ChannelName> = {
+    const DEFAULTS = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
@@ -74,7 +90,7 @@
     const { ticks: magicTicks } = $derived({ ...DEFAULTS, ...markProps });
 
     const {
-        data,
+        data = [] as Datum[],
         automatic = false,
         title,
         anchor,
@@ -92,12 +108,12 @@
         text = true,
         ...options
     }: AxisXMarkProps = $derived({
-        data: Array.isArray(magicTicks) ? magicTicks : [],
+        data: (Array.isArray(magicTicks) ? magicTicks : []) as Datum[],
         tickCount: typeof magicTicks === 'number' ? magicTicks : undefined,
         interval: typeof magicTicks === 'string' ? magicTicks : undefined,
         ...DEFAULTS,
         ...markProps
-    });
+    } as AxisXMarkProps);
 
     const plot = usePlot();
 
@@ -125,15 +141,14 @@
     );
 
     const useCompactNotation = $derived.by(() => {
-        const range =
-            extent(plot.scales.x.domain).filter(
-                (d): d is number => typeof d === 'number' && Number.isFinite(d)
-            ) ?? [];
-
-        if (range[0] === undefined || range[1] === undefined) return false;
-        const crossesZero = range[0] <= 0 && range[1] >= 0;
+        const numericDomain = plot.scales.x.domain.filter(
+            (d): d is number => typeof d === 'number' && Number.isFinite(d)
+        );
+        if (numericDomain.length < 2) return false;
+        const [min, max] = extent(numericDomain) as [number, number];
+        const crossesZero = min <= 0 && max >= 0;
         if (crossesZero) return true;
-        const magnitudes = range.map((d) =>
+        const magnitudes = [min, max].map((d) =>
             d === 0 ? -Infinity : Math.floor(Math.log10(Math.abs(d)))
         );
         return magnitudes[0] !== magnitudes[1];
@@ -145,7 +160,7 @@
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.x.type === 'band' || plot.scales.x.type === 'point'
-              ? (d) => d
+              ? (d: RawValue) => String(d)
               : plot.scales.x.type === 'time'
                 ? // time scale
                   typeof tickFmt === 'object'
@@ -159,9 +174,9 @@
                         Intl.NumberFormat(plot.options.locale, {
                             // use compact notation if range covers multiple magnitudes
                             ...(useCompactNotation ? { notation: 'compact' } : {}),
-                            ...DEFAULTS.numberFormat,
+                            ...getPlotDefaults().numberFormat,
                             style: plot.options.x.percent ? 'percent' : 'decimal'
-                        }).format(d)
+                        }).format(d as number)
     );
 
     const optionsLabel = $derived(plot.options?.x?.label);
@@ -195,7 +210,7 @@
     const useFacetAnchor = $derived(
         facetAnchor !== 'auto' ? facetAnchor : anchor === 'bottom' ? 'bottom-empty' : 'top-empty'
     );
-    const showAxis = $derived(
+    const showFacetAnchoredAxis = $derived(
         useFacetAnchor === 'top'
             ? top
             : useFacetAnchor === 'bottom'
@@ -204,19 +219,20 @@
                 ? topEmpty
                 : bottomEmpty
     );
+    const showAxis = $derived(showFacetAnchoredAxis);
 </script>
 
 <Mark
     type="axisX"
     data={data.length ? data.map((tick) => ({ __x: tick })) : []}
     channels={['x']}
-    {...options}
+    {...options as any}
     x="__x"
     {automatic}>
     {#if left && top && useTitle}
         <text
             style={resolveScaledStyles(
-                null,
+                {} as DataRecord,
                 {
                     opacity: 0.8,
                     ...options,
@@ -229,7 +245,7 @@
                               ? 'middle'
                               : 'start'
                 },
-                {},
+                {} as Record<ScaledChannelName, boolean>,
                 plot,
                 'fill'
             )}
@@ -245,12 +261,11 @@
         <BaseAxisX
             {anchor}
             class={className}
-            {labelAnchor}
-            options={{ ...options, ...plot.options.x }}
+            options={{ ...(options as any), ...plot.options.x }}
             {plot}
             {text}
-            {tickClass}
-            {tickFontSize}
+            tickClass={tickClass as ConstantAccessor<string>}
+            tickFontSize={tickFontSize as ConstantAccessor<number>}
             {tickPadding}
             {ticks}
             {tickSize}
@@ -258,8 +273,8 @@
             marginTop={plot.options.marginTop}
             scaleFn={plot.scales.x.fn}
             scaleType={plot.scales.x.type}
-            tickFormat={useTickFormat}
-            title={useTitle} />
+            tickFormat={useTickFormat as TickFormatFunction}
+            title={useTitle as string | null} />
     {/if}
 </Mark>
 

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

@@ -1,82 +1,167 @@
-import type { RawValue, ConstantAccessor } from '../types/index.js';
+import type { RawValue, ConstantAccessor, TickFormatFunction } from '../types/index.js';
 import type * as CSS from 'csstype';
 declare function $$render<Datum extends RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
-        fx: import("../types/channel").ChannelAccessor<Datum>;
-        fy: import("../types/channel").ChannelAccessor<Datum>;
+        fx: import("../types/channel.js").ChannelAccessor<Datum>;
+        fy: import("../types/channel.js").ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: import("../types/channel").ChannelAccessor<Datum>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: import("../types/channel.js").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<CSS.Property.FontFamily, Datum>;
+        fontSize: 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: ConstantAccessor<CSS.Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<CSS.Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<CSS.Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<CSS.Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<CSS.Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<CSS.Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<CSS.Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
         } | ConstantAccessor<RawValue, Datum>;
-        stroke: import("../types/channel").ChannelAccessor<Datum>;
+        stroke: import("../types/channel.js").ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
         strokeLinejoin: ConstantAccessor<CSS.Property.StrokeLinejoin, Datum>;
         strokeLinecap: ConstantAccessor<CSS.Property.StrokeLinecap, Datum>;
         strokeMiterlimit: ConstantAccessor<number, Datum>;
-        opacity: import("../types/channel").ChannelAccessor<Datum>;
+        opacity: import("../types/channel.js").ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, Datum>;
         paintOrder: 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: ConstantAccessor<CSS.Property.Cursor, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "href" | "target" | "title"> & {
+        title: ConstantAccessor<string, Datum>;
+    }>, "fillOpacity" | "textAnchor" | "paintOrder" | "title" | "href" | "target"> & {
+        /** custom tick values to display on the axis */
         data?: Datum[];
+        /** whether this axis was automatically added by the Plot component */
         automatic?: boolean;
+        /** the axis title label; set to false or null to hide */
         title?: string | false | null;
+        /** which edge of the plot the axis appears on */
         anchor?: "top" | "bottom";
+        /** the interval between ticks, e.g. "day", "month", or a number */
         interval?: string | number;
+        /** controls which facet edge displays this axis */
         facetAnchor?: "auto" | "top-empty" | "bottom-empty" | "top" | "bottom";
+        /** horizontal alignment of the axis title */
         labelAnchor?: "auto" | "left" | "center" | "right";
+        /** the length of tick marks in pixels */
         tickSize?: number;
+        /** font size for tick labels */
         tickFontSize?: ConstantAccessor<number, Datum>;
+        /** font size for the axis title */
         titleFontSize?: number;
+        /** spacing between tick marks and tick labels in pixels */
         tickPadding?: number;
-        tickFormat?: "auto" | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue, i: number) => string);
+        /** formatter for tick labels; can be "auto", an Intl format options object, or a custom function */
+        tickFormat?: "auto" | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | TickFormatFunction;
+        /** CSS class applied to each tick label */
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];

package/dist/marks/AxisY.svelte

@@ -10,7 +10,10 @@
         RawValue,
         FacetContext,
         ChannelName,
-        ConstantAccessor
+        ConstantAccessor,
+        TickFormatFunction,
+        DataRecord,
+        ScaledChannelName
     } from '../types/index.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import { autoTicks } from '../helpers/autoTicks.js';
@@ -21,26 +24,41 @@
 
     interface AxisYMarkProps extends Omit<
         BaseMarkProps<Datum>,
-        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+        'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'textAnchor'
     > {
+        /** custom tick values to display on the axis */
         data?: Datum[];
+        /** whether this axis was automatically added by the Plot component */
         automatic?: boolean;
+        /** the axis title label; set to false or null to hide */
         title?: string | false | null;
+        /** which edge of the plot the axis appears on */
         anchor?: 'left' | 'right';
+        /** controls which facet edge displays this axis */
         facetAnchor?: 'auto' | 'left' | 'right' | 'left-empty' | 'right-empty';
+        /** vertical alignment of tick labels relative to the tick position */
         lineAnchor?: 'top' | 'center' | 'bottom';
+        /** the interval between ticks, e.g. "day", "month", or a number */
         interval?: string | number;
+        /** horizontal alignment of the axis title */
         labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        /** text anchor for tick labels */
         textAnchor?: 'auto' | 'start' | 'middle' | 'end';
+        /** the length of tick marks in pixels */
         tickSize?: number;
+        /** font size for tick labels */
         tickFontSize?: ConstantAccessor<number, Datum>;
+        /** font size for the axis title */
         titleFontSize?: number;
+        /** spacing between tick marks and tick labels in pixels */
         tickPadding?: number;
+        /** formatter for tick labels; can be "auto", an Intl format options object, or a custom function */
         tickFormat?:
             | 'auto'
             | Intl.DateTimeFormatOptions
             | Intl.NumberFormatOptions
-            | ((d: RawValue) => string);
+            | TickFormatFunction;
+        /** CSS class applied to each tick label */
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];
@@ -54,7 +72,7 @@
 
     let markProps: AxisYMarkProps = $props();
 
-    const DEFAULTS: Omit<AxisYMarkProps, 'data' | ChannelName> = {
+    const DEFAULTS = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
@@ -68,7 +86,7 @@
     const { ticks: magicTicks } = $derived({ ...DEFAULTS, ...markProps });
 
     const {
-        data,
+        data = [] as Datum[],
         automatic = false,
         title,
         anchor = 'left',
@@ -87,12 +105,12 @@
         text = true,
         ...options
     }: AxisYMarkProps = $derived({
-        data: Array.isArray(magicTicks) ? magicTicks : [],
+        data: (Array.isArray(magicTicks) ? magicTicks : []) as Datum[],
         tickCount: typeof magicTicks === 'number' ? magicTicks : undefined,
         interval: typeof magicTicks === 'string' ? magicTicks : undefined,
         ...DEFAULTS,
         ...markProps
-    });
+    } as AxisYMarkProps);
 
     const plot = usePlot();
 
@@ -120,15 +138,14 @@
     );
 
     const useCompactNotation = $derived.by(() => {
-        const range =
-            extent(plot.scales.y.domain).filter(
-                (d): d is number => typeof d === 'number' && Number.isFinite(d)
-            ) ?? [];
-
-        if (range[0] === undefined || range[1] === undefined) return false;
-        const crossesZero = range[0] <= 0 && range[1] >= 0;
+        const numericDomain = plot.scales.y.domain.filter(
+            (d): d is number => typeof d === 'number' && Number.isFinite(d)
+        );
+        if (numericDomain.length < 2) return false;
+        const [min, max] = extent(numericDomain) as [number, number];
+        const crossesZero = min <= 0 && max >= 0;
         if (crossesZero) return true;
-        const magnitudes = range.map((d) =>
+        const magnitudes = [min, max].map((d) =>
             d === 0 ? -Infinity : Math.floor(Math.log10(Math.abs(d)))
         );
         return magnitudes[0] !== magnitudes[1];
@@ -140,7 +157,7 @@
         typeof tickFmt === 'function'
             ? tickFmt
             : plot.scales.y.type === 'band' || plot.scales.y.type === 'point'
-              ? (d) => d
+              ? (d: RawValue) => String(d)
               : plot.scales.y.type === 'time'
                 ? // time scale
                   typeof tickFmt === 'object'
@@ -154,9 +171,9 @@
                         Intl.NumberFormat(plot.options.locale, {
                             // use compact notation if range covers multiple magnitudes
                             ...(useCompactNotation ? { notation: 'compact' } : {}),
-                            ...DEFAULTS.numberFormat,
+                            ...getPlotDefaults().numberFormat,
                             style: plot.options.y.percent ? 'percent' : 'decimal'
-                        }).format(d)
+                        }).format(d as number)
     );
 
     const optionsLabel = $derived(plot.options.y.label);
@@ -195,12 +212,12 @@
     type="axisY"
     data={data.length ? data.map((tick) => ({ __y: tick })) : []}
     channels={['y']}
-    {...{ ...options, y: '__y' }}
+    {...{ ...options, y: '__y' } as any}
     {automatic}>
     {#if left && top && useTitle}
         <text
             style={resolveScaledStyles(
-                null,
+                {} as DataRecord,
                 {
                     opacity: 0.8,
                     ...options,
@@ -209,7 +226,7 @@
                     stroke: null,
                     textAnchor: anchor === 'left' ? 'start' : 'end'
                 },
-                {},
+                {} as Record<ScaledChannelName, boolean>,
                 plot,
                 'fill'
             )}
@@ -224,7 +241,7 @@
             class={className}
             {lineAnchor}
             options={{
-                ...options,
+                ...(options as any),
                 textAnchor:
                     textAnchor == null || textAnchor === 'auto'
                         ? anchor === 'left'
@@ -234,16 +251,16 @@
             }}
             {plot}
             {text}
-            {tickClass}
-            {tickFontSize}
+            tickClass={tickClass as ConstantAccessor<string>}
+            tickFontSize={tickFontSize as ConstantAccessor<number>}
             {tickPadding}
             {ticks}
             {tickSize}
             marginLeft={plot.options.marginLeft}
             scaleFn={plot.scales.y.fn}
             scaleType={plot.scales.y.type}
-            tickFormat={useTickFormat}
-            title={useTitle}
+            tickFormat={useTickFormat as TickFormatFunction}
+            title={useTitle as string | null}
             width={plot.facetWidth} />
     {/if}
 </Mark>