svelteplot 0.10.3 → 0.11.0-pr-514.0

package/dist/marks/Arrow.svelte

@@ -1,15 +1,21 @@
 <!-- @component
     Creates arrows with customizable heads, angles, and bending
 -->
-<script lang="ts" generics="Datum extends DataRecord">
+<script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
     interface ArrowMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
+        /** the input data array; each element becomes one arrow */
         data: Datum[];
+        /** controls the order of data before rendering */
         sort?:
             | ConstantAccessor<RawValue>
             | { channel: 'stroke' | 'fill' | 'x1' | 'y1' | 'x2' | 'y2' };
+        /** the starting horizontal position channel */
         x1: ChannelAccessor<Datum>;
+        /** the starting vertical position channel */
         y1: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel */
         x2: ChannelAccessor<Datum>;
+        /** the ending vertical position channel */
         y2: ChannelAccessor<Datum>;
         /**
          * the bend angle, in degrees; defaults to 0°; true for 22.5°
@@ -35,6 +41,7 @@
          * shorthand for the two insets
          */
         inset?: ConstantAccessor<number, Datum>;
+        /** controls the sweep direction of the arrow arc; 1 or -1 */
         sweep?: SweepOption;
     }
     import type {
@@ -42,13 +49,17 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        RawValue,
-        PlotDefaults
+        RawValue
     } from '../types/index.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { coalesce, maybeNumber } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
-    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
+    import {
+        arrowPath,
+        maybeSweep,
+        type SweepFunc,
+        type SweepOption
+    } from '../helpers/arrowPath.js';
     import { replaceChannels } from '../transforms/rename.js';
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
@@ -80,10 +91,10 @@
     const args: ArrowMarkProps = $derived(
         sort(
             replaceChannels(
-                { data: indexData(data), ...options },
+                { data: indexData(data as object[]), ...options },
                 { y: ['y1', 'y2'], x: ['x1', 'x2'] }
             )
-        )
+        ) as unknown as ArrowMarkProps
     );
 </script>
 
@@ -91,29 +102,37 @@
     type="arrow"
     required={['x1', 'x2', 'y1', 'y2']}
     channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
-    {...args}>
+    {...args as any}>
     {#snippet children({ usedScales, scaledData })}
-        {@const sweep = maybeSweep(args.sweep)}
+        {@const sweep = maybeSweep(args.sweep) as SweepFunc}
         <GroupMultiple class="arrow" length={scaledData.length}>
             {#each scaledData as d, i (i)}
                 {#if d.valid}
-                    {@const inset = resolveProp(args.inset, d.datum, 0)}
-                    {@const insetStart = resolveProp(args.insetStart, d.datum)}
-                    {@const insetEnd = resolveProp(args.insetEnd, d.datum)}
-                    {@const headAngle = resolveProp(args.headAngle, d.datum)}
-                    {@const headLength = resolveProp(args.headLength, d.datum)}
-                    {@const bend = resolveProp(args.bend, d.datum, 0)}
-                    {@const strokeWidth = resolveProp(args.strokeWidth, d.datum, 1)}
+                    {@const datum = d.datum as unknown as Datum}
+                    {@const inset = resolveProp(args.inset, datum, 0)}
+                    {@const insetStart = resolveProp(args.insetStart, datum)}
+                    {@const insetEnd = resolveProp(args.insetEnd, datum)}
+                    {@const headAngle = (resolveProp(args.headAngle, datum, 60) ?? 60) as number}
+                    {@const headLength = (resolveProp(args.headLength, datum, 8) ?? 8) as number}
+                    {@const bendVal =
+                        args.bend === true
+                            ? 22.5
+                            : (resolveProp(
+                                  args.bend as ConstantAccessor<number, Datum>,
+                                  datum,
+                                  0
+                              ) ?? 0)}
+                    {@const strokeWidth = (resolveProp(args.strokeWidth, datum, 1) ?? 1) as number}
                     {@const arrPath = arrowPath(
-                        d.x1,
-                        d.y1,
-                        d.x2,
-                        d.y2,
-                        maybeNumber(coalesce(insetStart, inset)),
-                        maybeNumber(coalesce(insetEnd, inset)),
+                        d.x1 ?? 0,
+                        d.y1 ?? 0,
+                        d.x2 ?? 0,
+                        d.y2 ?? 0,
+                        maybeNumber(coalesce(insetStart, inset)) ?? 0,
+                        maybeNumber(coalesce(insetEnd, inset)) ?? 0,
                         headAngle,
                         headLength,
-                        bend === true ? 22.5 : bend === false ? 0 : bend,
+                        bendVal,
                         strokeWidth,
                         sweep
                     )}
@@ -133,7 +152,7 @@
                         class={[className]}
                         {@attach addEventHandlers({
                             plot,
-                            options,
+                            options: options as any,
                             datum: d?.datum
                         })}>
                         {#if options.onmouseenter || options.onclick}

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

@@ -1,6 +1,6 @@
 import type { DataRecord, ConstantAccessor, ChannelAccessor, RawValue } from '../types/index.js';
 import { type SweepOption } from '../helpers/arrowPath.js';
-declare function $$render<Datum extends DataRecord>(): {
+declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
@@ -12,6 +12,16 @@ declare function $$render<Datum extends DataRecord>(): {
         dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -25,53 +35,121 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").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<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }>, "fill" | "fillOpacity"> & {
+        /** the input data array; each element becomes one arrow */
         data: Datum[];
+        /** controls the order of data before rendering */
         sort?: ConstantAccessor<RawValue> | {
             channel: "stroke" | "fill" | "x1" | "y1" | "x2" | "y2";
         };
+        /** the starting horizontal position channel */
         x1: ChannelAccessor<Datum>;
+        /** the starting vertical position channel */
         y1: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel */
         x2: ChannelAccessor<Datum>;
+        /** the ending vertical position channel */
         y2: ChannelAccessor<Datum>;
         /**
          * the bend angle, in degrees; defaults to 0°; true for 22.5°
@@ -97,6 +175,7 @@ declare function $$render<Datum extends DataRecord>(): {
          * shorthand for the two insets
          */
         inset?: ConstantAccessor<number, Datum>;
+        /** controls the sweep direction of the arrow arc; 1 or -1 */
         sweep?: SweepOption;
     };
     exports: {};
@@ -104,7 +183,7 @@ declare function $$render<Datum extends DataRecord>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Datum extends DataRecord> {
+declare class __sveltets_Render<Datum = DataRecord | GeoJSON.GeoJsonObject> {
     props(): ReturnType<typeof $$render<Datum>>['props'];
     events(): ReturnType<typeof $$render<Datum>>['events'];
     slots(): ReturnType<typeof $$render<Datum>>['slots'];
@@ -112,13 +191,13 @@ declare class __sveltets_Render<Datum extends DataRecord> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+    new <Datum = DataRecord | GeoJSON.GeoJsonObject>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
     } & ReturnType<__sveltets_Render<Datum>['exports']>;
-    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum = DataRecord | GeoJSON.GeoJsonObject>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /** Creates arrows with customizable heads, angles, and bending */
 declare const Arrow: $$IsomorphicComponent;
-type Arrow<Datum extends DataRecord> = InstanceType<typeof Arrow<Datum>>;
+type Arrow<Datum = DataRecord | GeoJSON.GeoJsonObject> = InstanceType<typeof Arrow<Datum>>;
 export default Arrow;

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>