layerchart 0.51.1 → 0.52.0

package/dist/components/Axis.svelte

@@ -49,6 +49,7 @@ $: orientation =
                 : 'vertical';
 export let scale = undefined;
 $: _scale = scale ?? (['horizontal', 'angle'].includes(orientation) ? $xScale : $yScale);
+export let classes = {};
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 $: tickVals = Array.isArray(ticks)
@@ -166,11 +167,11 @@ $: resolvedLabelProps = {
     rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
     capHeight: '.5rem', // text-[10px]
     ...labelProps,
-    class: cls('label text-[10px] stroke-surface-100 [stroke-width:2px] font-light', labelProps?.class),
+    class: cls('label text-[10px] stroke-surface-100 [stroke-width:2px] font-light', classes.label, labelProps?.class),
 };
 </script>
 
-<g class="Axis placement-{placement}">
+<g class={cls('Axis placement-{placement}', classes.root, $$props.class)}>
   {#if rule !== false}
     {@const lineProps = typeof rule === 'object' ? rule : null}
     {#if orientation === 'vertical'}
@@ -270,7 +271,7 @@ $: resolvedLabelProps = {
             {tweened}
             {spring}
             {...lineProps}
-            class={cls('test grid stroke-surface-content/10', lineProps?.class)}
+            class={cls('grid stroke-surface-content/10', lineProps?.class)}
           />
         {:else if orientation === 'radius'}
           <circle

package/dist/components/Axis.svelte.d.ts

@@ -9,21 +9,26 @@ import Text from './Text.svelte';
 import { type AnyScale } from '../utils/scales.js';
 declare const __propDef: {
     props: {
-        /** Location of axis */ placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
-        /** Axis label */ label?: string;
-        /** Location of axis label */ labelPlacement?: "start" | "middle" | "end";
-        /** Props applied label Text */ labelProps?: Partial<ComponentProps<Text>> | undefined;
-        /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">;
-        /** Draw a grid lines */ grid?: boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">;
-        /** Control the number of ticks*/ ticks?: number | any[] | ((scale: AnyScale) => any) | null | undefined;
-        /** Length of the tick line */ tickLength?: number;
-        /** Format tick labels */ format?: FormatType | undefined;
-        /** Props to apply to each tick label */ tickLabelProps?: Partial<ComponentProps<Text>> | undefined;
+        [x: string]: any;
+        placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
+        label?: string | undefined;
+        labelPlacement?: ("start" | "middle" | "end") | undefined;
+        labelProps?: Partial<ComponentProps<Text>> | undefined;
+        rule?: (boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+        grid?: (boolean | Pick<SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+        ticks?: number | any[] | ((scale: AnyScale) => any) | null | undefined;
+        tickLength?: number | undefined;
+        format?: FormatType | undefined;
+        tickLabelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
-        transitionIn?: typeof fade | (() => {});
-        transitionInParams?: TransitionParams;
+        transitionIn?: (typeof fade | (() => {})) | undefined;
+        transitionInParams?: TransitionParams | undefined;
         scale?: any;
+        classes?: {
+            root?: string;
+            label?: string;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Labels.svelte

@@ -1,10 +1,10 @@
-<script>import { SvelteComponent } from 'svelte';
+<script>import {} from 'svelte';
 import { format as formatValue } from '@layerstack/utils';
 import { cls } from '@layerstack/tailwind';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
 import { chartContext } from './ChartContext.svelte';
-import Points from './Points.svelte';
+import Points, {} from './Points.svelte';
 export let placement = 'outside';
 export let offset = placement === 'center' ? 0 : 4;
 export let format = undefined;

package/dist/components/Legend.svelte

@@ -16,6 +16,9 @@ export let tickValues = undefined;
 export let tickFontSize = 10;
 export let tickLength = 4;
 export let placement = undefined;
+export let orientation = 'horizontal';
+/** Determine display ramp (individual color swatches or continuous ramp)*/
+export let variant = 'ramp';
 export let classes = {};
 $: if (scale == null && cScale) {
     // Read scale from chart context
@@ -124,45 +127,67 @@ else {
 >
   <div class={cls('text-[10px] font-semibold', classes.title)}>{title}</div>
   <slot values={tickValues ?? []} {scale}>
-    <svg
-      {width}
-      height={height + tickLength + tickFontSize}
-      viewBox="0 0 {width} {height + tickLength + tickFontSize}"
-      class="overflow-visible"
-    >
-      <g>
-        {#if interpolator}
-          <ColorRamp {width} {height} {interpolator} />
-        {:else if swatches}
-          {#each swatches as swatch, i}
-            <rect {...swatch} />
-          {/each}
-        {/if}
-      </g>
+    {#if variant === 'ramp'}
+      <svg
+        {width}
+        height={height + tickLength + tickFontSize}
+        viewBox="0 0 {width} {height + tickLength + tickFontSize}"
+        class="overflow-visible"
+      >
+        <g>
+          {#if interpolator}
+            <ColorRamp {width} {height} {interpolator} />
+          {:else if swatches}
+            {#each swatches as swatch, i}
+              <rect {...swatch} />
+            {/each}
+          {/if}
+        </g>
 
-      <g>
-        {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick, i}
-          <text
-            text-anchor="middle"
-            x={xScale(tick) + tickLabelOffset}
-            y={height + tickLength + tickFontSize}
-            style:font-size={tickFontSize}
-            class={cls('fill-surface-content text-[10px]', classes.label)}
-          >
-            {tickFormat ? format(tick, tickFormat) : tick}
-          </text>
+        <g>
+          {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick, i}
+            <text
+              text-anchor="middle"
+              x={xScale(tick) + tickLabelOffset}
+              y={height + tickLength + tickFontSize}
+              style:font-size={tickFontSize}
+              class={cls('text-[10px] fill-surface-content', classes.label)}
+            >
+              {tickFormat ? format(tick, tickFormat) : tick}
+            </text>
 
-          {#if tickLine}
-            <line
-              x1={xScale(tick)}
-              y1={0}
-              x2={xScale(tick)}
-              y2={height + tickLength}
-              class={cls('stroke-surface-content', classes.tick)}
+            {#if tickLine}
+              <line
+                x1={xScale(tick)}
+                y1={0}
+                x2={xScale(tick)}
+                y2={height + tickLength}
+                class={cls('stroke-surface-content', classes.tick)}
+              />
+            {/if}
+          {/each}
+        </g>
+      </svg>
+    {:else if variant === 'swatches'}
+      <div
+        class={cls(
+          'flex gap-x-4 gap-y-1',
+          orientation === 'vertical' && 'flex-col',
+          classes.swatches
+        )}
+      >
+        {#each tickValues ?? xScale?.ticks?.(ticks) ?? [] as tick}
+          <div class="flex gap-1">
+            <div
+              class={cls('h-4 w-4 rounded-full', classes.swatch)}
+              style:background-color={scale(tick)}
             />
-          {/if}
+            <div class={cls('text-xs text-surface-content', classes.label)}>
+              {tickFormat ? format(tick, tickFormat) : tick}
+            </div>
+          </div>
         {/each}
-      </g>
-    </svg>
+      </div>
+    {/if}
   </slot>
 </div>

package/dist/components/Legend.svelte.d.ts

@@ -13,11 +13,15 @@ declare const __propDef: {
         tickFontSize?: number | undefined;
         tickLength?: number | undefined;
         placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        orientation?: ("horizontal" | "vertical") | undefined;
+        variant?: ("ramp" | "swatches") | undefined;
         classes?: {
             root?: string;
             title?: string;
             label?: string;
             tick?: string;
+            swatches?: string;
+            swatch?: string;
         } | undefined;
     };
     events: {

package/dist/components/Points.svelte

@@ -1,3 +1,6 @@
+<script context="module">export {};
+</script>
+
 <script>import { getContext } from 'svelte';
 import { extent } from 'd3-array';
 import { pointRadial } from 'd3-shape';

package/dist/components/Points.svelte.d.ts

@@ -1,4 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+export type Point = {
+    x: number;
+    y: number;
+    r: number;
+    xValue: any;
+    yValue: any;
+    data: any;
+};
 import { type ComponentProps } from 'svelte';
 import Link from './Link.svelte';
 declare const __propDef: {
@@ -12,14 +20,7 @@ declare const __propDef: {
         fill?: string | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | string | undefined;
-        render?: ((ctx: CanvasRenderingContext2D, points: {
-            x: number;
-            y: number;
-            r: number;
-            xValue: any;
-            yValue: any;
-            data: any;
-        }[]) => any) | undefined;
+        render?: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined;
         class?: string | undefined;
     };
     events: {
@@ -27,14 +28,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            points: {
-                x: number;
-                y: number;
-                r: number;
-                xValue: any;
-                yValue: any;
-                data: any;
-            }[];
+            points: Point[];
         };
     };
 };

package/dist/components/Rule.svelte

@@ -1,8 +1,10 @@
 <script>import { extent } from 'd3-array';
+import { pointRadial } from 'd3-shape';
 import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
+import Circle from './Circle.svelte';
 import Line from './Line.svelte';
-const { xScale, yScale, xRange, yRange } = chartContext();
+const { xScale, yScale, xRange, yRange, radial } = chartContext();
 $: [xRangeMin, xRangeMax] = extent($xRange);
 $: [yRangeMin, yRangeMax] = extent($yRange);
 /**
@@ -21,28 +23,67 @@ export let x = false;
  * - Use number | Date value for annotation (xScale(value))
  */
 export let y = false;
+function showRule(value, axis) {
+    switch (typeof value) {
+        case 'boolean':
+            return value;
+        case 'string':
+            return true;
+        default:
+            if (axis === 'x') {
+                return $xScale(value) >= xRangeMin && $xScale(value) <= xRangeMax;
+            }
+            else {
+                return $yScale(value) >= yRangeMin && $yScale(value) <= yRangeMax;
+            }
+    }
+}
 </script>
 
 <g class="rule">
-  {#if x !== false}
-    <Line
-      x1={x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x)}
-      x2={x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x)}
-      y1={$yRange[0] || 0}
-      y2={$yRange[1] || 0}
-      {...$$restProps}
-      class={cls('stroke-surface-content/50', $$props.class)}
-    />
+  {#if showRule(x, 'x')}
+    {@const xCoord =
+      x === true || x === 'left' ? xRangeMin : x === 'right' ? xRangeMax : $xScale(x)}
+
+    {#if $radial}
+      {@const [x1, y1] = pointRadial(xCoord, Number(yRangeMin))}
+      {@const [x2, y2] = pointRadial(xCoord, Number(yRangeMax))}
+
+      <Line
+        {x1}
+        {y1}
+        {x2}
+        {y2}
+        {...$$restProps}
+        class={cls('test grid stroke-surface-content/10', $$props.class)}
+      />
+    {:else}
+      <Line
+        x1={xCoord}
+        x2={xCoord}
+        y1={$yRange[0] || 0}
+        y2={$yRange[1] || 0}
+        {...$$restProps}
+        class={cls('stroke-surface-content/50', $$props.class)}
+      />
+    {/if}
   {/if}
 
-  {#if y !== false}
-    <Line
-      x1={$xRange[0] || 0}
-      x2={$xRange[1] || 0}
-      y1={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
-      y2={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
-      {...$$restProps}
-      class={cls('stroke-surface-content/50', $$props.class)}
-    />
+  {#if showRule(y, 'y')}
+    {#if $radial}
+      <Circle
+        r={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+        class={cls('fill-none stroke-surface-content/50', $$props.class)}
+      />
+    {:else}
+      <Line
+        x1={$xRange[0] || 0}
+        x2={$xRange[1] || 0}
+        y1={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+        y2={y === true || y === 'bottom' ? yRangeMax : y === 'top' ? yRangeMin : $yScale(y)}
+        {...$$restProps}
+        class={cls('stroke-surface-content/50', $$props.class)}
+      />
+    {/if}
   {/if}
 </g>

package/dist/components/charts/AreaChart.svelte

@@ -1,6 +1,6 @@
 <script generics="TData">import {} from 'svelte';
-import { scaleLinear, scaleTime } from 'd3-scale';
-import { stack } from 'd3-shape';
+import { scaleLinear, scaleOrdinal, scaleTime } from 'd3-scale';
+import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
 import { sum } from 'd3-array';
 import { format } from '@layerstack/utils';
 import Area from '../Area.svelte';
@@ -8,8 +8,10 @@ import Axis from '../Axis.svelte';
 import Chart from '../Chart.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
+import Legend from '../Legend.svelte';
 import Line from '../Line.svelte';
 import Points from '../Points.svelte';
+import Rule from '../Rule.svelte';
 import Svg from '../layout/Svg.svelte';
 import * as Tooltip from '../tooltip/index.js';
 import { accessor, chartDataArray } from '../../utils/common.js';
@@ -21,9 +23,11 @@ export let radial = false;
 export let series = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
 /** Determine how to layout series.  Overlap (default) or stack */
 export let seriesLayout = 'overlap';
-$: stackSeries = seriesLayout === 'stack';
+$: stackSeries = seriesLayout.startsWith('stack');
 export let axis = true;
+export let rule = true;
 export let labels = false;
+export let legend = false;
 export let points = false;
 export let props = {};
 $: allSeriesData = series
@@ -32,7 +36,18 @@ $: allSeriesData = series
 $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data));
 $: if (stackSeries) {
     const seriesKeys = series.map((s) => s.key);
-    const stackData = stack().keys(seriesKeys)(chartDataArray(data));
+    const offset = seriesLayout === 'stackExpand'
+        ? stackOffsetExpand
+        : seriesLayout === 'stackDiverging'
+            ? stackOffsetDiverging
+            : stackOffsetNone;
+    const stackData = stack()
+        .keys(seriesKeys)
+        .value((d, key) => {
+        const s = series.find((d) => d.key === key);
+        return accessor(s.value ?? s.key)(d);
+    })
+        .offset(offset)(chartDataArray(data));
     chartData = chartData.map((d, i) => {
         return {
             ...d,
@@ -50,12 +65,17 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
   {xScale}
   y={y ??
     (stackSeries
-      ? (d) => series.map((s, i) => d.stackData[i][1])
+      ? (d) => series.flatMap((s, i) => d.stackData[i])
       : series.map((s) => s.value ?? s.key))}
   yBaseline={0}
   yNice
   {radial}
-  padding={radial || axis === false ? undefined : { left: 16, bottom: 16 }}
+  padding={radial || axis === false
+    ? undefined
+    : {
+        left: axis === true || axis === 'y' ? 16 : 0,
+        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
+      }}
   tooltip={{ mode: 'bisect-x' }}
   {...$$restProps}
   let:x
@@ -72,22 +92,29 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
     <Svg center={radial}>
       <slot name="axis" {...slotProps}>
         {#if axis}
-          <Axis
-            placement={radial ? 'radius' : 'left'}
-            grid
-            rule
-            format={(value) => format(value, undefined, { variant: 'short' })}
-            {...typeof axis === 'object' ? axis : null}
-            {...props.yAxis}
-          />
-          <Axis
-            placement={radial ? 'angle' : 'bottom'}
-            grid={radial}
-            rule
-            format={(value) => format(value, undefined, { variant: 'short' })}
-            {...typeof axis === 'object' ? axis : null}
-            {...props.xAxis}
-          />
+          {#if axis !== 'x'}
+            <Axis
+              placement={radial ? 'radius' : 'left'}
+              grid
+              format={(value) => format(value, undefined, { variant: 'short' })}
+              {...typeof axis === 'object' ? axis : null}
+              {...props.yAxis}
+            />
+          {/if}
+
+          {#if axis !== 'y'}
+            <Axis
+              placement={radial ? 'angle' : 'bottom'}
+              grid={radial}
+              format={(value) => format(value, undefined, { variant: 'short' })}
+              {...typeof axis === 'object' ? axis : null}
+              {...props.xAxis}
+            />
+          {/if}
+
+          {#if rule}
+            <Rule x={0} y={0} {...typeof rule === 'object' ? rule : null} {...props.rule} />
+          {/if}
         {/if}
       </slot>
 
@@ -156,6 +183,21 @@ $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinea
       {/if}
     </Svg>
 
+    <slot name="legend" {...slotProps}>
+      {#if legend}
+        <Legend
+          scale={scaleOrdinal(
+            series.map((s) => s.key),
+            series.map((s) => s.color)
+          )}
+          placement="bottom"
+          variant="swatches"
+          {...props.legend}
+          {...typeof legend === 'object' ? legend : null}
+        />
+      {/if}
+    </slot>
+
     <slot name="tooltip" {...slotProps}>
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(x(data))}</Tooltip.Header>

package/dist/components/charts/AreaChart.svelte.d.ts

@@ -4,8 +4,10 @@ import Area from '../Area.svelte';
 import Axis from '../Axis.svelte';
 import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
+import Legend from '../Legend.svelte';
 import Line from '../Line.svelte';
 import Points from '../Points.svelte';
+import Rule from '../Rule.svelte';
 import { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
     props(): {
@@ -179,37 +181,56 @@ declare class __sveltets_Render<TData> {
         }> | undefined;
         transformContext?: import("..").TransformContext;
     } & {
-        series?: {
-            key: string;
-            label?: string;
-            value?: Accessor<TData>;
-            /** Provider series data, else uses chart data (with value/key accessor) */
-            data?: TData[] | undefined;
-            color?: string;
-            props?: Partial<ComponentProps<Area>>;
-        }[] | undefined;
-        labels?: boolean | {
+        axis?: boolean | "x" | "y" | {
             [x: string]: any;
-            placement?: ("inside" | "outside" | "center") | undefined;
-            offset?: number | undefined;
-            format?: import("@layerstack/utils").FormatType | undefined;
-        };
-        axis?: boolean | {
             placement: "top" | "bottom" | "left" | "right" | "angle" | "radius";
-            label?: string;
-            labelPlacement?: "start" | "middle" | "end";
+            label?: string | undefined;
+            labelPlacement?: ("start" | "middle" | "end") | undefined;
             labelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
-            rule?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
-            grid?: boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">;
+            rule?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
+            grid?: (boolean | Pick<import("svelte/elements").SVGAttributes<SVGElement>, "class" | "style">) | undefined;
             ticks?: number | any[] | ((scale: import("../../utils/scales").AnyScale) => any) | null | undefined;
-            tickLength?: number;
+            tickLength?: number | undefined;
             format?: import("@layerstack/utils").FormatType | undefined;
             tickLabelProps?: Partial<ComponentProps<import("..").Text>> | undefined;
             spring?: boolean | Parameters<typeof import("svelte/motion").spring>[1];
             tweened?: boolean | Parameters<typeof import("svelte/motion").tweened>[1];
-            transitionIn?: typeof import("svelte/transition").fade | (() => {});
-            transitionInParams?: import("svelte-ux").TransitionParams;
+            transitionIn?: (typeof import("svelte/transition").fade | (() => {})) | undefined;
+            transitionInParams?: import("svelte-ux").TransitionParams | undefined;
+            scale?: any;
+            classes?: {
+                root?: string;
+                label?: string;
+            } | undefined;
+        };
+        labels?: boolean | {
+            [x: string]: any;
+            placement?: ("inside" | "outside" | "center") | undefined;
+            offset?: number | undefined;
+            format?: import("@layerstack/utils").FormatType | undefined;
+        };
+        legend?: boolean | {
+            [x: string]: any;
             scale?: any;
+            title?: string | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            ticks?: number | undefined;
+            tickFormat?: import("@layerstack/utils").FormatType | undefined;
+            tickValues?: any[] | undefined;
+            tickFontSize?: number | undefined;
+            tickLength?: number | undefined;
+            placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            orientation?: ("horizontal" | "vertical") | undefined;
+            variant?: ("ramp" | "swatches") | undefined;
+            classes?: {
+                root?: string;
+                title?: string;
+                label?: string;
+                tick?: string;
+                swatches?: string;
+                swatch?: string;
+            } | undefined;
         };
         points?: boolean | {
             [x: string]: any;
@@ -221,26 +242,35 @@ declare class __sveltets_Render<TData> {
             fill?: string | undefined;
             stroke?: string | undefined;
             strokeWidth?: number | string | undefined;
-            render?: ((ctx: CanvasRenderingContext2D, points: {
-                x: number;
-                y: number;
-                r: number;
-                xValue: any;
-                yValue: any;
-                data: any;
-            }[]) => any) | undefined;
+            render?: ((ctx: CanvasRenderingContext2D, points: import("../Points.svelte").Point[]) => any) | undefined;
             class?: string | undefined;
         };
         props?: {
             xAxis?: Partial<ComponentProps<Axis>>;
             yAxis?: Partial<ComponentProps<Axis>>;
+            rule?: Partial<ComponentProps<Rule>>;
             area?: Partial<ComponentProps<Area>>;
             line?: Partial<ComponentProps<Line>>;
+            legend?: Partial<ComponentProps<Legend>>;
             points?: Partial<ComponentProps<Points>>;
             highlight?: Partial<ComponentProps<Highlight>>;
             labels?: Partial<ComponentProps<Labels>>;
         } | undefined;
-        seriesLayout?: "overlap" | "stack";
+        rule?: boolean | {
+            [x: string]: any;
+            x?: (number | Date | boolean | "left" | "right") | undefined;
+            y?: (number | Date | boolean | "top" | "bottom") | undefined;
+        };
+        series?: {
+            key: string;
+            label?: string;
+            value?: Accessor<TData>;
+            /** Provider series data, else uses chart data (with value/key accessor) */
+            data?: TData[] | undefined;
+            color?: string;
+            props?: Partial<ComponentProps<Area>>;
+        }[] | undefined;
+        seriesLayout?: "overlap" | "stack" | "stackExpand" | "stackDiverging";
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -252,6 +282,7 @@ declare class __sveltets_Render<TData> {
         marks: any;
         'above-marks': any;
         highlight: any;
+        legend: any;
         tooltip: any;
     };
 }