layerchart 2.0.0-next.51 → 2.0.0-next.52

package/dist/components/Legend.svelte

@@ -77,6 +77,14 @@
      */
     selected?: string[];
 
+    /**
+     * Value to indicate on the ramp (e.g. the currently hovered data point).
+     * When set, a downward-pointing arrow is drawn above the bar at this value's
+     * position. Defaults to auto-detecting from `ctx.tooltip.data` via the
+     * chart's color accessor (`ctx.c`).
+     */
+    value?: number | string | null;
+
     /**
      * Classes to apply to the elements.
      *
@@ -149,6 +157,7 @@
     onpointerleave: onpointerleaveProp,
     variant: variantProp,
     selected: selectedProp,
+    value: valueProp,
     classes = {},
     ref: refProp = $bindable(),
     class: className,
@@ -345,6 +354,36 @@
   const variant = $derived(variantProp ?? (seriesItems ? 'swatches' : 'ramp'));
   const selected = $derived(selectedProp ?? ctx.series?.selectedKeys?.current ?? []);
 
+  // Position indicator for the currently hovered value on the ramp. If `value`
+  // is explicitly provided, use it; otherwise fall back to `ctx.tooltip.data`
+  // piped through the chart's color accessor (`ctx.c`).
+  const indicatorX = $derived.by(() => {
+    if (variant !== 'ramp' || !scale) return null;
+    let value: any = valueProp;
+    if (value == null) {
+      const data = ctx.tooltip?.data;
+      if (data == null) return null;
+      value = ctx.c?.(data);
+    }
+    if (value == null) return null;
+
+    // Threshold / quantize / quantile scales — scaleConfig.xScale maps swatch
+    // *indices* to pixels, not the raw domain value. Find which bucket the
+    // value falls into and center on that swatch.
+    if ((scale as any).invertExtent) {
+      const i = scale.range().indexOf(scale(value));
+      if (i < 0) return null;
+      const x0 = scaleConfig.xScale?.(i - 1);
+      const x1 = scaleConfig.xScale?.(i);
+      if (typeof x0 !== 'number' || typeof x1 !== 'number') return null;
+      return (x0 + x1) / 2;
+    }
+
+    const x = scaleConfig.xScale?.(value);
+    if (typeof x !== 'number' || !Number.isFinite(x)) return null;
+    return x + scaleConfig.tickLabelOffset;
+  });
+
   const swatchItems = $derived.by(() => {
     if (seriesItems) {
       // Series-based legend items
@@ -397,10 +436,13 @@
       seriesItems,
     })}
   {:else if variant === 'ramp'}
+    {@const indicatorSize = 6}
+    {@const tickLabelY = height + tickLengthProp + tickFontSize}
+    {@const svgHeight = tickLabelY}
     <svg
       {width}
-      height={height + tickLengthProp + tickFontSize}
-      viewBox="0 0 {width} {height + tickLengthProp + tickFontSize}"
+      height={svgHeight}
+      viewBox="0 0 {width} {svgHeight}"
       class={cls('lc-legend-ramp-svg')}
     >
       <g class="lc-legend-ramp-g">
@@ -423,7 +465,7 @@
           <text
             text-anchor="middle"
             x={scaleConfig.xScale?.(tick) + scaleConfig.tickLabelOffset}
-            y={height + tickLengthProp + tickFontSize}
+            y={tickLabelY}
             style:font-size={tickFontSize}
             class={cls('lc-legend-tick-text', classes.label)}
           >
@@ -442,6 +484,15 @@
           {/if}
         {/each}
       </g>
+
+      {#if indicatorX != null}
+        <path
+          d="M{indicatorX - 4},{height + indicatorSize + 1} L{indicatorX + 4},{height +
+            indicatorSize +
+            1} L{indicatorX},{height} Z"
+          class={cls('lc-legend-indicator')}
+        />
+      {/if}
     </svg>
   {:else if variant === 'swatches'}
     <div class={cls('lc-legend-swatch-group', classes.items)} data-orientation={orientation}>
@@ -537,6 +588,10 @@
       stroke: var(--color-surface-content, currentColor);
     }
 
+    :where(.lc-legend-indicator) {
+      fill: var(--color-surface-content, currentColor);
+    }
+
     :where(.lc-legend-swatch-group) {
       display: flex;
       gap: 0.25rem 1rem;

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

@@ -64,6 +64,13 @@ export type LegendPropsWithoutHTML = {
      * An array of selected items. If provided, the legend fades unselected items.
      */
     selected?: string[];
