svelteplot 0.9.2 → 0.10.0

package/dist/marks/Line.svelte

@@ -54,6 +54,7 @@
         curve: 'auto',
         tension: 0,
         canvas: false,
+        markerScale: 1,
         class: null,
         lineClass: null,
         ...getPlotDefaults().line
@@ -216,6 +217,7 @@
                                     markerMid={args.markerMid}
                                     markerEnd={args.markerEnd}
                                     marker={args.marker}
+                                    markerScale={args.markerScale}
                                     strokeWidth={args.strokeWidth}
                                     datum={lineData[0].datum}
                                     d={pathString}

package/dist/marks/Link.svelte

@@ -60,6 +60,7 @@
 
     let markProps: LinkMarkProps = $props();
     const DEFAULTS = {
+        markerScale: 1,
         ...getPlotDefaults().link
     };
     const {
@@ -179,6 +180,7 @@
                         markerStart={args.markerStart}
                         markerEnd={args.markerEnd}
                         marker={args.marker}
+                        markerScale={args.markerScale}
                         class={styleClass}
                         strokeWidth={args.strokeWidth}
                         datum={d.datum}

package/dist/marks/RuleX.svelte

@@ -10,9 +10,11 @@
         inset?: ConstantAccessor<number, Datum>;
         insetTop?: ConstantAccessor<number, Datum>;
         insetBottom?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RuleCanvas from './helpers/RuleCanvas.svelte';
     import { recordizeX } from '../transforms/recordize.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import type {
@@ -33,6 +35,7 @@
     const {
         data = [{} as Datum],
         class: className = '',
+        canvas = false,
         ...options
     }: RuleXMarkProps = $derived({
         ...DEFAULTS,
@@ -49,20 +52,41 @@
     {...markProps}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <GroupMultiple class="rule-x {className || ''}" length={className ? 2 : scaledData.length}>
-            {#each scaledData as d, i (i)}
-                {@const inset = resolveProp(args.inset, d.datum, 0)}
-                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
-                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
-                {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
-                <line
-                    transform="translate({d.x}, 0)"
-                    {style}
-                    class={[styleClass]}
-                    y1={(inset || insetTop) + (d.y1 != null ? d.y1 : plot.options.marginTop + d.dy)}
-                    y2={(d.y2 != null ? d.y2 : plot.facetHeight + plot.options.marginTop + d.dy) -
-                        (inset || insetBottom)} />
-            {/each}
-        </GroupMultiple>
+        {#if canvas}
+            <RuleCanvas
+                data={scaledData}
+                options={args}
+                {usedScales}
+                orientation="vertical"
+                marginTop={plot.options.marginTop}
+                facetHeight={plot.facetHeight} />
+        {:else}
+            <GroupMultiple
+                class="rule-x {className || ''}"
+                length={className ? 2 : scaledData.length}>
+                {#each scaledData as d, i (i)}
+                    {@const inset = resolveProp(args.inset, d.datum, 0)}
+                    {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
+                    {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        d,
+                        args,
+                        'stroke',
+                        usedScales
+                    )}
+                    <line
+                        transform="translate({d.x}, 0)"
+                        {style}
+                        class={[styleClass]}
+                        y1={(inset || insetTop) +
+                            (d.y1 != null ? d.y1 : plot.options.marginTop + d.dy)}
+                        y2={(d.y2 != null
+                            ? d.y2
+                            : plot.facetHeight + plot.options.marginTop + d.dy) -
+                            (inset || insetBottom)} />
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -71,6 +71,7 @@ declare function $$render<Datum = DataRecord | RawValue>(): {
         inset?: ConstantAccessor<number, Datum>;
         insetTop?: ConstantAccessor<number, Datum>;
         insetBottom?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/RuleY.svelte

@@ -10,9 +10,11 @@
         inset?: ConstantAccessor<number, Datum>;
         insetLeft?: ConstantAccessor<number, Datum>;
         insetRight?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import RuleCanvas from './helpers/RuleCanvas.svelte';
     import { recordizeY } from '../transforms/recordize.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import type {
@@ -33,6 +35,7 @@
     const {
         data = [{} as Datum],
         class: className = '',
+        canvas = false,
         ...options
     }: RuleYMarkProps = $derived({
         ...DEFAULTS,
@@ -49,21 +52,41 @@
     {...markProps}
     {...args}>
     {#snippet children({ scaledData, usedScales })}
-        <GroupMultiple class="rule-y {className || ''}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d, i (i)}
-                {@const inset = resolveProp(args.inset, d.datum, 0)}
-                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
-                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
-                {@const [style, styleClass] = resolveStyles(plot, d, args, 'stroke', usedScales)}
-                <line
-                    transform="translate(0, {d.y})"
-                    {style}
-                    class={[styleClass]}
-                    x1={(inset || insetLeft) +
-                        (d.x1 != null ? d.x1 : plot.options.marginLeft + d.dx)}
-                    x2={(d.x2 != null ? d.x2 : plot.facetWidth + plot.options.marginLeft + d.dx) -
-                        (inset || insetRight)} />
-            {/each}
-        </GroupMultiple>
+        {#if canvas}
+            <RuleCanvas
+                data={scaledData}
+                options={args}
+                {usedScales}
+                orientation="horizontal"
+                marginLeft={plot.options.marginLeft}
+                facetWidth={plot.facetWidth} />
+        {:else}
+            <GroupMultiple
+                class="rule-y {className || ''}"
+                length={className ? 2 : args.data.length}>
+                {#each scaledData as d, i (i)}
+                    {@const inset = resolveProp(args.inset, d.datum, 0)}
+                    {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
+                    {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        d,
+                        args,
+                        'stroke',
+                        usedScales
+                    )}
+                    <line
+                        transform="translate(0, {d.y})"
+                        {style}
+                        class={[styleClass]}
+                        x1={(inset || insetLeft) +
+                            (d.x1 != null ? d.x1 : plot.options.marginLeft + d.dx)}
+                        x2={(d.x2 != null
+                            ? d.x2
+                            : plot.facetWidth + plot.options.marginLeft + d.dx) -
+                            (inset || insetRight)} />
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -71,6 +71,7 @@ declare function $$render<Datum = DataRecord>(): {
         inset?: ConstantAccessor<number, Datum>;
         insetLeft?: ConstantAccessor<number, Datum>;
         insetRight?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/Text.svelte

@@ -6,7 +6,7 @@
 <script lang="ts" generics="Datum extends DataRecord">
     import type * as CSS from 'csstype';
 
-    interface TextMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+    interface TextCommonMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
         data?: Datum[];
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
@@ -29,10 +29,6 @@
          * the horizontal text anchor; start, end, or middle
          */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
-        /**
-         * if you want to apply class names to individual text elements
-         */
-        textClass?: ConstantAccessor<string, Datum>;
         /**
          * the line anchor for vertical position; top, bottom, or middle
          */
@@ -60,6 +56,27 @@
         rotate?: ConstantAccessor<number, Datum>;
     }
 
+    type CanvasTextMarkProps = TextCommonMarkProps & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas: true;
+        textClass?: never;
+    };
+
+    type SvgTextMarkProps = TextCommonMarkProps & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas?: false | undefined;
+        /**
+         * if you want to apply class names to individual text elements. Only supported in SVG rendering.
+         */
+        textClass?: ConstantAccessor<string, Datum>;
+    };
+
+    type TextMarkProps = SvgTextMarkProps | CanvasTextMarkProps;
+
     import { type Snippet } from 'svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import type {
@@ -74,6 +91,7 @@
     import { sort } from '../index.js';
 
     import MultilineText from './helpers/MultilineText.svelte';
+    import TextCanvas from './helpers/TextCanvas.svelte';
     import { indexData } from '../transforms/recordize';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
@@ -89,14 +107,17 @@
 
     let markProps: TextMarkProps = $props();
 
+    const mergedProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    }) as TextMarkProps;
+
     const {
         data = [{} as Datum],
+        canvas = false,
         class: className = '',
         ...options
-    }: TextMarkProps = $derived({
-        ...DEFAULTS,
-        ...markProps
-    });
+    } = $derived(mergedProps);
 
     const args = $derived(
         sort({
@@ -107,7 +128,8 @@
 </script>
 
 <Mark
-    type="text"
+    {...args}
+    type={'text' as const}
     channels={[
         'x',
         'y',
@@ -119,17 +141,24 @@
         'strokeOpacity',
         'fillOpacity'
     ]}
-    required={[]}
-    {...args}>
+    required={[]}>
     {#snippet children({ mark, scaledData, usedScales })}
-        <GroupMultiple class="text {className}" length={className ? 2 : args.data.length}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid}
-                    {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
+        {#if canvas}
+            <g class="text {className || ''}">
+                <TextCanvas data={scaledData} options={args as CanvasTextMarkProps} {usedScales} />
+            </g>
+        {:else}
+            <GroupMultiple
+                class="text {className}"
+                length={className ? 2 : (args.data?.length ?? 0)}>
+                {#each scaledData as d, i (i)}
+                    {#if d.valid}
+                        {@const textLines = String(resolveProp(args.text, d.datum, '')).split('\n')}
 
-                    <MultilineText {textLines} {d} {args} {usedScales} />
-                {/if}
-            {/each}
-        </GroupMultiple>
+                        <MultilineText {textLines} {d} args={args as any} {usedScales} />
+                    {/if}
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -2,7 +2,7 @@ import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
 import type { DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
 declare function $$render<Datum extends DataRecord>(): {
-    props: Partial<{
+    props: (Partial<{
         filter: ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
         fx: ChannelAccessor<Datum>;
@@ -89,9 +89,114 @@ declare function $$render<Datum extends DataRecord>(): {
          */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
         /**
-         * if you want to apply class names to individual text elements
+         * the line anchor for vertical position; top, bottom, or middle
+         */
+        lineAnchor?: ConstantAccessor<"bottom" | "top" | "middle">;
+        /**
+         * line height as multiplier of font size
+         * @default 1.2
+         */
+        lineHeight?: ConstantAccessor<number, Datum>;
+        frameAnchor?: ConstantAccessor<"bottom" | "top" | "left" | "right" | "top-left" | "bottom-left" | "top-right" | "bottom-right" | "middle", Datum>;
+        /**
+         * rotate text by angle in degrees
+         */
+        rotate?: ConstantAccessor<number, Datum>;
+    } & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas?: false | undefined;
+        /**
+         * if you want to apply class names to individual text elements. Only supported in SVG rendering.
          */
         textClass?: ConstantAccessor<string, Datum>;
+    }) | (Partial<{
+        filter: ConstantAccessor<boolean, Datum>;
+        facet: "auto" | "include" | "exclude";
+        fx: ChannelAccessor<Datum>;
+        fy: ChannelAccessor<Datum>;
+        dx: ConstantAccessor<number, Datum>;
+        dy: ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        fill: ChannelAccessor<Datum>;
+        fillOpacity: ConstantAccessor<number, Datum>;
+        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | ConstantAccessor<import("../types/data").RawValue, Datum>;
+        stroke: 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: ChannelAccessor<Datum>;
+        strokeDasharray: ConstantAccessor<string, Datum>;
+        strokeDashoffset: ConstantAccessor<number, 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>;
+        class: string;
+        style: string;
+        cursor: ConstantAccessor<CSS.Property.Cursor, Datum>;
+    }> & LinkableMarkProps<Datum> & {
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+        children?: Snippet;
+        text: ConstantAccessor<string | null | false | undefined, Datum>;
+        title?: ConstantAccessor<string, Datum>;
+        /**
+         * the font size of the text
+         */
+        fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
+        fontSize?: ConstantAccessor<CSS.Property.FontSize | number, Datum>;
+        fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
+        fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
+        fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;
+        letterSpacing?: ConstantAccessor<CSS.Property.LetterSpacing, Datum>;
+        wordSpacing?: ConstantAccessor<CSS.Property.WordSpacing, Datum>;
+        textTransform?: ConstantAccessor<CSS.Property.TextTransform, Datum>;
+        textDecoration?: ConstantAccessor<CSS.Property.TextDecoration, Datum>;
+        /**
+         * the horizontal text anchor; start, end, or middle
+         */
+        textAnchor?: ConstantAccessor<CSS.Property.TextAnchor, Datum>;
         /**
          * the line anchor for vertical position; top, bottom, or middle
          */
@@ -106,7 +211,13 @@ declare function $$render<Datum extends DataRecord>(): {
          * rotate text by angle in degrees
          */
         rotate?: ConstantAccessor<number, Datum>;
-    };
+    } & {
+        /**
+         * renders texts as canvas instead of SVG
+         */
+        canvas: true;
+        textClass?: never;
+    });
     exports: {};
     bindings: "";
     slots: {};

package/dist/marks/TickX.svelte

@@ -20,8 +20,10 @@
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     }
     import Mark from '../Mark.svelte';
+    import TickCanvas from './helpers/TickCanvas.svelte';
     import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
     import type {
@@ -48,6 +50,7 @@
     const {
         data = [{}],
         class: className = '',
+        canvas = false,
         ...options
     }: TickXMarkProps = $derived({
         ...DEFAULTS,
@@ -65,40 +68,44 @@
     channels={['x', 'y', 'stroke', 'opacity', 'strokeOpacity']}
     {...markProps}
     {...args}>
-    {#snippet children({ mark, usedScales })}
-        <g class="tick-x">
-            {#each args.data as datum, i (i)}
-                {#if testFacet(datum, mark.options) && testFilter(datum, args)}
-                    {@const x_ = resolveChannel('x', datum, args)}
-                    {@const y_ = resolveChannel('y', datum, args)}
-                    {@const inset_ = resolveProp(args.inset, datum, 0)}
-                    {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
-                    {@const dx_ = resolveProp(args.dx, datum, 0)}
-                    {@const dy_ = resolveProp(args.dy, datum, 0)}
-                    {#if isValid(x_) && (isValid(y_) || args.y == null) && (args.filter == null || resolveProp(args.filter, datum))}
-                        {@const x = usedScales.x ? projectX('x', plot.scales, x_) : x_}
-                        {@const y1 =
-                            args.y != null
-                                ? usedScales.y
-                                    ? projectY('y1', plot.scales, y_)
-                                    : y_
-                                : plot.options.marginTop}
-                        {@const y2 =
-                            args.y != null
-                                ? usedScales.y
-                                    ? Number(projectY('y2', plot.scales, y_))
-                                    : y_
-                                : plot.options.marginTop + plot.plotHeight}
-                        {@const inset = parseInset(inset_, Math.abs(y2 - y1))}
-                        <line
-                            transform="translate({x + dx_}, {dy_})"
-                            style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
-                            y1={y1 + inset + (y1 === y2 ? tickLength_ * 0.5 : 0)}
-                            y2={y2 - inset - (y1 === y2 ? tickLength_ * 0.5 : 0)} />
+    {#snippet children({ mark, usedScales, scaledData })}
+        {#if canvas}
+            <TickCanvas data={scaledData} options={args} {usedScales} orientation="vertical" />
+        {:else}
+            <g class="tick-x">
+                {#each args.data as datum, i (i)}
+                    {#if testFacet(datum, mark.options) && testFilter(datum, args)}
+                        {@const x_ = resolveChannel('x', datum, args)}
+                        {@const y_ = resolveChannel('y', datum, args)}
+                        {@const inset_ = resolveProp(args.inset, datum, 0)}
+                        {@const tickLength_ = resolveProp(args.tickLength, datum, 10)}
+                        {@const dx_ = resolveProp(args.dx, datum, 0)}
+                        {@const dy_ = resolveProp(args.dy, datum, 0)}
+                        {#if isValid(x_) && (isValid(y_) || args.y == null) && (args.filter == null || resolveProp(args.filter, datum))}
+                            {@const x = usedScales.x ? projectX('x', plot.scales, x_) : x_}
+                            {@const y1 =
+                                args.y != null
+                                    ? usedScales.y
+                                        ? projectY('y1', plot.scales, y_)
+                                        : y_
+                                    : plot.options.marginTop}
+                            {@const y2 =
+                                args.y != null
+                                    ? usedScales.y
+                                        ? Number(projectY('y2', plot.scales, y_))
+                                        : y_
+                                    : plot.options.marginTop + plot.plotHeight}
+                            {@const inset = parseInset(inset_, Math.abs(y2 - y1))}
+                            <line
+                                transform="translate({x + dx_}, {dy_})"
+                                style={resolveScaledStyles(datum, args, usedScales, plot, 'stroke')}
+                                y1={y1 + inset + (y1 === y2 ? tickLength_ * 0.5 : 0)}
+                                y2={y2 - inset - (y1 === y2 ? tickLength_ * 0.5 : 0)} />
+                        {/if}
                     {/if}
-                {/if}
-            {/each}
-        </g>
+                {/each}
+            </g>
+        {/if}
     {/snippet}
 </Mark>
 

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

@@ -79,6 +79,7 @@ declare function $$render<Datum extends DataRow>(): {
          * length of the tick. Defaults to 10 pixel
          */
         tickLength?: ConstantAccessor<number, Datum>;
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";