svelteplot 0.9.1 → 0.9.2-pr-336.1

package/dist/Mark.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type Snippet } from 'svelte';
+import { CHANNEL_SCALE } from './constants.js';
 import type { ScaledChannelName, MarkType, DataRecord, ChannelAccessor, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types/index.js';
 import { getUsedScales } from './helpers/scales.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("./types/index.js").ConstantAccessor<number, Datum>;
         dy: import("./types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("./transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("./transforms/dodge.js").DodgeYOptions;
+        dodgeX: CHANNEL_SCALE;
+        dodgeY: CHANNEL_SCALE;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("./types/index.js").ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | import("./types/index.js").ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("./types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;

package/dist/constants.d.ts

@@ -13,6 +13,6 @@ export declare const CSS_COLOR_MIX: RegExp;
 export declare const CSS_COLOR_CONTRAST: RegExp;
 export declare const CSS_RGBA: RegExp;
 export declare const CSS_URL: RegExp;
-export declare const INDEX: unique symbol;
+export declare const INDEX: any;
 export declare const PI: number;
 export declare const TAU: number;

package/dist/helpers/colors.d.ts

@@ -1,13 +1,10 @@
-import { interpolateBrBG } from 'd3-scale-chromatic';
 import type { ColorScheme } from '../types/index.js';
-export declare const categoricalSchemes: Map<string, readonly string[]>;
-export declare function isCategoricalScheme(scheme: string): boolean;
-type SchemeGetter = (n: number) => readonly string[];
+export declare const categoricalSchemes: any;
+export declare function isCategoricalScheme(scheme: string): any;
 export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
-export declare function ordinalScheme(scheme: ColorScheme | string): SchemeGetter;
-export declare function ordinalRange(scheme: ColorScheme | string, length: number): readonly string[];
-export declare function maybeBooleanRange(domain: boolean[], scheme?: ColorScheme | string): unknown[] | undefined;
-export declare function isQuantitativeScheme(scheme: string): boolean;
-export declare function quantitativeScheme(scheme: ColorScheme | string): typeof interpolateBrBG | undefined;
-export declare function isDivergingScheme(scheme: string): boolean;
-export {};
+export declare function ordinalScheme(scheme: ColorScheme | string): any;
+export declare function ordinalRange(scheme: ColorScheme | string, length: number): any;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: ColorScheme | string): any[] | undefined;
+export declare function isQuantitativeScheme(scheme: string): any;
+export declare function quantitativeScheme(scheme: ColorScheme | string): any;
+export declare function isDivergingScheme(scheme: string): any;

package/dist/helpers/curves.d.ts

@@ -1,3 +1,3 @@
 import type { CurveName } from '../types/index.js';
-import { type CurveFactory, type CurveBundleFactory } from 'd3-shape';
-export declare function maybeCurve(curve: (CurveName | CurveFactory) | undefined, tension: number): CurveFactory | CurveBundleFactory;
+import { type CurveFactory } from 'd3-shape';
+export declare function maybeCurve(curve: (CurveName | CurveFactory) | undefined, tension: number): any;

package/dist/helpers/facets.d.ts

@@ -9,4 +9,4 @@ import type { GenericMarkOptions, Mark, RawValue } from '../types/index.js';
  * @param fyValues y facet domain
  * @returns
  */
-export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): Map<RawValue, Map<RawValue, boolean>>;
+export declare function getEmptyFacets(marks: Mark<GenericMarkOptions>[], fxValues: RawValue[], fyValues: RawValue[]): any;

package/dist/helpers/getBaseStyles.d.ts

@@ -1,8 +1,6 @@
 import type { Channels } from '../types/index.js';
-export declare function getBaseStylesObject<T>(datum: T, props: Partial<Channels<T>>): {
-    [k: string]: string | number;
-};
-export default function <T>(datum: T, props: Partial<Channels<T>>): string;
+export declare function getBaseStylesObject<T>(datum: T, props: Partial<Channels<T>>): any;
+export default function <T>(datum: T, props: Partial<Channels<T>>): any;
 export declare function maybeToPixel(cssKey: string, value: string | number): string | number;
 export declare function maybeFromPixel(value: string | number): string | number;
 export declare function maybeFromRem(value: string | number, rootFontSize?: number): string | number;

package/dist/helpers/index.d.ts

@@ -3,8 +3,8 @@ import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-export declare function coalesce(...args: (RawValue | undefined | null)[]): string | number | boolean | symbol | object | null;
-export declare function testFilter<T>(datum: T, options: Channels<T>): true | T | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter<T>(datum: T, options: Channels<T>): any;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;
@@ -15,4 +15,4 @@ export declare const POSITION_CHANNELS: Set<ChannelName>;
 export declare function parseInset(inset: number | string, width: number): number;
 export declare function omit<T extends {}, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
 export declare function identity<T>(x: T): T;
-export declare const GEOJSON_PREFER_STROKE: Set<string>;
+export declare const GEOJSON_PREFER_STROKE: any;

package/dist/helpers/reduce.d.ts

@@ -4,7 +4,7 @@ type ReducerOption = ReducerName | ReducerFunc;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 export type ReducerPercentile = (`p${Digit}${Digit}` & Record<never, never>) | 'p25' | 'p50' | 'p75';
 export type ReducerName = 'count' | 'deviation' | 'difference' | 'first' | 'last' | 'max' | 'mean' | 'median' | 'min' | 'mode' | 'ratio' | 'sum' | 'variance' | ReducerPercentile;
-export declare const Reducer: Record<ReducerName, ReducerFunc>;
+export declare const Reducer: any;
 export declare function mayberReducer(r: ReducerOption): ReducerFunc;
 export declare function reduceOutputs(newDatum: DataRecord, data: DataRecord[], options: Record<ChannelName, ReducerOption>, outputs: Iterable<ChannelName>, channels: Channels, newChannels: Channels): void;
 export {};

package/dist/helpers/scales.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types/index.js';
+import type { GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, UsedScales } from '../types/index.js';
 /**
  * compute the plot scales
  */
@@ -8,19 +8,19 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     domain: number[];
     range: number[];
     fn: (() => string) | (() => number);
-    skip: Map<any, any>;
+    skip: any;
     isDummy: boolean;
     manualActiveMarks?: undefined;
     uniqueScaleProps?: undefined;
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
-    skip: Map<ScaledChannelName, Set<symbol>>;
+    skip: any;
     manualActiveMarks: number;
-    uniqueScaleProps: Set<ChannelAccessor>;
+    uniqueScaleProps: any;
     autoTitle: string | null;
     isDummy?: undefined;
 };