+    /**
+     * Value to indicate on the ramp (e.g. the currently hovered data point).
+     * When set, a downward-pointing arrow is drawn above the bar at this value's
+     * position. Defaults to auto-detecting from `ctx.tooltip.data` via the
+     * chart's color accessor (`ctx.c`).
+     */
+    value?: number | string | null;
     /**
      * Classes to apply to the elements.
      *

package/dist/components/charts/ArcChart.svelte

@@ -7,6 +7,7 @@
   import type { SeriesData } from './types.js';
 
   import Arc from '../Arc.svelte';
+  import ArcLabel, { type ArcLabelConfig } from '../ArcLabel.svelte';
   import Group from '../Group.svelte';
 
   export type ArcChartExtraSnippetProps<TData> = {
@@ -28,8 +29,15 @@
     ChartProps<any>,
     // Props that don't apply to ArcChart
     'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'
-  > &
-    Pick<
+  > & {
+      /**
+       * Render text labels on each arc.
+       *
+       * Pass `true` to enable with default placement (`centroid`), or an object
+       * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+       */
+      labels?: boolean | (ArcLabelConfig & { value?: Accessor });
+    } & Pick<
       ArcPropsWithoutHTML,
       | 'cornerRadius'
       | 'trackCornerRadius'
@@ -163,6 +171,7 @@
     marks,
     tooltip: tooltipProp,
     arc,
+    labels = false,
     context = $bindable(),
     trackCornerRadius,
     trackPadAngle,
@@ -175,6 +184,10 @@
 
   const center = $derived(centerProp ?? placement === 'center');
 
+  const labelsConfig = $derived(
+    labels === true ? ({} as ArcLabelConfig & { value?: Accessor }) : labels || null
+  );
+
   const c = $derived(cProp ?? key);
 
   const keyAccessor = $derived(accessor(key));
@@ -359,6 +372,30 @@
               seriesIndex: i,
               props: getArcProps(s, i),
             })}
+          {:else if labelsConfig}
+            {@const arcProps = getArcProps(s, i)}
+            <Arc {...arcProps}>
+              {#snippet children({
+                centroid,
+                startAngle,
+                endAngle,
+                innerRadius: arcInnerRadius,
+                outerRadius: arcOuterRadius,
+                getArcTextProps,
+              })}
+                {@const { value: labelValue, ...labelRest } = labelsConfig}
+                <ArcLabel
+                  {centroid}
+                  {startAngle}
+                  {endAngle}
+                  innerRadius={arcInnerRadius}
+                  outerRadius={arcOuterRadius}
+                  {getArcTextProps}
+                  value={accessor(labelValue ?? value)(s.data?.[0] || chartData[0])}
+                  {...labelRest}
+                />
+              {/snippet}
+            </Arc>
           {:else}
             <Arc {...getArcProps(s, i)} />
           {/if}

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

@@ -5,6 +5,7 @@ import type { ArcPropsWithoutHTML } from '../Arc.svelte';
 import type { Accessor } from '../../utils/common.js';
 import type { SeriesData } from './types.js';
 import Arc from '../Arc.svelte';
