nuxt-charts 3.0.0-beta.3 → 3.0.0

package/dist/runtime/components/internal/CartesianFrame.vue

@@ -28,6 +28,9 @@ import ChartTooltip from "./ChartTooltip.vue";
 import ChartLegend from "./ChartLegend.vue";
 import ChartBackground from "./ChartBackground";
 import ChartSkeleton from "./ChartSkeleton.vue";
+import ChartEmptyState from "./ChartEmptyState.vue";
+import ChartAccessibility from "./ChartAccessibility.vue";
+import { DEFAULT_MAX_DATA_POINTS, normalizeNumericRows, sampleData, warnDataLimit } from "../../utils/data";
 const props = defineProps({
   data: { type: Array, required: true },
   height: { type: Number, required: true },
@@ -58,7 +61,6 @@ const props = defineProps({
   xAxisConfig: { type: Object, required: false },
   yAxisConfig: { type: Object, required: false },
   yAxes: { type: Object, required: false },
-  tooltip: { type: Object, required: false },
   referenceLines: { type: Array, required: false },
   syncId: { type: String, required: false },
   minMaxTicksOnly: { type: Boolean, required: false },
@@ -67,6 +69,12 @@ const props = defineProps({
   crosshairConfig: { type: Object, required: false },
   theme: { type: Object, required: false },
   backgroundPattern: { type: String, required: false },
+  ariaLabel: { type: String, required: false },
+  ariaDescription: { type: String, required: false },
+  accessibleDataTable: { type: Boolean, required: false },
+  maxDataPoints: { type: Number, required: false },
+  emptyLabel: { type: String, required: false },
+  error: { type: String, required: false },
   legendVariant: { type: String, required: false },
   tooltipVariant: { type: String, required: false },
   tooltipRoundness: { type: String, required: false },
@@ -81,6 +89,23 @@ const props = defineProps({
   skeletonShape: { type: String, required: false },
   percentAxis: { type: Boolean, required: false }
 });
+const numericKeys = computed(() => Object.keys(props.categories));
+const normalizedData = computed(() => normalizeNumericRows(props.data, numericKeys.value));
+const dataLimit = computed(() => props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS);
+const chartData = computed(() => {
+  warnDataLimit("Cartesian chart", normalizedData.value.length, dataLimit.value);
+  return sampleData(normalizedData.value, dataLimit.value);
+});
+const accessibleRows = computed(() => {
+  const series = categoriesToSeries(props.categories);
+  return chartData.value.map((row, index) => ({
+    label: props.xAxisKey === void 0 ? String(index + 1) : String(row[props.xAxisKey] ?? index + 1),
+    values: series.map((item) => ({
+      label: String(item.name),
+      value: row[item.dataKey]
+    }))
+  }));
+});
 const slots = defineSlots();
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
 const backgroundScope = useId();
@@ -89,7 +114,7 @@ const showYGrid = computed(() => props.yGridLine ?? true);
 const categoryIndexByValue = computed(() => {
   const map = /* @__PURE__ */ new Map();
   if (props.xAxisKey === void 0) return map;
-  props.data.forEach((row, i) => {
+  chartData.value.forEach((row, i) => {
     map.set(row[props.xAxisKey], i);
   });
   return map;
@@ -134,7 +159,7 @@ const yAxis = computed(
 );
 const categoryAxisTicks = computed(() => {
   if (xAxis.value.ticks) return xAxis.value.ticks;
-  return equidistantCategoryTicks(props.data, props.xNumTicks, props.xAxisKey);
+  return equidistantCategoryTicks(chartData.value, props.xNumTicks, props.xAxisKey);
 });
 const hasEquidistantCategoryTicks = computed(
   () => xAxis.value.ticks === void 0 && categoryAxisTicks.value !== void 0
@@ -178,7 +203,7 @@ const yAxisLine = computed(() => props.yDomainLine ?? true ? axisLineStyle : fal
 const xTickLineProp = computed(() => showXTickLine.value ? tickLineStyle : false);
 const yTickLineProp = computed(() => showYTickLine.value ? tickLineStyle : false);
 const mergedContainerProps = computed(() => ({
-  data: props.data,
+  data: chartData.value,
   layout: layout.value,
   syncId: props.syncId,
   ...props.containerProps
@@ -188,7 +213,7 @@ const SMALL_CATEGORY_AXIS_MAX = 12;
 function resolveCategoryAxisInterval(configured, isCategoryAxis) {
   if (configured !== void 0) return configured;
   if (hasEquidistantCategoryTicks.value) return 0;
-  if (isCategoryAxis && props.data.length <= SMALL_CATEGORY_AXIS_MAX) return 0;
+  if (isCategoryAxis && chartData.value.length <= SMALL_CATEGORY_AXIS_MAX) return 0;
   return void 0;
 }
 const xAxisInterval = computed(
@@ -215,7 +240,7 @@ const tooltipContent = computed(() => {
     if (titleFormatter && row != null) {
       label = titleFormatter(row);
     } else if (formatLabel != null && label !== void 0 && label !== "") {
-      const rowIndex = row != null ? props.data.indexOf(row) : -1;
+      const rowIndex = row != null ? chartData.value.indexOf(row) : -1;
       const index = rowIndex >= 0 ? rowIndex : typeof label === "number" ? label : Number(label);
       label = formatLabel(label, Number.isNaN(index) ? 0 : index);
     }
@@ -247,14 +272,16 @@ const resolvedYAxes = computed(() => {
 </script>
 
 <template>
-  <div class="vue-chrts" :class="frameClass" :style="rootStyle">
+  <div class="vue-chrts" :class="frameClass" :style="rootStyle" role="group" :aria-label="ariaLabel ?? 'Chart'">
+  <ChartAccessibility :label="ariaLabel ?? 'Chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
   <ChartSkeleton
     v-if="loading"
     :height="height"
     :shape="skeletonShape ?? 'bars'"
     :label="loadingLabel ?? 'Loading'"
   />
-  <ChartContainer v-else width="100%" :height="height">
+  <ChartEmptyState v-else-if="error || chartData.length === 0" :height="height" :message="error || emptyLabel" />
+  <ChartContainer v-if="!loading && !error" width="100%" :height="height" :aria-hidden="chartData.length === 0">
     <component :is="container" v-bind="mergedContainerProps">
       <!--
         First child on purpose: vccs has no z-index layer, so document order is
@@ -269,6 +296,7 @@ const resolvedYAxes = computed(() => {
         v-if="showXGrid || showYGrid"
         :horizontal="showYGrid"
         :vertical="showXGrid"
+        :sync-with-ticks="true"
         :stroke="gridStroke"
         stroke-dasharray="var(--vc-grid-dash)"
         :stroke-width="'var(--vc-grid-width)'"
@@ -343,7 +371,7 @@ const resolvedYAxes = computed(() => {
         :key="i"
         :x="line.x"
         :y="line.y"
-        :stroke="line.color ?? '#888'"
+        :stroke="line.color ?? 'var(--vc-reference-line-color)'"
         :stroke-width="line.strokeWidth ?? 1"
         :stroke-dasharray="line.strokeDasharray"
         :label="line.label"

package/dist/runtime/components/internal/ChartAccessibility.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { computed, useId } from "vue";
+const props = defineProps({
+  label: { type: String, required: false, default: void 0 },
+  description: { type: String, required: false, default: void 0 },
+  rows: { type: Array, required: false, default: () => [] },
+  showTable: { type: Boolean, required: false, default: true }
+});
+const descriptionId = useId();
+const columns = computed(() => props.rows?.[0]?.values ?? []);
+</script>
+
+<template>
+  <span v-if="description" :id="descriptionId" class="vc-sr-only">{{ description }}</span>
+  <table v-if="showTable !== false && rows?.length" class="vc-sr-only">
+    <caption>{{ label ?? "Chart data" }}</caption>
+    <thead><tr><th scope="col">Category</th><th v-for="column in columns" :key="column.label" scope="col">{{ column.label }}</th></tr></thead>
+    <tbody><tr v-for="(row, index) in rows" :key="index"><th scope="row">{{ row.label }}</th><td v-for="value in row.values" :key="value.label">{{ value.value }}</td></tr></tbody>
+  </table>
+</template>

package/dist/runtime/components/internal/{ChartSkeleton.d.vue.ts → ChartAccessibility.vue.d.ts}

@@ -1,18 +1,21 @@
+interface AccessibleRow {
+    label: string;
+    values: Array<{
+        label: string;
+        value: unknown;
+    }>;
+}
 type __VLS_Props = {
-    /** Height of the placeholder in pixels, matching the chart it stands in for. */
-    height?: number;
-    /** Silhouette to draw: a bar chart, a filled curve, or a ring. */
-    shape?: "bars" | "wave" | "ring";
-    /** Number of bars in the `bars` silhouette. */
-    bars?: number;
-    /** Text in the loading pill. Set empty to hide the pill. */
     label?: string;
+    description?: string;
+    rows?: AccessibleRow[];
+    showTable?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    height: number;
     label: string;
-    bars: number;
-    shape: "bars" | "wave" | "ring";
+    description: string;
+    rows: AccessibleRow[];
+    showTable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/internal/ChartEmptyState.vue

@@ -0,0 +1,12 @@
+<script setup>
+defineProps({
+  height: { type: Number, required: true },
+  message: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="vc-empty-state" :style="{ height: `${height}px` }" role="status">
+    {{ message ?? "No valid data" }}
+  </div>
+</template>

package/dist/runtime/components/internal/{CandlestickTooltip.d.vue.ts → ChartEmptyState.vue.d.ts}

@@ -1,16 +1,6 @@
-interface Row {
-    label: string | number;
-    open: number;
-    high: number;
-    low: number;
-    close: number;
-    volume?: number;
-}
 type __VLS_Props = {
-    row: Row;
-    upColor: string;
-    downColor: string;
-    valueFormatter?: (value: number) => string;
+    height: number;
+    message?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/internal/ChartLegend.vue.d.ts

@@ -27,8 +27,8 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: LegendIndicatorVariant;
-    payload: LegendItem[];
     colors: Record<string, string>;
+    payload: LegendItem[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/internal/ChartTooltip.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { formatNumber } from "../../utils/format";
 import { computed } from "vue";
 defineOptions({ name: "ChartTooltip", inheritAttrs: false });
 const props = defineProps({
@@ -14,7 +15,7 @@ const items = computed(
   () => (props.payload ?? []).filter((p) => p.value !== null && p.value !== void 0)
 );
 function formatValue(value) {
-  if (typeof value === "number") return value.toLocaleString();
+  if (typeof value === "number") return formatNumber(value);
   return String(value);
 }
 </script>

package/dist/runtime/components/internal/CubeBarShape.vue.d.ts

@@ -23,13 +23,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     fill: string;
     radius: number;
     background: CubeColumnBand | null;
+    emptyColor: string;
     x: number | null;
     y: number | null;
     gap: number;
     preferredSize: number;
     minSize: number;
     minOpacity: number;
-    emptyColor: string;
     includeEmpty: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/internal/FunnelClassicShape.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { formatNumber } from "../../utils/format";
 import { computed } from "vue";
 const props = defineProps({
   x: { type: Number, required: false },
@@ -79,7 +80,7 @@ export default { name: "FunnelClassicShape", inheritAttrs: false };
       stroke="none"
       text-anchor="middle"
     >
-      {{ payload.formattedValue ?? payload.value.toLocaleString() }}
+      {{ payload.formattedValue ?? formatNumber(payload.value) }}
     </text>
     <text
       v-if="geometry.showName"

package/dist/runtime/components/internal/FunnelLayeredShape.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { formatNumber } from "../../utils/format";
 import { computed } from "vue";
 const props = defineProps({
   payload: { type: Object, required: false },
@@ -116,7 +117,7 @@ export default { name: "FunnelLayeredShape", inheritAttrs: false };
       stroke="none"
       text-anchor="middle"
     >
-      {{ payload.formattedValue ?? payload.value.toLocaleString() }}
+      {{ payload.formattedValue ?? formatNumber(payload.value) }}
     </text>
 
     <template v-if="geometry.showBadge">

package/dist/runtime/components/internal/FunnelTooltip.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { formatNumber } from "../../utils/format";
 defineProps({
   datum: { type: Object, required: true },
   x: { type: Number, required: true },
@@ -20,7 +21,7 @@ defineProps({
     <span class="vc-funnel-layered__dot" :style="{ background: datum.color }" />
     <span class="vc-funnel-layered__name">{{ datum.name }}</span>
     <strong class="vc-funnel-layered__value">
-      {{ datum.formattedValue ?? datum.value.toLocaleString() }}
+      {{ datum.formattedValue ?? formatNumber(datum.value) }}
     </strong>
   </div>
 </template>

package/dist/runtime/components/internal/tooltipContent.d.ts

@@ -8,6 +8,6 @@ import type { TooltipRoundness, TooltipVariant } from "../../utils/variants.js";
  * function does — and keeps the wrapper in one place instead of repeating it
  * in every polar adapter.
  */
-export declare function tooltipContentFor(variant: TooltipVariant | undefined, roundness: TooltipRoundness | undefined): (tooltipProps: TooltipContentProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+export declare function tooltipContentFor(variant: TooltipVariant | undefined, roundness: TooltipRoundness | undefined, titleFormatter?: (data: unknown) => string | number): (tooltipProps: TooltipContentProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>;

package/dist/runtime/components/internal/tooltipContent.js

@@ -1,5 +1,9 @@
 import { h } from "vue";
 import ChartTooltip from "./ChartTooltip.vue";
-export function tooltipContentFor(variant, roundness) {
-  return (tooltipProps) => h(ChartTooltip, { ...tooltipProps, variant, roundness });
+export function tooltipContentFor(variant, roundness, titleFormatter) {
+  return (tooltipProps) => {
+    const row = tooltipProps.payload?.[0]?.payload;
+    const label = titleFormatter && row != null ? titleFormatter(row) : tooltipProps.label;
+    return h(ChartTooltip, { ...tooltipProps, label, variant, roundness });
+  };
 }

package/dist/runtime/types/charts.d.ts

@@ -14,12 +14,28 @@ import type { DitherVariant } from "../utils/dither.js";
 import type { StrokeGradientStop } from "../utils/gradient.js";
 import type { BackgroundVariant } from "../utils/background.js";
 import type { AreaFillVariant, BarVariant, DotVariant, LegendIndicatorVariant, RadarVariant, RadialVariant, StrokeVariant, TooltipRoundness, TooltipVariant } from "../utils/variants.js";
-import type { AxisConfig, AxisId, BulletLegendItemInterface, ChartPadding, ChartTheme, CrosshairConfig, MarkerConfig, TooltipConfig, YAxisConfig, axisFormatter } from "./shared.js";
+import type { AxisConfig, AxisId, BulletLegendItemInterface, ChartPadding, ChartTheme, CrosshairConfig, MarkerConfig, YAxisConfig, axisFormatter } from "./shared.js";
+/** Keys whose declared value is numeric (nullable/optional numeric fields included). */
+export type NumericKeys<T> = {
+    [K in keyof T]-?: NonNullable<T[K]> extends number ? K : never;
+}[keyof T];
 /**
  * Chrome styling shared by every chart, cartesian or polar. Each field selects
  * one of the built-in variants; omit them all for the shipped defaults.
  */
 export interface ChartStyleProps {
+    /** Accessible name for the chart. Falls back to a chart-type label. */
+    ariaLabel?: string;
+    /** Longer screen-reader description of the chart's purpose or trend. */
+    ariaDescription?: string;
+    /** Render a visually-hidden data table. Default true. */
+    accessibleDataTable?: boolean;
+    /** Maximum rows rendered as SVG/DOM marks. Default 2,000. */
+    maxDataPoints?: number;
+    /** Message shown when no valid plotted values remain. */
+    emptyLabel?: string;
+    /** Error message rendered in place of the chart. */
+    error?: string;
     /** Shape of the colour swatch beside each legend entry. Default `rounded-square`. */
     legendVariant?: LegendIndicatorVariant;
     /** Tooltip surface treatment. `frosted-glass` blurs what sits behind it. */
@@ -121,8 +137,6 @@ export interface CartesianChartBaseProps<T> extends ChartStyleProps {
      * top-level `yLabel` / `yDomain` / `yAxisConfig` props.
      */
     yAxes?: Record<AxisId, YAxisConfig>;
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
     /** Reference lines drawn across the plot area. New in v3. */
     referenceLines?: ReferenceLineConfig[];
     /**
@@ -256,7 +270,7 @@ export interface ValueLabel {
 }
 export interface BarChartProps<T> extends CartesianChartBaseProps<T> {
     /** The data keys (series) plotted on the value axis. */
-    yAxis: (keyof T)[];
+    yAxis: NumericKeys<T>[];
     /** The data key used for the category axis. */
     xAxis?: keyof T;
     /** Stack the bars instead of grouping them. */
@@ -357,8 +371,8 @@ export interface SizeOptions {
     maxRadius?: number;
 }
 /** v2 accepted Unovis-style function accessors; v3 also accepts row field keys. */
-export type BubbleAccessor<T> = keyof T | ((datum: T) => number | string | Date | null | undefined);
-export interface BubbleChartProps<T> extends CartesianChartBaseProps<T> {
+export type BubbleAccessor<T> = NumericKeys<T> | ((datum: T) => number | null | undefined);
+export type BubbleChartProps<T> = Omit<CartesianChartBaseProps<T>, "backgroundPattern" | "referenceLines" | "syncId" | "yAxes" | "yExplicitTicks"> & {
     /** Data key or accessor for the bubble's x value. */
     xAccessor: BubbleAccessor<T>;
     /** Data key or accessor for the bubble's y value. */
@@ -376,7 +390,7 @@ export interface BubbleChartProps<T> extends CartesianChartBaseProps<T> {
     opacity?: number;
     /** Options controlling bubble sizes. */
     sizeOptions?: SizeOptions;
-}
+};
 /**
  * Candlestick (OHLC) chart props. New in v3 — no `vccs` primitive exists, so the
  * adapter composes a `vccs` `<ComposedChart>` (for the real axes, grid, scales
@@ -387,7 +401,7 @@ export interface BubbleChartProps<T> extends CartesianChartBaseProps<T> {
  * accessors read `label`/`open`/`high`/`low`/`close`/`volume`, so a row shaped
  * like `{ label, open, high, low, close, volume? }` works with no config.
  */
-export interface CandlestickChartProps<T> {
+export interface CandlestickChartProps<T> extends ChartStyleProps {
     /** The data to render. Each element is one candle. */
     data: T[];
     /** Chart height in pixels. */
@@ -395,18 +409,18 @@ export interface CandlestickChartProps<T> {
     /** Row field used for the x (category) axis label. Default `"label"`. */
     xAccessor?: keyof T;
     /** Row field for the open price. Default `"open"`. */
-    openAccessor?: keyof T;
+    openAccessor?: NumericKeys<T>;
     /** Row field for the high price. Default `"high"`. */
-    highAccessor?: keyof T;
+    highAccessor?: NumericKeys<T>;
     /** Row field for the low price. Default `"low"`. */
-    lowAccessor?: keyof T;
+    lowAccessor?: NumericKeys<T>;
     /** Row field for the close price. Default `"close"`. */
-    closeAccessor?: keyof T;
+    closeAccessor?: NumericKeys<T>;
     /** Optional row field for the traded volume. Default `"volume"`. */
-    volumeAccessor?: keyof T;
-    /** Colour for rising candles (close ≥ open). Default `#10b981`. */
+    volumeAccessor?: NumericKeys<T>;
+    /** Colour for rising candles. Defaults to the `--vc-candle-up` theme token. */
     upColor?: string;
-    /** Colour for falling candles (close < open). Default `#ef4444`. */
+    /** Colour for falling candles. Defaults to the `--vc-candle-down` theme token. */
     downColor?: string;
     /** Max candle body width in pixels. Default 18. */
     candleWidth?: number;
@@ -438,12 +452,14 @@ export interface CandlestickChartProps<T> {
     hideYAxis?: boolean;
     /** Hide the tooltip. */
     hideTooltip?: boolean;
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
 }
 export interface DonutChartProps<T = unknown> extends ChartStyleProps {
-    /** Segment values, in the same order as `categories`. */
-    data: number[];
+    /** Record data (preferred), or positional values retained for v2 compatibility. */
+    data: T[] | number[];
+    /** Record field containing the segment label. */
+    nameKey?: keyof T;
+    /** Record field containing the numeric segment value. Required for record data. */
+    valueKey?: keyof T;
     /** Maps each segment to its legend representation (label, colour). */
     categories: Record<string, BulletLegendItemInterface>;
     /** Full ring or half-circle gauge. */
@@ -487,8 +503,6 @@ export interface DonutChartProps<T = unknown> extends ChartStyleProps {
     hideTooltip?: boolean;
     /** Custom formatter for tooltip titles. */
     tooltipTitleFormatter?: (data: T) => string | number;
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
     /**
      * Per-chart appearance overrides (legend, hover, tooltip). Layers over the
      * global `--vc-*` token defaults; omit to use the shipped theme.
@@ -564,8 +578,6 @@ export interface RadarChartProps<T> extends ChartStyleProps {
         bottom?: number;
         left?: number;
     };
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
     /**
      * Per-chart appearance overrides (legend, hover, tooltip). Layers over the
      * global `--vc-*` token defaults; omit to use the shipped theme.
@@ -580,8 +592,10 @@ export interface RadarChartProps<T> extends ChartStyleProps {
  * aligned with `categories`.
  */
 export interface RadialBarChartProps<T = unknown> extends ChartStyleProps {
-    /** Segment values, in the same order as `categories`. */
-    data: number[];
+    /** Record data (preferred), or positional values retained for v2 compatibility. */
+    data: T[] | number[];
+    nameKey?: keyof T;
+    valueKey?: keyof T;
     /** Maps each segment to its legend representation (label, colour). */
     categories: Record<string, BulletLegendItemInterface>;
     /** Chart height in pixels. */
@@ -614,8 +628,6 @@ export interface RadialBarChartProps<T = unknown> extends ChartStyleProps {
     hideTooltip?: boolean;
     /** Custom formatter for tooltip titles. */
     tooltipTitleFormatter?: (data: T) => string | number;
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
     /**
      * Per-chart appearance overrides (legend, hover, tooltip). Layers over the
      * global `--vc-*` token defaults; omit to use the shipped theme.
@@ -644,8 +656,10 @@ export interface FunnelLabelSizes {
     name?: number;
 }
 export interface FunnelChartProps<T = unknown> extends ChartStyleProps {
-    /** Stage values, in the same order as `categories`. Largest first reads top-down. */
-    data: number[];
+    /** Record data (preferred), or positional values retained for v2 compatibility. */
+    data: T[] | number[];
+    nameKey?: keyof T;
+    valueKey?: keyof T;
     /** Maps each stage to its legend representation (label, colour). */
     categories: Record<string, BulletLegendItemInterface>;
     /** Chart height in pixels. */
@@ -695,8 +709,6 @@ export interface FunnelChartProps<T = unknown> extends ChartStyleProps {
     hideTooltip?: boolean;
     /** Custom formatter for tooltip titles. */
     tooltipTitleFormatter?: (data: T) => string | number;
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
     /**
      * Per-chart appearance overrides (legend, hover, tooltip). Layers over the
      * global `--vc-*` token defaults; omit to use the shipped theme.
@@ -718,7 +730,7 @@ export interface StatusTrackerDatum {
  * `data` is expected oldest-to-newest. When the container cannot fit every bar,
  * older records are dropped and the newest records stay visible on the right.
  */
-export interface StatusTrackerChartProps<T extends StatusTrackerDatum = StatusTrackerDatum> {
+export interface StatusTrackerChartProps<T extends StatusTrackerDatum = StatusTrackerDatum> extends ChartStyleProps {
     /** Status samples ordered oldest-to-newest. */
     data: T[];
     /** Maps each status key to its display label and colour. */
@@ -810,8 +822,6 @@ export interface SankeyChartProps<N extends SankeyInputNode = SankeyInputNode, L
     iterations?: number;
     /** Hide the tooltip. */
     hideTooltip?: boolean;
-    /** Tooltip behaviour config. */
-    tooltip?: TooltipConfig;
     /**
      * Per-chart appearance overrides (legend, hover, tooltip). Layers over the
      * global `--vc-*` token defaults; omit to use the shipped theme.

package/dist/runtime/types/shared.d.ts

@@ -82,17 +82,6 @@ export interface AxisConfig {
     minMaxTicksOnlyShowGridLines?: boolean;
     tickValues?: readonly number[] | readonly Date[];
 }
-/**
- * Tooltip behaviour options. Mapped onto `vccs` `<Tooltip>`.
- */
-export interface TooltipConfig {
-    /** Hide delay in milliseconds. */
-    hideDelay?: number;
-    /** Show delay in milliseconds. */
-    showDelay?: number;
-    /** If `true`, the tooltip follows the cursor. */
-    followCursor?: boolean;
-}
 /**
  * @deprecated Unovis-only. `vccs` has no crosshair primitive; retained as an
  * inert type so v2 templates keep type-checking. Has no effect.
@@ -140,6 +129,11 @@ export interface ChartPadding {
  * scale legend, axis ticks, axis titles, and radar labels together.
  */
 export interface ChartTheme {
+    /**
+     * Per-chart series palette. Entries override `--vc-series-0` through
+     * `--vc-series-7`; omitted entries continue to inherit host design tokens.
+     */
+    colors?: string[];
     /** Grid + axis (domain) lines. */
     grid?: {
         /** Line colour. Token: `--vc-grid-color`. */

package/dist/runtime/utils/categories.d.ts

@@ -21,7 +21,7 @@ export interface SeriesDescriptor {
     dataKey: string;
     /** Display name shown in legend / tooltip. */
     name: string;
-    /** Resolved colour. Falls back to `var(--chart-color-N)` for CSS-var theming. */
+    /** Resolved colour. Falls back to the library's design-system-aware series token. */
     color: string;
     /** Whether the series is hidden. */
     hidden: boolean;

package/dist/runtime/utils/categories.js

@@ -4,8 +4,8 @@ export function normalizeAxisId(id) {
   return /^-?\d+$/.test(id) ? Number(id) : id;
 }
 function resolveColor(color, index) {
-  if (Array.isArray(color)) return color[0] ?? `var(--chart-color-${index})`;
-  return color ?? `var(--chart-color-${index})`;
+  if (Array.isArray(color)) return color[0] ?? `var(--vc-series-${index % 8})`;
+  return color ?? `var(--vc-series-${index % 8})`;
 }
 export function categoriesToSeries(categories) {
   return Object.entries(categories).map(([dataKey, item], index) => ({

package/dist/runtime/utils/data.d.ts

@@ -0,0 +1,19 @@
+/** Default ceiling for DOM/SVG data marks. Consumers may lower or raise it. */
+export declare const DEFAULT_MAX_DATA_POINTS = 2000;
+/** Convert numeric API input without allowing NaN or infinity into geometry. */
+export declare function toFiniteNumber(value: unknown): number | undefined;
+/** Evenly retain the first/last values and representative values in between. */
+export declare function sampleData<T>(data: readonly T[], limit?: number): T[];
+/** Keep only finite positional values. Invalid entries are gaps, never zeroes. */
+export declare function normalizeValues(data: readonly unknown[]): number[];
+export interface NamedValue<T = unknown> {
+    row: T | undefined;
+    name: string;
+    value: number;
+    sourceIndex: number;
+}
+/** Resolve both the v2 positional API and the v3 record-based API. */
+export declare function normalizeNamedValues<T>(data: readonly number[] | readonly T[], categoryNames: readonly string[], nameKey?: keyof T, valueKey?: keyof T): NamedValue<T>[];
+/** Normalize selected row fields and discard rows with any invalid plotted value. */
+export declare function normalizeNumericRows<T>(data: readonly T[], keys: readonly (keyof T)[]): T[];
+export declare function warnDataLimit(chart: string, received: number, limit: number): void;

package/dist/runtime/utils/data.js

@@ -0,0 +1,50 @@
+export const DEFAULT_MAX_DATA_POINTS = 2e3;
+export function toFiniteNumber(value) {
+  if (value === null || value === void 0 || value === "") return void 0;
+  const number = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(number) ? number : void 0;
+}
+export function sampleData(data, limit = DEFAULT_MAX_DATA_POINTS) {
+  const size = Math.max(1, Math.floor(limit));
+  if (data.length <= size) return [...data];
+  if (size === 1) return [data[data.length - 1]];
+  return Array.from(
+    { length: size },
+    (_, index) => data[Math.round(index * (data.length - 1) / (size - 1))]
+  );
+}
+export function normalizeValues(data) {
+  return data.flatMap((value) => {
+    const number = toFiniteNumber(value);
+    return number === void 0 ? [] : [number];
+  });
+}
+export function normalizeNamedValues(data, categoryNames, nameKey, valueKey) {
+  return data.flatMap((entry, sourceIndex) => {
+    const recordMode = valueKey !== void 0 && typeof entry === "object" && entry !== null;
+    const row = recordMode ? entry : void 0;
+    const value = toFiniteNumber(recordMode ? row[valueKey] : entry);
+    if (value === void 0) return [];
+    const rawName = recordMode && nameKey !== void 0 ? row[nameKey] : categoryNames[sourceIndex];
+    return [{ row, value, sourceIndex, name: String(rawName ?? sourceIndex) }];
+  });
+}
+export function normalizeNumericRows(data, keys) {
+  return data.flatMap((row) => {
+    const copy = { ...row };
+    for (const key of keys) {
+      const value = toFiniteNumber(row[key]);
+      if (value === void 0) return [];
+      copy[key] = value;
+    }
+    return [copy];
+  });
+}
+const warned = /* @__PURE__ */ new Set();
+export function warnDataLimit(chart, received, limit) {
+  if (!import.meta.dev || received <= limit || warned.has(chart)) return;
+  warned.add(chart);
+  console.warn(
+    `[nuxt-charts] ${chart} received ${received.toLocaleString()} rows; rendering a ${limit.toLocaleString()}-row sample. Set maxDataPoints to override.`
+  );
+}