@@ -36,8 +36,8 @@ export declare function inferScaleType(name: ScaleName, dataValues: RawValue[],
  * not. That's what this function is used for.
  */
 export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;
-export declare function looksLikeANumber(input: string | number): boolean;
+export declare function looksLikeANumber(input: string | number): any;
 export declare function projectXY(scales: PlotScales, x: RawValue, y: RawValue, useXScale?: boolean, useYScale?: boolean): [number, number];
 export declare function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value: RawValue): number;
 export declare function projectY(channel: 'y' | 'y1' | 'y2', scales: PlotScales, value: RawValue): number;
-export declare function isOrdinalScale(scaleType: ScaleType): scaleType is "ordinal" | "point" | "band" | "categorical" | "threshold";
+export declare function isOrdinalScale(scaleType: ScaleType): scaleType is "point" | "ordinal" | "band" | "categorical" | "threshold";

package/dist/helpers/symbols.d.ts

@@ -3,5 +3,5 @@ export declare const sqrt3: number;
 export declare const sqrt4_3: number;
 type BuiltinSymbol = 'asterisk' | 'circle' | 'cross' | 'diamond' | 'diamond2' | 'hexagon' | 'plus' | 'square' | 'square2' | 'star' | 'times' | 'triangle' | 'triangle2' | 'wye';
 export declare function isSymbol(value: any): value is SymbolType | BuiltinSymbol;
-export declare function maybeSymbol(symbol: SymbolType | string): SymbolType;
+export declare function maybeSymbol(symbol: SymbolType | string): any;
 export {};

package/dist/helpers/time.d.ts

@@ -1,6 +1,6 @@
-export declare const durations: Map<string, number>;
-export declare const intervalDuration: unique symbol;
-export declare const intervalType: unique symbol;
+export declare const durations: any;
+export declare const intervalDuration: any;
+export declare const intervalType: any;
 export declare function parseTimeInterval(input: string): [string, number];
 export declare function maybeTimeInterval(input: string): any;
 export declare function maybeUtcInterval(input: string): any;

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types/index.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean | null;
+export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDate(v: RawValue): v is Date;
-export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
-export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
-export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
-export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
-export declare function isSymbolOrNull(v: RawValue | null | undefined): v is ("square" | "circle" | "asterisk" | "cross" | "diamond" | "diamond2" | "hexagon" | "plus" | "square2" | "star" | "times" | "triangle" | "triangle2" | "wye") | import("d3-shape").SymbolType | null | undefined;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
-export declare function isOpacityOrNull(v: RawValue): boolean;
+export declare function isDateOrNull(v: RawValue | null | undefined): boolean;
+export declare function isNumberOrNull(v: RawValue | null | undefined): any;
+export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): any;
+export declare function isStringOrNull(v: RawValue | null | undefined): boolean;
+export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
+export declare function isOpacityOrNull(v: RawValue): any;

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

