nuxt-charts 3.0.0-beta.4 → 3.0.0

package/README.md

@@ -4,6 +4,11 @@ Beautiful chart components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, R
 
 Powered by [vccs](https://vue-charts.com) (Vue port of Recharts). Drop-in config-prop API from nuxt-charts v2.
 
+Nuxt UI v4 is a first-class, zero-config integration: chart series, surfaces,
+text, borders, radius, typography, and dark mode inherit its semantic design
+tokens. Nuxt UI is not a dependency; every token has a standalone fallback, so
+the same components work in any Nuxt project.
+
 ## Install
 
 ```bash
@@ -179,6 +184,25 @@ evenly (preserving both endpoints) and emit one development warning. Override
 this with `maxDataPoints`, but use pre-aggregation for genuinely dense data:
 SVG creates DOM work per mark, so raising the limit can block the UI.
 
+## Theming
+
+With Nuxt UI, no chart-specific setup is required. Categories without an
+explicit `color` use `--ui-primary`, `--ui-secondary`, `--ui-success`,
+`--ui-info`, `--ui-warning`, and `--ui-error`; chart chrome follows Nuxt UI's
+background, text, border, radius, and font tokens.
+
+Without Nuxt UI, built-in light and dark defaults are used. Customize globally
+with `--vc-*` variables (or the backwards-compatible `--chart-color-0` through
+`--chart-color-7`), and customize one chart with the `theme` prop:
+
+```vue
+<LineChart
+  :data="data"
+  :categories="categories"
+  :theme="{ colors: ['var(--brand)', 'var(--accent)'] }"
+/>
+```
+
 ## Auto-imported enums & types
 
 - Enums: `CurveType`, `LegendPosition`, `Orientation`, `DonutType`

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3"
   },
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/assets/theme.css

@@ -1 +1 @@
-@layer vue-chrts{.vue-chrts :focus,.vue-chrts :focus-visible,.vue-chrts:focus,.vue-chrts:focus-visible{outline:none}.vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-axis-line-width:1px;--vc-surface-bg:var(--ui-bg,var(--background,oklch(1 0 0)));--vc-reference-line-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-candle-up:var(--ui-success,oklch(0.696 0.17 162.48));--vc-candle-down:var(--ui-error,oklch(0.637 0.237 25.331));--vc-bg-pattern-color:var(--vc-grid-color);--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tick-size:var(--vc-legend-size);--vc-tick-weight:var(--vc-legend-weight);--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0)));--vc-axis-label-size:var(--vc-legend-size);--vc-axis-label-weight:500}.vue-chrts .v-charts-cartesian-axis .v-charts-label{fill:var(--vc-axis-label-color);font-size:var(--vc-axis-label-size);font-weight:var(--vc-axis-label-weight)}.vue-chrts{--vc-legend-gap:0.75rem;--vc-legend-inset:0.75rem;--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-legend-dot-size:0.5rem;--vc-funnel-value-size:var(--vc-legend-size);--vc-funnel-value-color:var(--vc-axis-label-color);--vc-funnel-value-weight:600;--vc-funnel-label-color:var(--vc-tick-color);--vc-funnel-label-weight:500;--vc-funnel-badge-bg:var(--vc-surface-bg);--vc-funnel-badge-color:var(--vc-tick-color);--vc-funnel-badge-border:var(--vc-axis-line-color);--vc-funnel-badge-weight:600;--vc-funnel-badge-opacity:0.82;--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0))) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--ui-bg,var(--popover,oklch(1 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.205 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-tooltip-radius:0.5rem;--vc-tooltip-padding:0.375rem 0.625rem;--vc-tooltip-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.vue-chrts .v-charts-xAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-x-tick-color,var(--vc-tick-color));font-size:var(--vc-x-tick-size,var(--vc-tick-size));font-weight:var(--vc-x-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-yAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-y-tick-color,var(--vc-tick-color));font-size:var(--vc-y-tick-size,var(--vc-tick-size));font-weight:var(--vc-y-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-polar-angle-axis-tick-value,.vue-chrts .v-charts-polar-radius-axis-tick-value{fill:var(--vc-tick-color);font-size:var(--vc-tick-size);font-weight:var(--vc-tick-weight)}.vue-chrts.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:vc-dash-march 1s linear infinite}@keyframes vc-dash-march{to{stroke-dashoffset:-6}}@media (prefers-reduced-motion:reduce){.vue-chrts.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:none}}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-surface-bg:var(--ui-bg,var(--background,oklch(0.145 0 0)));--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.985 0 0)));--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,oklch(0.985 0 0)) 8%,transparent);--vc-tooltip-bg:var(--ui-bg,var(--popover,oklch(0.205 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.985 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.269 0 0)))}}
+@layer vue-chrts{.vue-chrts :focus,.vue-chrts :focus-visible,.vue-chrts:focus,.vue-chrts:focus-visible{outline:none}.vue-chrts{--vc-font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);--vc-series-0:var(--chart-color-0,var(--ui-primary,oklch(0.63 0.18 155)));--vc-series-1:var(--chart-color-1,var(--ui-secondary,oklch(0.62 0.19 255)));--vc-series-2:var(--chart-color-2,var(--ui-success,oklch(0.64 0.17 145)));--vc-series-3:var(--chart-color-3,var(--ui-info,oklch(0.68 0.15 235)));--vc-series-4:var(--chart-color-4,var(--ui-warning,oklch(0.75 0.16 75)));--vc-series-5:var(--chart-color-5,var(--ui-error,oklch(0.63 0.22 25)));--vc-series-6:var(--chart-color-6,oklch(0.66 0.18 305));--vc-series-7:var(--chart-color-7,oklch(0.7 0.15 195));font-family:var(--vc-font-family);--vc-grid-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-axis-line-width:1px;--vc-surface-bg:var(--ui-bg,var(--background,oklch(1 0 0)));--vc-reference-line-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-candle-up:var(--ui-success,oklch(0.696 0.17 162.48));--vc-candle-down:var(--ui-error,oklch(0.637 0.237 25.331));--vc-bg-pattern-color:var(--vc-grid-color);--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tick-size:var(--vc-legend-size);--vc-tick-weight:var(--vc-legend-weight);--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0)));--vc-axis-label-size:var(--vc-legend-size);--vc-axis-label-weight:500}.vue-chrts .v-charts-cartesian-axis .v-charts-label{fill:var(--vc-axis-label-color);font-size:var(--vc-axis-label-size);font-weight:var(--vc-axis-label-weight)}.vue-chrts{--vc-legend-gap:0.75rem;--vc-legend-inset:0.75rem;--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-legend-dot-size:0.5rem;--vc-funnel-value-size:var(--vc-legend-size);--vc-funnel-value-color:var(--vc-axis-label-color);--vc-funnel-value-weight:600;--vc-funnel-label-color:var(--vc-tick-color);--vc-funnel-label-weight:500;--vc-funnel-badge-bg:var(--vc-surface-bg);--vc-funnel-badge-color:var(--vc-tick-color);--vc-funnel-badge-border:var(--vc-axis-line-color);--vc-funnel-badge-weight:600;--vc-funnel-badge-opacity:0.82;--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0))) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--ui-bg-elevated,var(--popover,oklch(1 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.205 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-tooltip-radius:var(--ui-radius,0.5rem);--vc-tooltip-padding:0.375rem 0.625rem;--vc-tooltip-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.vue-chrts .v-charts-xAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-x-tick-color,var(--vc-tick-color));font-size:var(--vc-x-tick-size,var(--vc-tick-size));font-weight:var(--vc-x-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-yAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-y-tick-color,var(--vc-tick-color));font-size:var(--vc-y-tick-size,var(--vc-tick-size));font-weight:var(--vc-y-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-polar-angle-axis-tick-value,.vue-chrts .v-charts-polar-radius-axis-tick-value{fill:var(--vc-tick-color);font-size:var(--vc-tick-size);font-weight:var(--vc-tick-weight)}.vue-chrts.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:vc-dash-march 1s linear infinite}@keyframes vc-dash-march{to{stroke-dashoffset:-6}}@media (prefers-reduced-motion:reduce){.vue-chrts.vc-dash-animated .v-charts-area-curve,.vue-chrts.vc-dash-animated .v-charts-line-curve{animation:none}}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-surface-bg:var(--ui-bg,var(--background,oklch(0.145 0 0)));--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.985 0 0)));--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,oklch(0.985 0 0)) 8%,transparent);--vc-tooltip-bg:var(--ui-bg-elevated,var(--popover,oklch(0.205 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.985 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.269 0 0)))}}

package/dist/runtime/components/DonutChart.vue

@@ -60,7 +60,7 @@ const segments = computed(() => {
   warnDataLimit("DonutChart", normalized.length, limit);
   const values = sampleData(normalized, limit);
   return values.map(({ row, value, sourceIndex, name }) => {
-    const color = cats[sourceIndex]?.color ?? `var(--chart-color-${sourceIndex})`;
+    const color = cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`;
     return {
       ...row && typeof row === "object" ? row : {},
       name,

package/dist/runtime/components/FunnelChart.vue

@@ -64,8 +64,8 @@ const stages = computed(() => {
     name,
     value,
     formattedValue: props.valueFormatter?.(value, sourceIndex),
-    fill: cats[sourceIndex]?.color ?? `var(--chart-color-${sourceIndex})`,
-    color: cats[sourceIndex]?.color ?? `var(--chart-color-${sourceIndex})`
+    fill: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`,
+    color: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`
   }));
 });
 const accessibleRows = computed(() => stages.value.map((stage) => ({ label: stage.name, values: [{ label: "Value", value: stage.formattedValue ?? stage.value }] })));

