layerchart 2.0.0-next.30 → 2.0.0-next.31

package/dist/components/Axis.svelte

@@ -44,7 +44,7 @@
     ticks?: TicksConfig;
 
     /**
-     * Width or height of each tick in pxiels (responsive reduce)
+     * Width or height of each tick in pixels (enabling responsive count)
      */
     tickSpacing?: number;
 
@@ -96,7 +96,7 @@
     transitionInParams?: TransitionParams<In>;
 
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
 
@@ -183,6 +183,9 @@
   const scale = $derived(
     scaleProp ?? (['horizontal', 'angle'].includes(orientation) ? ctx.xScale : ctx.yScale)
   );
+  const interval = $derived(
+    ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
+  );
 
   const xRangeMinMax = $derived(extent<number>(ctx.xRange)) as [number, number];
   const yRangeMinMax = $derived(extent<number>(ctx.yRange)) as [number, number];
@@ -206,7 +209,7 @@
         ? Math.round(ctxSize / tickSpacing)
         : undefined
   );
-  const tickVals = $derived(resolveTickVals(scale, ticks, tickCount));
+  const tickVals = $derived(resolveTickVals(scale, ticks, tickCount, interval));
   const tickFormat = $derived(
     resolveTickFormat({
       scale,
@@ -221,27 +224,29 @@
   function getCoords(tick: any) {
     switch (placement) {
       case 'top':
-        return {
-          x: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-          y: yRangeMinMax[0],
-        };
-
       case 'bottom':
         return {
-          x: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-          y: yRangeMinMax[1],
+          x:
+            scale(tick) +
+            (isScaleBand(scale)
+              ? scale.bandwidth() / 2
+              : ctx.xInterval
+                ? (scale(ctx.xInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 width of time interval
+                : 0),
+          y: placement === 'top' ? yRangeMinMax[0] : yRangeMinMax[1],
         };
 
       case 'left':
-        return {
-          x: xRangeMinMax[0],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
-        };
-
       case 'right':
         return {
-          x: xRangeMinMax[1],
-          y: scale(tick) + (isScaleBand(scale) ? scale.bandwidth() / 2 : 0),
+          x: placement === 'left' ? xRangeMinMax[0] : xRangeMinMax[1],
+          y:
+            scale(tick) +
+            (isScaleBand(scale)
+              ? scale.bandwidth() / 2
+              : ctx.yInterval
+                ? (scale(ctx.yInterval.offset(tick)) - scale(tick)) / 2 // offset 1/2 height of time interval
+                : 0),
         };
 
       case 'angle':

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

@@ -37,7 +37,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     ticks?: TicksConfig;
     /**
-     * Width or height of each tick in pxiels (responsive reduce)
+     * Width or height of each tick in pixels (enabling responsive count)
      */
     tickSpacing?: number;
     /**
@@ -83,7 +83,7 @@ export type AxisPropsWithoutHTML<In extends Transition = Transition> = {
      */
     transitionInParams?: TransitionParams<In>;
     /**
-     * Scale for the axis
+     * Override scale for the axis
      */
     scale?: any;
     /**

package/dist/components/Bar.svelte

@@ -81,7 +81,7 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
   import type { CommonStyleProps, Without } from '../utils/types.js';
@@ -127,7 +127,7 @@
 
   const dimensions = $derived(getDimensions(data) ?? { x: 0, y: 0, width: 0, height: 0 });
 
-  const isVertical = $derived(isScaleBand(ctx.xScale));
+  const isVertical = $derived(isScaleBand(ctx.xScale) || isScaleTime(ctx.xScale));
   const valueAccessor = $derived(accessor(isVertical ? y : x));
   const value = $derived(valueAccessor(data));
   const resolvedValue = $derived(Array.isArray(value) ? greatestAbs(value) : value);
@@ -151,16 +151,20 @@
   const bottomRight = $derived(['all', 'bottom', 'right', 'bottom-right'].includes(rounded));
   const width = $derived(dimensions.width);
   const height = $derived(dimensions.height);
-  const diameter = $derived(2 * radius);
+
+  // Clamp radius to prevent extending beyond bounding box
+  const r = $derived(Math.min(radius, width / 2, height / 2));
+  const diameter = $derived(2 * r);
+
   const pathData = $derived(
-    `M${dimensions.x + radius},${dimensions.y} h${width - diameter}
-      ${topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`}
+    `M${dimensions.x + r},${dimensions.y} h${width - diameter}
+      ${topRight ? `a${r},${r} 0 0 1 ${r},${r}` : `h${r}v${r}`}
       v${height - diameter}
-      ${bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`}
+      ${bottomRight ? `a${r},${r} 0 0 1 ${-r},${r}` : `v${r}h${-r}`}
       h${diameter - width}
-      ${bottomLeft ? `a${radius},${radius} 0 0 1 ${-radius},${-radius}` : `h${-radius}v${-radius}`}
+      ${bottomLeft ? `a${r},${r} 0 0 1 ${-r},${-r}` : `h${-r}v${-r}`}
       v${diameter - height}
-      ${topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`}
+      ${topLeft ? `a${r},${r} 0 0 1 ${r},${-r}` : `v${-r}h${r}`}
       z`
       .split('\n')
       .join('')

package/dist/components/Chart.svelte

@@ -7,6 +7,7 @@
     createScale,
     getRange,
     isScaleBand,
+    isScaleTime,
     makeAccessor,
     type AnyScale,
     type DomainType,
@@ -40,6 +41,7 @@
   import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
   import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
   import { layerClass } from '../utils/attributes.js';
+  import type { TimeInterval } from 'd3-time';
 
   const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
 
@@ -149,6 +151,8 @@
     cGet: (d: T) => any;
     x1Get: (d: T) => any;
     y1Get: (d: T) => any;
+    xInterval: TimeInterval | null;
+    yInterval: TimeInterval | null;
     radial: boolean;
     tooltip: TooltipContextValue<T>;
     geo: GeoContextValue;
@@ -640,6 +644,16 @@
      */
     yBaseline?: number | null;
 
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
+
     /* Props passed to ChartContext */
 
     /**
@@ -738,6 +752,8 @@
     rRange: rRangeProp,
     xBaseline = null,
     yBaseline = null,
+    xInterval = null,
+    yInterval = null,
     meta = {},
     children: _children,
     radial = false,
@@ -780,6 +796,12 @@
 
   const _xDomain: DomainType | undefined = $derived.by(() => {
     if (xDomainProp !== undefined) return xDomainProp;
+
+    if (xInterval != null && Array.isArray(data) && data.length > 0) {
+      const lastXValue = accessor(xProp)(data[data.length - 1]);
+      return [null, xInterval.offset(lastXValue)];
+    }
+
     if (xBaseline != null && Array.isArray(data)) {
       const xValues = data.flatMap(accessor(xProp));
       return [min([xBaseline, ...xValues]), max([xBaseline, ...xValues])];
@@ -788,6 +810,12 @@
 
   const _yDomain: DomainType | undefined = $derived.by(() => {
     if (yDomainProp !== undefined) return yDomainProp;
+
+    if (yInterval != null && Array.isArray(data) && data.length > 0) {
+      const lastYValue = accessor(yProp)(data[data.length - 1]);
+      return [null, yInterval.offset(lastYValue)];
+    }
+
     if (yBaseline != null && Array.isArray(data)) {
       const yValues = data.flatMap(accessor(yProp));
       return [min([yBaseline, ...yValues]), max([yBaseline, ...yValues])];
@@ -798,7 +826,9 @@
     _yRangeProp ?? (radial ? ({ height }: { height: number }) => [0, height / 2] : undefined)
   );
 
-  const yReverse = $derived(yScaleProp ? !isScaleBand(yScaleProp) : true);
+  const yReverse = $derived(
+    yScaleProp ? !isScaleBand(yScaleProp) && !isScaleTime(yScaleProp) : true
+  );
 
   const x = $derived(makeAccessor(xProp));
   const y = $derived(makeAccessor(yProp));
@@ -1247,6 +1277,12 @@
     get y1Scale() {
       return y1Scale;
     },
+    get xInterval() {
+      return xInterval;
+    },
+    get yInterval() {
+      return yInterval;
+    },
     get radial() {
       return radial;
     },

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

@@ -8,6 +8,7 @@ import type { HierarchyNode } from 'd3-hierarchy';
 import type { SankeyGraph } from 'd3-sankey';
 import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
 import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
+import type { TimeInterval } from 'd3-time';
 export type ChartResizeDetail = {
     width: number;
     height: number;
@@ -81,6 +82,8 @@ export type ChartContextValue<T = any, XScale extends AnyScale = AnyScale, YScal
     cGet: (d: T) => any;
     x1Get: (d: T) => any;
     y1Get: (d: T) => any;
+    xInterval: TimeInterval | null;
+    yInterval: TimeInterval | null;
     radial: boolean;
     tooltip: TooltipContextValue<T>;
     geo: GeoContextValue;
@@ -484,6 +487,14 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
      * @default null
      */
     yBaseline?: number | null;
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
     /**
      * Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.
      * Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`)

package/dist/components/ForceSimulation.svelte

@@ -31,7 +31,7 @@
   > = {
     alpha: number;
     alphaTarget: number;
-    simulation: SimulationFor<NodeDatum, LinkDatum>;
+    simulation: Simulation<NodeDatum, LinkDatum>;
   };
 
   export type OnTickEvent<
@@ -40,9 +40,9 @@
   > = {
     alpha: number;
     alphaTarget: number;
-    nodes: NodeDatumFor<NodeDatum>[];
-    links: LinkDatumFor<NodeDatum, LinkDatum>[];
-    simulation: SimulationFor<NodeDatum, LinkDatum>;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
   };
 
   export type OnEndEvent<
@@ -51,7 +51,18 @@
   > = {
     alpha: number;
     alphaTarget: number;
-    simulation: SimulationFor<NodeDatum, LinkDatum>;
+    simulation: Simulation<NodeDatum, LinkDatum>;
+  };
+
+  export type OnNodesChangeEvent<
+    NodeDatum extends SimulationNodeDatum,
+    LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,
+  > = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
   };
 
   /**
@@ -81,16 +92,6 @@
    */
   export const DEFAULT_VELOCITY_DECAY: number = 0.4;
 
-  type NodeDatumFor<NodeDatum> = NodeDatum & SimulationNodeDatum;
-
-  type LinkDatumFor<NodeDatum, LinkDatum> = LinkDatum &
-    SimulationLinkDatum<NodeDatumFor<NodeDatum>>;
-
-  type SimulationFor<NodeDatum, LinkDatum> = Simulation<
-    NodeDatumFor<NodeDatum>,
-    LinkDatumFor<NodeDatum, LinkDatum>
-  >;
-
   export type ForceSimulationProps<
     NodeDatum extends SimulationNodeDatum,
     LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined,
@@ -159,6 +160,11 @@
      */
     onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
 
+    /**
+     * Callback function triggered right before nodes get passed to the simulation
+     */
+    onNodesChange?: (e: OnNodesChangeEvent<NodeDatum, LinkDatum | undefined>) => void;
+
     /**
      * Callback function triggered on each simulation tick
      */
@@ -172,10 +178,10 @@
     children?: Snippet<
       [
         {
-          nodes: NodeDatumFor<NodeDatum>[];
-          links: LinkDatumFor<NodeDatum, LinkDatum>[];
+          nodes: NodeDatum[];
+          links: LinkDatum[];
           linkPositions: LinkPosition[];
-          simulation: SimulationFor<NodeDatum, LinkDatum>;
+          simulation: Simulation<NodeDatum, LinkDatum>;
         },
       ]
     >;
@@ -200,6 +206,7 @@
     stopped = false,
     static: staticProp,
     onStart: onStartProp,
+    onNodesChange: onNodesChangeProp,
     onTick: onTickProp,
     onEnd: onEndProp,
     children,
@@ -211,15 +218,13 @@
   // MARK: Private Props
 
   let linkPositions: LinkPosition[] = $state([]);
-  let simulatedNodes: NodeDatumFor<NodeDatum>[] = $state([]);
-  let simulatedLinks: LinkDatumFor<NodeDatum, LinkDatum>[] = $derived(
-    (data.links ?? []) as LinkDatumFor<NodeDatum, LinkDatum>[]
-  );
+  let simulatedNodes: NodeDatum[] = $state([]);
+  let simulatedLinks: LinkDatum[] = $derived(data.links ?? []);
 
   // This casting is unfortunately necessary, due to unfortunate
   // overloading choices made, over at `@typed/d3-force`:
-  const simulation: SimulationFor<NodeDatum, LinkDatum> = (
-    forceSimulation() as SimulationFor<NodeDatum, LinkDatum>
+  const simulation: Simulation<NodeDatum, LinkDatum> = (
+    forceSimulation<NodeDatum>() as Simulation<NodeDatum, LinkDatum>
   ).stop();
 
   // d3.Simulation does not provide a `.forces()` getter, so we need to
@@ -263,6 +268,7 @@
     () => {
       // Any time the `nodes` prop, or the `data` store gets changed
       // we pass them to the internal d3 simulation object:
+      onNodesChange();
       pushNodesToSimulation(data.nodes);
       runOrResumeSimulation();
     }
@@ -498,6 +504,16 @@
     });
   }
 
+  function onNodesChange() {
+    onNodesChangeProp?.({
+      alpha,
+      alphaTarget,
+      nodes: data.nodes,
+      links: data.links ?? [],
+      simulation,
+    });
+  }
+
   $effect(() => {
     return () => {
       simulation.stop();

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

@@ -14,19 +14,26 @@ export type LinkPosition = {
 export type OnStartEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     alpha: number;
     alphaTarget: number;
-    simulation: SimulationFor<NodeDatum, LinkDatum>;
+    simulation: Simulation<NodeDatum, LinkDatum>;
 };
 export type OnTickEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     alpha: number;
     alphaTarget: number;
-    nodes: NodeDatumFor<NodeDatum>[];
-    links: LinkDatumFor<NodeDatum, LinkDatum>[];
-    simulation: SimulationFor<NodeDatum, LinkDatum>;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
 };
 export type OnEndEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     alpha: number;
     alphaTarget: number;
-    simulation: SimulationFor<NodeDatum, LinkDatum>;
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnNodesChangeEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
 };
 /**
  * Default initial alpha value of the simulation.
@@ -50,9 +57,6 @@ export declare const DEFAULT_ALPHA_MIN: number;
  * Default velocity decay factor applied to nodes each tick.
  */
 export declare const DEFAULT_VELOCITY_DECAY: number;
-type NodeDatumFor<NodeDatum> = NodeDatum & SimulationNodeDatum;
-type LinkDatumFor<NodeDatum, LinkDatum> = LinkDatum & SimulationLinkDatum<NodeDatumFor<NodeDatum>>;
-type SimulationFor<NodeDatum, LinkDatum> = Simulation<NodeDatumFor<NodeDatum>, LinkDatumFor<NodeDatum, LinkDatum>>;
 export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     /**
      * Force simulation parameters
@@ -107,6 +111,10 @@ export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatu
      * Callback function triggered when simulation starts
      */
     onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
+    /**
+     * Callback function triggered right before nodes get passed to the simulation
+     */
+    onNodesChange?: (e: OnNodesChangeEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered on each simulation tick
      */
@@ -117,10 +125,10 @@ export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatu
     onEnd?: (e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void;
     children?: Snippet<[
         {
-            nodes: NodeDatumFor<NodeDatum>[];
-            links: LinkDatumFor<NodeDatum, LinkDatum>[];
+            nodes: NodeDatum[];
+            links: LinkDatum[];
             linkPositions: LinkPosition[];
-            simulation: SimulationFor<NodeDatum, LinkDatum>;
+            simulation: Simulation<NodeDatum, LinkDatum>;
         }
     ]>;
 };

package/dist/components/Highlight.svelte

@@ -116,7 +116,7 @@
   import { notNull } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { asAny } from '../utils/types.js';
   import { getChartContext } from './Chart.svelte';
   import { getTooltipContext } from './tooltip/TooltipContext.svelte';
@@ -158,7 +158,9 @@
     Array.isArray(yValue) ? yValue.map((v) => ctx.yScale(v)) : ctx.yScale(yValue)
   );
   const yOffset = $derived(isScaleBand(ctx.yScale) && !ctx.radial ? ctx.yScale.bandwidth() / 2 : 0);
-  const axis = $derived(axisProp == null ? (isScaleBand(ctx.yScale) ? 'y' : 'x') : axisProp);
+  const axis = $derived(
+    axisProp == null ? (isScaleBand(ctx.yScale) || isScaleTime(ctx.yScale) ? 'y' : 'x') : axisProp
+  );
 
   const _lines: { x1: number; y1: number; x2: number; y2: number }[] = $derived.by(() => {
     let tmpLines: { x1: number; y1: number; x2: number; y2: number }[] = [];
@@ -249,6 +251,7 @@
       height: 0,
     };
     if (!highlightData) return tmpArea;
+
     if (axis === 'x' || axis === 'both') {
       // x area
       if (Array.isArray(xCoord)) {
@@ -284,9 +287,9 @@
         tmpArea.height = ctx.yScale.step();
       } else {
         // Find width to next data point
-        const index = ctx.flatData.findIndex((d) => Number(x(d)) === Number(x(highlightData)));
+        const index = ctx.flatData.findIndex((d) => Number(y(d)) === Number(y(highlightData)));
         const isLastPoint = index + 1 === ctx.flatData.length;
-        const nextDataPoint = isLastPoint ? max(ctx.yDomain) : x(ctx.flatData[index + 1]);
+        const nextDataPoint = isLastPoint ? max(ctx.yDomain) : y(ctx.flatData[index + 1]);
         tmpArea.height = (ctx.yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
       }
 

package/dist/components/charts/BarChart.svelte

@@ -141,6 +141,8 @@
     bandPadding = radial ? 0 : 0.4,
     groupPadding = 0,
     stackPadding = 0,
+    xInterval,
+    yInterval,
     tooltip = true,
     children: childrenProp,
     aboveContext,
@@ -211,21 +213,25 @@
 
   const xScale = $derived(
     xScaleProp ??
-      (isVertical
-        ? scaleBand().padding(bandPadding)
-        : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
-          ? scaleTime()
-          : scaleLinear())
+      (xInterval
+        ? scaleTime()
+        : isVertical
+          ? scaleBand().padding(bandPadding)
+          : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
+            ? scaleTime()
+            : scaleLinear())
   );
   const xBaseline = $derived(isVertical || isScaleTime(xScale) ? undefined : 0);
 
   const yScale = $derived(
     yScaleProp ??
-      (isVertical
-        ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
-          ? scaleTime()
-          : scaleLinear()
-        : scaleBand().padding(bandPadding))
+      (yInterval
+        ? scaleTime()
+        : isVertical
+          ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
+            ? scaleTime()
+            : scaleLinear()
+          : scaleBand().padding(bandPadding))
   );
   const yBaseline = $derived(isVertical || isScaleTime(yScale) ? 0 : undefined);
 
@@ -436,6 +442,7 @@
   {x1Scale}
   {x1Domain}
   {x1Range}
+  {xInterval}
   y={resolveAccessor(yProp)}
   {yScale}
   {yBaseline}
@@ -443,6 +450,7 @@
   {y1Scale}
   {y1Domain}
   {y1Range}
+  {yInterval}
   c={isVertical ? yProp : xProp}
   cRange={['var(--color-primary)']}
   {radial}

package/dist/components/tooltip/TooltipContext.svelte

@@ -135,7 +135,7 @@
   import ChartClipPath from './../ChartClipPath.svelte';
   import Voronoi from './../Voronoi.svelte';
 
-  import { isScaleBand, scaleInvert } from '../../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime, scaleInvert } from '../../utils/scales.svelte.js';
   import { cartesianToPolar } from '../../utils/math.js';
   import { quadtreeRects } from '../../utils/quadtree.js';
   import { raise } from '../../utils/chart.js';
@@ -493,14 +493,63 @@
             const fullHeight = max(ctx.yRange) - min(ctx.yRange);
 
             if (mode === 'band') {
-              // full band width/height regardless of value
-              return {
-                x: isScaleBand(ctx.xScale) ? x - xOffset : min(ctx.xRange),
-                y: isScaleBand(ctx.yScale) ? y - yOffset : min(ctx.yRange),
-                width: isScaleBand(ctx.xScale) ? ctx.xScale.step() : fullWidth,
-                height: isScaleBand(ctx.yScale) ? ctx.yScale.step() : fullHeight,
-                data: d,
-              };
+              if (isScaleBand(ctx.xScale)) {
+                // full band width/height regardless of value
+                return {
+                  x: x - xOffset,
+                  y: min(ctx.yRange),
+                  width: ctx.xScale.step(),
+                  height: fullHeight,
+                  data: d,
+                };
+              } else if (isScaleBand(ctx.yScale)) {
+                return {
+                  x: min(ctx.xRange),
+                  y: y - yOffset,
+                  width: fullWidth,
+                  height: ctx.yScale.step(),
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.xScale)) {
+                // Find width to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.x(d2)) === Number(ctx.x(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.xDomain)
+                  : ctx.x(ctx.flatData[index + 1]);
+
+                return {
+                  x: x - xOffset,
+                  y: min(ctx.yRange),
+                  width: (ctx.xScale(nextDataPoint) ?? 0) - (xValue ?? 0),
+                  height: fullHeight,
+                  data: d,
+                };
+              } else if (isScaleTime(ctx.yScale)) {
+                // Find height to next data point
+                const index = ctx.flatData.findIndex(
+                  (d2) => Number(ctx.y(d2)) === Number(ctx.y(d))
+                );
+                const isLastPoint = index + 1 === ctx.flatData.length;
+                const nextDataPoint = isLastPoint
+                  ? max(ctx.yDomain)
+                  : ctx.y(ctx.flatData[index + 1]);
+
+                return {
+                  x: min(ctx.xRange),
+                  y: y - yOffset,
+                  width: fullWidth,
+                  height: (ctx.yScale(nextDataPoint) ?? 0) - (yValue ?? 0),
+                  data: d,
+                };
+              } else {
+                console.warn(
+                  '[layerchart] TooltipContext band mode requires at least one scale to be band or time.'
+                );
+                return undefined;
+              }
             } else if (mode === 'bounds') {
               return {
                 x: isScaleBand(ctx.xScale) || Array.isArray(xValue) ? x - xOffset : min(ctx.xRange),

package/dist/utils/rect.svelte.d.ts

@@ -36,10 +36,10 @@ export declare function createDimensionGetter<TData>(ctx: ChartContextValue<TDat
     y: any;
     width: number;
     height: number;
-};
+} | undefined;
 /**
  * If value is an array, returns first item, else returns original value
  * Useful when x/y getters for band scale are an array (such as for histograms)
  */
-export declare function firstValue(value: number | number[]): number;
+export declare function firstValue(value: number | number[] | undefined): number | undefined;
 export {};

package/dist/utils/rect.svelte.js

@@ -59,7 +59,7 @@ export function createDimensionGetter(ctx, getOptions) {
             const width = Math.max(0, ctx.xScale(right) - ctx.xScale(left) - insets.left - insets.right);
             return { x, y, width, height };
         }
-        else {
+        else if (isScaleBand(ctx.xScale)) {
             // Vertical band or linear
             const x = firstValue(ctx.xScale(_x(item))) + (ctx.x1Scale ? ctx.x1Scale(_x1(item)) : 0) + insets.left;
             const width = Math.max(0, ctx.xScale.bandwidth
@@ -94,6 +94,74 @@ export function createDimensionGetter(ctx, getOptions) {
             const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
             return { x, y, width, height };
         }
+        else if (ctx.xInterval) {
+            // x-axis time scale with interval
+            const xValue = _x(item);
+            const start = ctx.xInterval.floor(xValue);
+            const end = ctx.xInterval.offset(start);
+            const x = ctx.xScale(start) + insets.left;
+            const width = ctx.xScale(end) - x - insets.right;
+            const yValue = _y(item);
+            let top = 0;
+            let bottom = 0;
+            if (Array.isArray(yValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                top = max(yValue);
+                bottom = min(yValue);
+            }
+            else if (yValue == null) {
+                // null/undefined value
+                top = 0;
+                bottom = 0;
+            }
+            else if (yValue > 0) {
+                // Positive value
+                top = yValue;
+                bottom = max([0, yDomainMinMax[0]]);
+            }
+            else {
+                // Negative value
+                top = min([0, yDomainMinMax[1]]);
+                bottom = yValue;
+            }
+            const y = ctx.yScale(top) + insets.top;
+            const height = ctx.yScale(bottom) - ctx.yScale(top) - insets.bottom - insets.top;
+            return { x, y, width, height };
+        }
+        else if (ctx.yInterval) {
+            // y-axis time scale with interval
+            const yValue = _y(item);
+            const start = ctx.yInterval.floor(yValue);
+            const end = ctx.yInterval.offset(start);
+            const y = ctx.yScale(start) + insets.top;
+            const height = ctx.yScale(end) - y - insets.bottom;
+            const xValue = _x(item);
+            let left = 0;
+            let right = 0;
+            if (Array.isArray(xValue)) {
+                // Array contains both top and bottom values (stack, etc);
+                left = min(xValue);
+                right = max(xValue);
+            }
+            else if (xValue == null) {
+                // null/undefined value
+                left = 0;
+                right = 0;
+            }
+            else if (xValue > 0) {
+                // Positive value
+                left = max([0, xDomainMinMax[0]]);
+                right = xValue;
+            }
+            else {
+                // Negative value
+                left = xValue;
+                right = min([0, xDomainMinMax[1]]);
+            }
+            const x = ctx.xScale(left) + insets.left;
+            const width = ctx.xScale(right) - x - insets.right;
+            return { x, y, width, height };
+        }
     };
 }
 /**

package/dist/utils/ticks.d.ts

@@ -9,7 +9,7 @@ export declare function getDurationFormat(duration: Duration, options?: {
 export type TicksConfig = number | any[] | ((scale: AnyScale) => any[] | undefined) | {
     interval: TimeInterval | null;
 } | null;
-export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number): any[];
+export declare function resolveTickVals(scale: AnyScale, ticks?: TicksConfig, count?: number, interval?: TimeInterval | null): any[];
 export declare function resolveTickFormat(options: {
     scale: AnyScale;
     ticks?: TicksConfig;

package/dist/utils/ticks.js

@@ -110,7 +110,7 @@ export function getDurationFormat(duration, options = {
         }
     };
 }
-export function resolveTickVals(scale, ticks, count) {
+export function resolveTickVals(scale, ticks, count, interval) {
     // Explicit ticks
     if (Array.isArray(ticks))
         return ticks;
@@ -132,7 +132,12 @@ export function resolveTickVals(scale, ticks, count) {
     }
     // Ticks from scale
     if (scale.ticks && typeof scale.ticks === 'function') {
-        return scale.ticks(count ?? (typeof ticks === 'number' ? ticks : undefined));
+        const tickVals = scale.ticks(count ?? (typeof ticks === 'number' ? ticks : undefined));
+        if (interval) {
+            // Remove last tick when interval is provided (such as for bar charts with center aligned (offset) ticks)
+            tickVals.pop();
+        }
+        return tickVals;
     }
     return [];
 }

package/dist/utils/ticks.test.js

@@ -54,4 +54,9 @@ describe('resolveTickVals', () => {
         expect(resolveTickVals(scale, null, undefined)).toEqual([1, 2, 3]);
         expect(scale.ticks).toHaveBeenCalledWith(undefined);
     });
+    it('removes last tick when interval is provided', () => {
+        const interval = { every: vi.fn() };
+        const scale = { ticks: vi.fn(() => [1, 2, 3, 4]) };
+        expect(resolveTickVals(scale, undefined, undefined, interval)).toEqual([1, 2, 3]);
+    });
 });

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.30",
+  "version": "2.0.0-next.31",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",