@@ -1,4 +1,5 @@
 import { type CurveFactory } from 'd3-shape';
+import callWithProps from '../helpers/callWithProps.js';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: callWithProps;
+        dodgeY: callWithProps;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
     props: Omit<Partial<{
@@ -7,14 +8,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: renameChannels;
+        dodgeY: renameChannels;
         fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        sort: ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
         stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
@@ -75,7 +76,7 @@ declare function $$render<Datum extends DataRow>(): {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
         areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "y1" | "y2"> & {

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

@@ -1,5 +1,6 @@
 import type { DataRecord, ConstantAccessor, ChannelAccessor, RawValue } from '../types/index.js';
 import { type SweepOption } from '../helpers/arrowPath.js';
+import { replaceChannels } from '../transforms/rename.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -8,14 +9,14 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
-        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        dodgeX: replaceChannels;
+        dodgeY: replaceChannels;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;

package/dist/marks/AxisX.svelte

@@ -51,7 +51,10 @@
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor | 'auto', Datum>;
-        removeDuplicateTicks: boolean;
+        /**
+         * you can set this to true to remove duplicate tick labels
+         */
+        removeDuplicateTicks?: boolean;
     }
 
     let markProps: AxisXMarkProps = $props();
@@ -241,7 +244,7 @@
     {#if showAxis}
         <BaseAxisX
             {anchor}
-            {className}
+            class={className}
             {labelAnchor}
             options={{ ...options, ...plot.options.x }}
             {plot}

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

@@ -1,5 +1,6 @@
 import type { RawValue, ConstantAccessor } from '../types/index.js';
 import type * as CSS from 'csstype';
+import autoTimeFormat from '../helpers/autoTimeFormat.js';
 declare function $$render<Datum extends RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -8,14 +9,14 @@ declare function $$render<Datum extends RawValue>(): {
         fy: import("../types/channel").ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: autoTimeFormat;
+        dodgeY: autoTimeFormat;
         fill: import("../types/channel").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: import("../types/channel").ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -64,7 +65,7 @@ declare function $$render<Datum extends RawValue>(): {
         class: string;
         style: string;
         cursor: ConstantAccessor<CSS.Property.Cursor, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "href" | "target" | "title"> & {
+    }>, "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[];
         automatic?: boolean;
         title?: string | false | null;
@@ -88,7 +89,10 @@ declare function $$render<Datum extends RawValue>(): {
         tickSpacing?: number;
         /** text anchor for axis labels */
         textAnchor?: ConstantAccessor<CSS.Property.TextAnchor | "auto", Datum>;
-        removeDuplicateTicks: boolean;
+        /**
+         * you can set this to true to remove duplicate tick labels
+         */
+        removeDuplicateTicks?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/AxisY.svelte

@@ -221,7 +221,7 @@
     {#if showAxis}
         <BaseAxisY
             {anchor}
-            {className}
+            class={className}
             {lineAnchor}
             options={{
                 ...options,

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

@@ -1,4 +1,5 @@
 import type { RawValue, ConstantAccessor } from '../types/index.js';
+import autoTimeFormat from '../helpers/autoTimeFormat.js';
 declare function $$render<Datum extends RawValue>(): {
     props: Omit<Partial<{
         filter: ConstantAccessor<boolean, Datum>;
@@ -7,14 +8,14 @@ declare function $$render<Datum extends RawValue>(): {
         fy: import("../types/channel").ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: autoTimeFormat;
+        dodgeY: autoTimeFormat;
         fill: import("../types/channel").ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
-        sort: ((a: RawValue, b: RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ConstantAccessor<RawValue, Datum>;
+        } | ((a: RawValue, b: RawValue) => number) | ConstantAccessor<RawValue, Datum>;
         stroke: import("../types/channel").ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
@@ -63,7 +64,7 @@ declare function $$render<Datum extends RawValue>(): {
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fillOpacity" | "paintOrder" | "href" | "target" | "title"> & {
+    }>, "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[];
         automatic?: boolean;
         title?: string | false | null;

package/dist/marks/BarX.svelte

@@ -11,6 +11,11 @@
         x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         stack?: StackOptions;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+
+        canvas?: boolean;
         /**
          * Converts x into x1/x2 ranges based on the provided interval. Disables the
          * implicit stacking
@@ -25,6 +30,7 @@
     import type { DataRow } from '../types/index.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
+    import RectCanvas from './helpers/RectCanvas.svelte';
     import type {
         BaseMarkProps,
         BaseRectMarkProps,
@@ -46,6 +52,7 @@
         data = [{} as Datum],
         class: className = null,
         stack,
+        canvas = false,
         ...options
     }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
@@ -55,8 +62,7 @@
         stackX(
             intervalX(
                 // by default, sort by y channel (the ordinal labels)
-                sort(recordizeX({ data, ...options })),
-                { plot }
+                sort(recordizeX({ data, ...options }))
             ),
             stack
         )
@@ -68,25 +74,50 @@
     requiredScales={{ y: ['band'] }}
     channels={['x1', 'x2', 'y', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, usedScales, scaledData })}
-        <GroupMultiple class="bar-x" length={scaledData.length}>
-            {#each scaledData as d, i (i)}
-                {@const bw = plot.scales.y.fn.bandwidth()}
-                {@const minx = Math.min(d.x1, d.x2)}
-                {@const maxx = Math.max(d.x1, d.x2)}
-                {#if d.valid}
-                    <RectPath
-                        {usedScales}
-                        class={className}
-                        {options}
-                        datum={d}
-                        x={minx}
-                        useInsetAsFallbackHorizontally={false}
-                        y={d.y - bw * 0.5}
-                        width={maxx - minx}
-                        height={bw} />
-                {/if}
-            {/each}
-        </GroupMultiple>
+    {#snippet children({ usedScales, scaledData })}
+        {@const bw = plot.scales.y.fn.bandwidth()}
+        {@const barGroupClass = className ? `bar-x ${className}` : 'bar-x'}
+        {#if canvas}
+            {@const rectCanvasData = scaledData
+                .filter((d) => d.valid)
+                .map((d) => {
+                    const minx = Math.min(d.x1, d.x2);
+                    const maxx = Math.max(d.x1, d.x2);
+
+                    return {
+                        ...d,
+                        x1: minx,
+                        x2: maxx,
+                        y1: d.y - bw * 0.5,
+                        y2: d.y + bw * 0.5
+                    };
+                })}
+            <GroupMultiple class={barGroupClass} length={scaledData.length}>
+                <RectCanvas
+                    {options}
+                    data={rectCanvasData}
+                    {usedScales}
+                    useInsetAsFallbackHorizontally={false} />
+            </GroupMultiple>
+        {:else}
+            <GroupMultiple class="bar-x" length={scaledData.length}>
+                {#each scaledData as d, i (i)}
+                    {@const minx = Math.min(d.x1, d.x2)}
+                    {@const maxx = Math.max(d.x1, d.x2)}
+                    {#if d.valid}
+                        <RectPath
+                            {usedScales}
+                            class={className}
+                            {options}
+                            datum={d}
+                            x={minx}
+                            useInsetAsFallbackHorizontally={false}
+                            y={d.y - bw * 0.5}
+                            width={maxx - minx}
+                            height={bw} />
+                    {/if}
+                {/each}
+            </GroupMultiple>
+        {/if}
     {/snippet}
 </Mark>

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

@@ -1,3 +1,4 @@
+import { stackX } from '../index.js';
 import type { StackOptions } from '../transforms/stack.js';
 import type { DataRow } from '../types/index.js';
 import type { BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
@@ -9,14 +10,14 @@ declare function $$render<Datum extends DataRow>(): {
         fy: ChannelAccessor<Datum>;
         dx: import("../types/index.js").ConstantAccessor<number, Datum>;
         dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: stackX;
+        dodgeY: stackX;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
+        sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
@@ -72,6 +73,10 @@ declare function $$render<Datum extends DataRow>(): {
         x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         stack?: StackOptions;
+        /**
+         * Renders using Canvas instead of SVG.
+         */
+        canvas?: boolean;
         /**
          * Converts x into x1/x2 ranges based on the provided interval. Disables the
          * implicit stacking