package/dist/runtime/components/RadialBarChart.vue

@@ -16,7 +16,7 @@ import PolarCenterSync from "./internal/PolarCenterSync";
 import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
 import { toCssProperties } from "../utils/style";
-import { themeToVars } from "../utils/theme";
+import { resolveHoverVisible, themeToVars } from "../utils/theme";
 import { DEFAULT_MAX_DATA_POINTS, normalizeNamedValues, sampleData, warnDataLimit } from "../utils/data";
 const props = defineProps({
   data: { type: Array, required: true },
@@ -60,7 +60,7 @@ const bars = computed(() => {
     ...row && typeof row === "object" ? row : {},
     name,
     value,
-    fill: cats[sourceIndex]?.color ?? `var(--chart-color-${sourceIndex})`
+    fill: cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`
   }));
 });
 const angles = computed(() => {
@@ -74,6 +74,24 @@ const tooltipContent = computed(
   () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness, props.tooltipTitleFormatter)
 );
 const accessibleRows = computed(() => bars.value.map((bar) => ({ label: bar.name, values: [{ label: "Value", value: bar.value }] })));
+const hiddenTooltipContent = () => null;
+const radiusInPixels = (radius, fallback) => {
+  if (typeof radius === "number") return radius;
+  const percentage = Number.parseFloat(radius);
+  return Number.isFinite(percentage) ? props.height / 2 * percentage / 100 : fallback;
+};
+const hoverStrokeWidth = computed(() => {
+  const outer = radiusInPixels(props.outerRadius ?? "100%", props.height / 2);
+  const inner = radiusInPixels(props.innerRadius ?? "30%", props.height * 0.15);
+  return Math.max((outer - inner) / Math.max(bars.value.length, 1) * 0.9, 1);
+});
+const cursor = computed(
+  () => resolveHoverVisible(props.theme) ? {
+    fill: "none",
+    stroke: "var(--vc-hover-fill)",
+    strokeWidth: hoverStrokeWidth.value
+  } : false
+);
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
 const legendWrapperStyle = computed(
   () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
@@ -113,7 +131,11 @@ const onCenter = (next) => {
         :is-animation-active="duration !== void 0 && duration !== 0"
         :transition="{ duration: (duration ?? 400) / 1e3, ease: 'easeOut' }"
       />
-      <Tooltip v-if="!hideTooltip" :content="tooltipContent" :is-animation-active="false" />
+      <Tooltip
+        :content="hideTooltip ? hiddenTooltipContent : tooltipContent"
+        :cursor="cursor"
+        :is-animation-active="false"
+      />
       <Legend
         v-if="!hideLegend"
         :align="legend.align"

package/dist/runtime/components/SankeyChart.vue

@@ -55,11 +55,11 @@ const nodeLabel = (node) => {
   const input = node;
   return props.label?.(input) ?? String(input.name ?? input.id ?? "");
 };
-const resolvedNodeColor = (node) => props.nodeColor?.(node) ?? "var(--chart-color-0)";
+const resolvedNodeColor = (node) => props.nodeColor?.(node) ?? "var(--vc-series-0)";
 const resolvedLinkColor = (link) => {
   const layoutLink = link;
   const inputLink = layoutLink.__source === void 0 ? layoutLink : { ...layoutLink, source: layoutLink.__source };
-  return props.linkColor?.(inputLink) ?? "var(--chart-color-0)";
+  return props.linkColor?.(inputLink) ?? "var(--vc-series-0)";
 };
 function handleMouseEnter(item, type) {
   activeColor.value = type === "node" ? resolvedNodeColor(item) : resolvedLinkColor(item);
@@ -135,7 +135,7 @@ const accessibleRows = computed(() => chartData.value.links.map((link) => ({
               :width="nodeProps.width"
               :height="nodeProps.height"
               :fill="resolvedNodeColor(nodeProps.payload)"
-              stroke="var(--vc-surface, #fff)"
+              stroke="var(--vc-surface-bg, #fff)"
             />
             <text
               :x="nodeProps.payload.depth === 0 ? nodeProps.x - 8 : nodeProps.x + nodeProps.width + 8"

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

@@ -296,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)'"

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/types/shared.d.ts

@@ -129,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/theme.js

@@ -4,6 +4,9 @@ export function themeToVars(theme) {
   const set = (name, value) => {
     if (value !== void 0) vars[name] = String(value);
   };
+  theme.colors?.slice(0, 8).forEach((color, index) => {
+    set(`--vc-series-${index}`, color);
+  });
   set("--vc-grid-color", theme.grid?.color);
   set("--vc-grid-dash", theme.grid?.dash);
   set("--vc-grid-width", theme.grid?.width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-charts",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0",
   "description": "Beautiful chart components for Nuxt (vccs engine) — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Sankey, Candlestick, Status Tracker",
   "license": "MIT",
   "author": "Dennis Adriaansen <adriaansendennis@gmail.com>",