+import { type ArcLabelConfig } from '../ArcLabel.svelte';
 import Group from '../Group.svelte';
 export type ArcChartExtraSnippetProps<TData> = {
     key: Accessor<TData>;
@@ -19,7 +20,17 @@ export type ArcChartProps<TData> = {
      * The data for the chart
      */
     data?: TData[] | readonly TData[];
-} & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
+} & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & {
+    /**
+     * Render text labels on each arc.
+     *
+     * Pass `true` to enable with default placement (`centroid`), or an object
+     * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+     */
+    labels?: boolean | (ArcLabelConfig & {
+        value?: Accessor;
+    });
+} & Pick<ArcPropsWithoutHTML, 'cornerRadius' | 'trackCornerRadius' | 'padAngle' | 'trackPadAngle' | 'trackStartAngle' | 'trackEndAngle' | 'trackInnerRadius' | 'trackOuterRadius' | 'innerRadius' | 'outerRadius' | 'range'> & {
     /**
      * The series data to be used for the chart.
      */

package/dist/components/charts/PieChart.svelte

@@ -6,6 +6,7 @@
   import type { SeriesData } from './types.js';
 
   import Arc from '../Arc.svelte';
+  import ArcLabel, { type ArcLabelConfig } from '../ArcLabel.svelte';
   import Group from '../Group.svelte';
   import Pie from '../Pie.svelte';
 
@@ -28,6 +29,13 @@
     // Props that don't apply to PieChart
     'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'
   > & {
+      /**
+       * Render text labels on each arc.
+       *
+       * Pass `true` to enable with default placement (`centroid`), or an object
+       * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+       */
+      labels?: boolean | (ArcLabelConfig & { value?: Accessor });
       /**
        * The series data to be used for the chart.
        */
@@ -214,10 +222,17 @@
     tooltip: tooltipProp,
     pie,
     arc,
+    labels = false,
     context = $bindable(),
     ...restProps
   }: PieChartProps<TData> = $props();
 
+  const labelsConfig = $derived.by<(ArcLabelConfig & { value?: Accessor }) | null>(() => {
+    if (labels === true) return { placement: 'callout' };
+    if (labels) return { placement: 'callout', ...labels };
+    return null;
+  });
+
   const series = $derived(
     seriesProp === undefined ? [{ key: 'default', value: value }] : seriesProp
   );
@@ -402,6 +417,29 @@
                       index: arcIdx,
                       seriesIndex: seriesIdx,
                     })}
+                  {:else if labelsConfig}
+                    <Arc {...arcProps}>
+                      {#snippet children({
+                        centroid,
+                        startAngle,
+                        endAngle,
+                        innerRadius: arcInnerRadius,
+                        outerRadius: arcOuterRadius,
+                        getArcTextProps,
+                      })}
+                        {@const { value: labelValue, ...labelRest } = labelsConfig}
+                        <ArcLabel
+                          {centroid}
+                          {startAngle}
+                          {endAngle}
+                          innerRadius={arcInnerRadius}
+                          outerRadius={arcOuterRadius}
+                          {getArcTextProps}
+                          value={accessor(labelValue ?? value)(arcData.data)}
+                          {...labelRest}
+                        />
+                      {/snippet}
+                    </Arc>
                   {:else}
                     <Arc {...arcProps} />
                   {/if}

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

@@ -4,6 +4,7 @@ import type { ChartState } from '../../contexts/chart.js';
 import type { Accessor } from '../../utils/common.js';
 import type { SeriesData } from './types.js';
 import Arc from '../Arc.svelte';
+import { type ArcLabelConfig } from '../ArcLabel.svelte';
 import Group from '../Group.svelte';
 import Pie from '../Pie.svelte';
 export type PieChartExtraSnippetProps<TData> = {
@@ -19,6 +20,15 @@ export type PieChartProps<TData> = {
      */
     data?: TData[] | readonly TData[];
 } & Omit<ChartProps<any>, 'data' | 'axis' | 'brush' | 'grid' | 'highlight' | 'labels' | 'points' | 'rule'> & {
+    /**
+     * Render text labels on each arc.
+     *
+     * Pass `true` to enable with default placement (`centroid`), or an object
+     * to customize via `ArcLabel` props (placement, format, value accessor, etc).
+     */
+    labels?: boolean | (ArcLabelConfig & {
+        value?: Accessor;
+    });
     /**
      * The series data to be used for the chart.
      */

package/dist/components/index.d.ts

@@ -8,6 +8,8 @@ export { default as AnnotationRange } from './AnnotationRange.svelte';
 export * from './AnnotationRange.svelte';
 export { default as Arc } from './Arc.svelte';
 export * from './Arc.svelte';
+export { default as ArcLabel } from './ArcLabel.svelte';
+export * from './ArcLabel.svelte';
 export { default as Area } from './Area.svelte';
 export * from './Area.svelte';
 export { default as Axis } from './Axis.svelte';
@@ -94,6 +96,10 @@ export { default as Labels } from './Labels.svelte';
 export * from './Labels.svelte';
 export { default as Layer } from './layers/Layer.svelte';
 export * from './layers/Layer.svelte';
+export { default as CircleLegend } from './CircleLegend.svelte';
+export * from './CircleLegend.svelte';
+export { default as GeoLegend } from './GeoLegend.svelte';
+export * from './GeoLegend.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';

package/dist/components/index.js

@@ -8,6 +8,8 @@ export { default as AnnotationRange } from './AnnotationRange.svelte';
 export * from './AnnotationRange.svelte';
 export { default as Arc } from './Arc.svelte';
 export * from './Arc.svelte';
+export { default as ArcLabel } from './ArcLabel.svelte';
+export * from './ArcLabel.svelte';
 export { default as Area } from './Area.svelte';
 export * from './Area.svelte';
 export { default as Axis } from './Axis.svelte';
@@ -94,6 +96,10 @@ export { default as Labels } from './Labels.svelte';
 export * from './Labels.svelte';
 export { default as Layer } from './layers/Layer.svelte';
 export * from './layers/Layer.svelte';
+export { default as CircleLegend } from './CircleLegend.svelte';
+export * from './CircleLegend.svelte';
+export { default as GeoLegend } from './GeoLegend.svelte';
+export * from './GeoLegend.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';

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

@@ -39,9 +39,15 @@ export type ArcTextOptions = {
     startOffset?: string;
     /**
      * An amount of padding to add to the outer radius of the path to add space
-     * between the text and the arc.
+     * between the text and the arc. Applies to `'outer'` and `'middle'` positions.
      */
     outerPadding?: number;
+    /**
+     * An amount of padding to subtract from the inner radius of the path to add
+     * space between the text and the arc. Applies to `'inner'` and `'middle'`
+     * positions. Positive values move the text inward (toward the chart center).
+     */
+    innerPadding?: number;
     /**
      * Optional offset specifically for 'outer-radial' position from the outer arc edge.
      * If not provided, 'outerPadding' will be used.

package/dist/utils/arcText.svelte.js

@@ -172,14 +172,18 @@ export function createArcTextProps(props, opts = {}, position) {
         return undefined;
     });
     const sharedProps = $derived.by(() => {
-        if (reverseText) {
+        // Center text along the arc path by default (50% startOffset, middle anchor).
+        // When the caller provides an explicit `startOffset`, honor it with a `start`
+        // anchor so the text begins at that position instead of centering around it.
+        if (opts.startOffset != null) {
             return {
-                startOffset: opts.startOffset ?? '100%',
-                textAnchor: 'end',
+                startOffset: opts.startOffset,
+                textAnchor: 'start',
             };
         }
         return {
-            startOffset: opts.startOffset ?? undefined,
+            startOffset: '50%',
+            textAnchor: 'middle',
         };
     });
     const radialPositionProps = $derived.by(() => {

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.51",
+  "version": "2.0.0-next.52",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",