nuxt-charts 3.0.0-beta.2 → 3.0.0-beta.4

package/README.md

@@ -1,6 +1,6 @@
 # nuxt-charts
 
-Beautiful chart components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Candlestick and Status Tracker.
+Beautiful chart components for Nuxt — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Sankey, Candlestick and Status Tracker.
 
 Powered by [vccs](https://vue-charts.com) (Vue port of Recharts). Drop-in config-prop API from nuxt-charts v2.
 
@@ -21,14 +21,15 @@ export default defineNuxtConfig({
 
 | Component | Notes |
 |---|---|
-| `AreaChart` | Gradients, dither fills, stacked |
-| `BarChart` | Grouped, stacked, horizontal, cube bars |
-| `LineChart` | Multi-series, curve types |
+| `AreaChart` | Gradients, dither fills, textured fills, stacked |
+| `BarChart` | Grouped, stacked, horizontal, cube bars, patterned fills |
+| `LineChart` | Multi-series, curve types, dashed / animated strokes |
 | `DonutChart` | Center slot for labels |
 | `BubbleChart` | Scatter with size encoding |
 | `RadarChart` | New in v3 |
 | `RadialBarChart` | New in v3 |
 | `FunnelChart` | New in v3 |
+| `SankeyChart` | New in v3 |
 | `CandlestickChart` | New in v3 |
 | `StatusTrackerChart` | New in v3 |
 
@@ -71,10 +72,74 @@ Each axis accepts `orientation`, `label`, `domain`, `numTicks`, `formatter`,
 the top-level `yLabel` / `yDomain` / `yAxisConfig` props. Supported on
 `LineChart`, `AreaChart` and `BarChart` (vertical orientation).
 
+## Style variants
+
+Every treatment below is opt-in — a chart that sets none of them renders exactly
+as it did before. The playground's `/variants` page shows them side by side.
+
+### Series fills
+
+| Prop | Chart | Values |
+|---|---|---|
+| `variant` | `BarChart` | `solid` (default), `cubes`, `hatched`, `duotone`, `duotone-reverse`, `gradient`, `stripped` |
+| `variant` | `AreaChart` | `gradient`, `gradient-reverse`, `solid`, `dotted`, `lines`, `hatched` |
+| `variant` | `RadarChart` | `filled` (default), `lines`, `gradient` (inside to outside), `gradient-reverse` (outside to inside) |
+| `variant` | `RadialBarChart` | `full` (default), `semi` |
+| `variant` | `DonutChart` | `flat` (default), `gradient` |
+
+On `AreaChart` the fill treatments layer over the v2 `gradient` fade and yield to
+`dither`, which is a texture of its own.
+
+### Series detail
+
+- `strokeVariant` — `solid`, `dashed`, `animated-dashed` (line + area).
+- `dotVariant` — `default`, `border`, `colored-border`, `ping` (line, area,
+  radar), sized by `dotSize`.
+- `glow` — a soft outer glow (bar, line, area, donut).
+- `bufferBar` — renders the final bar as a projection: a hollow hatch with an
+  outline, for a period that is still accruing.
+- `hoverHighlight` / `maxHighlight` — dim every bar but the hovered one, or the
+  tallest.
+- `percent` — with `stacked`, normalise each category to 100% and label the
+  value axis as percentages.
+
+### Chart chrome
+
+- `backgroundPattern` — one of eleven textures painted behind the plot area and
+  faded out at the edges: `dots`, `grid`, `cross-hatch`, `diagonal-lines`,
+  `plus`, `falling-triangles`, `4-pointed-star`, `tiny-checkers`,
+  `overlapping-circles`, `wiggle-lines`, `bubbles`.
+- `legendVariant` — `square`, `circle`, `circle-outline`, `rounded-square`
+  (default), `rounded-square-outline`, `vertical-bar`, `horizontal-bar`.
+- `tooltipVariant` (`default`, `frosted-glass`) and `tooltipRoundness`
+  (`sm`, `md`, `lg`, `xl`).
+- `loading` — a shimmering placeholder in place of the chart, with the
+  silhouette matched to the chart type; `loadingLabel` names or hides its pill.
+- `gridType` on `RadarChart` — `polygon` (default) or `circle`.
+
+```vue
+<template>
+  <BarChart
+    :data="data"
+    :categories="categories"
+    :y-axis="['desktop']"
+    x-axis="month"
+    :height="320"
+    variant="duotone"
+    background-pattern="dots"
+    legend-variant="circle"
+    tooltip-variant="frosted-glass"
+    max-highlight
+  />
+</template>
+```
+
+The animated stroke and the loading shimmer both stop when the viewer's system
+asks for reduced motion. Every generated SVG paint is scoped to its chart, so
+several charts on one page never collide.
+
 ### Deferred / removed
 
-- **`SankeyChart`** — deferred: the published `vccs` release does not yet export
-  a Sankey chart. Returns once `vccs` ships it.
 - **`DualChart`** — planned for v3.1 (maps onto the `vccs` `ComposedChart`).
 - **`GanttChart`, `DagreGraph`, `Maps`** — removed in v3. They were Unovis /
   d3-geo specific and have no `vccs` equivalent.
@@ -93,17 +158,43 @@ export default defineNuxtConfig({
 })
 ```
 
+## Data safety, accessibility, and limits
+
+This package is Nuxt-only. Vue/Vite applications should use the separate
+`vue-chrts` package.
+
+All numeric chart input is validated before it reaches a scale or SVG
+attribute. `null`, missing values, `NaN`, and positive/negative infinity are
+treated as gaps; a chart with no valid values shows `emptyLabel` (default:
+`"No valid data"`). Donut, Radial Bar, and Funnel accept record data with
+`nameKey` and `valueKey`; positional numeric arrays remain supported for v2
+compatibility.
+
+Every chart accepts `ariaLabel`, `ariaDescription`, and
+`accessibleDataTable`. The visually hidden table is enabled by default and is
+the keyboard/screen-reader equivalent of pointer-only SVG tooltips.
+
+SVG charts render at most 2,000 data rows by default. Larger inputs are sampled
+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.
+
 ## Auto-imported enums & types
 
 - Enums: `CurveType`, `LegendPosition`, `Orientation`, `DonutType`
 - Types: `AreaChartProps`, `BarChartProps`, `LineChartProps`, `BubbleChartProps`,
   `DonutChartProps`, `RadarChartProps`, `RadialBarChartProps`, `FunnelChartProps`,
+  `CandlestickChartProps`,
+  `SankeyChartProps`, `SankeyInputNode`, `SankeyInputLink`,
   `StatusTrackerChartProps`, `StatusTrackerDatum`, `BulletLegendItemInterface`,
-  `AxisConfig`, `TooltipConfig`, `ValueLabel`, `ReferenceLineConfig`
+  `AxisConfig`, `ValueLabel`, `ReferenceLineConfig`, `NumericKeys`
+- Style variant unions: `BarVariant`, `AreaFillVariant`, `StrokeVariant`,
+  `DotVariant`, `DitherVariant`, `BackgroundVariant`, `LegendIndicatorVariant`,
+  `TooltipVariant`, `TooltipRoundness`, `RadarVariant`, `RadialVariant`
 
 ## Migrating from v2
 
-See the [Upgrade to v3](https://nuxtcharts.com/docs/getting-started/upgrade-to-v3) guide. Specialty charts (maps, gantt, dual, sankey, dagre) are not in v3 yet — stay on `nuxt-charts@2` if you need them.
+See the [Upgrade to v3](https://nuxtcharts.com/docs/getting-started/upgrade-to-v3) guide. Specialty charts (maps, gantt, dual, dagre) are not in v3 yet — stay on `nuxt-charts@2` if you need them.
 
 ## License
 

package/dist/module.json

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

package/dist/module.mjs

@@ -9,6 +9,7 @@ const COMPONENTS = {
   RadarChart: "RadarChart",
   RadialBarChart: "RadialBarChart",
   FunnelChart: "FunnelChart",
+  SankeyChart: "SankeyChart",
   CandlestickChart: "CandlestickChart",
   StatusTrackerChart: "StatusTrackerChart"
 };
@@ -47,19 +48,36 @@ const resolveImports = (config, resolverUrl) => {
       "RadarChartProps",
       "RadialBarChartProps",
       "FunnelChartProps",
+      "FunnelLabelSizes",
+      "SankeyChartProps",
+      "SankeyInputNode",
+      "SankeyInputLink",
+      "SankeyNodeAlign",
       "CandlestickChartProps",
       "StatusTrackerChartProps",
       "StatusTrackerDatum",
       "BulletLegendItemInterface",
       "AxisConfig",
-      "TooltipConfig",
       "ValueLabel",
       "ReferenceLineConfig",
       // v2 parity: these auto-imported in nuxt-charts v2. The types still exist
       // (MarkerConfig drives line/area dot rendering; CrosshairConfig is inert
       // but kept so old templates type-check), so keep them auto-importable.
       "MarkerConfig",
-      "CrosshairConfig"
+      "CrosshairConfig",
+      // Style variant unions, so a consumer can annotate a variant it stores or
+      // passes around instead of widening it to `string`.
+      "BarVariant",
+      "AreaFillVariant",
+      "StrokeVariant",
+      "DotVariant",
+      "DitherVariant",
+      "BackgroundVariant",
+      "LegendIndicatorVariant",
+      "TooltipVariant",
+      "TooltipRoundness",
+      "RadarVariant",
+      "RadialVariant"
     ]
   });
 };

package/dist/runtime/assets/components.css

@@ -1 +1 @@
-@layer vue-chrts{.vc-tooltip{background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));font-size:var(--vc-legend-size,.75rem);line-height:1.5;min-width:8rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none}.vc-tooltip,.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0))}.vc-tooltip__label{font-weight:500;margin:0 0 .25rem}.vc-tooltip__list{display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;padding:0}.vc-tooltip__item{align-items:center;display:flex;gap:.375rem}.vc-tooltip__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:.5rem;width:.5rem}.vc-tooltip__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-tooltip__value{color:var(--vc-tooltip-fg,oklch(.205 0 0));font-variant-numeric:tabular-nums;font-weight:500;margin-left:auto}.vc-legend{flex-wrap:wrap;font-size:var(--vc-legend-size,.75rem);font-weight:var(--vc-legend-weight,400);gap:var(--vc-legend-gap,.75rem);justify-content:center;line-height:1.5;list-style:none;margin:0;padding:0}.vc-legend,.vc-legend__item{align-items:center;display:flex}.vc-legend__item{gap:.375rem}.vc-legend__item--inactive{opacity:.4}.vc-legend__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-candlestick-chart{cursor:crosshair;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.vc-candlestick-chart__svg{display:block;overflow:visible;width:100%}.vc-funnel-layered{position:relative;width:100%}.vc-funnel-layered__tooltip{align-items:center;background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));color:var(--vc-tooltip-fg,oklch(.205 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none;position:absolute;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}.vc-funnel-layered__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-funnel-layered__value{font-variant-numeric:tabular-nums;font-weight:600}.vc-funnel-layered__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-funnel-layered-shape{opacity:.96;transition:opacity .15s}.vc-funnel-layered-shape:hover{opacity:1}.vc-status-tracker{color:var(--vc-axis-label-color,var(--ui-text-highlighted,var(--foreground,oklch(.205 0 0))));font-family:inherit;width:100%}.vc-status-tracker__header{align-items:baseline;display:flex;gap:1rem;justify-content:space-between;margin-bottom:.75rem}.vc-status-tracker__summary,.vc-status-tracker__title{font-size:.875rem;line-height:1.25rem;margin:0}.vc-status-tracker__title{font-weight:600}.vc-status-tracker__summary{color:var(--vc-tick-color,var(--ui-text-muted,var(--muted-foreground,oklch(.556 0 0))));font-variant-numeric:tabular-nums}.vc-status-tracker__track{display:flex;overflow:hidden;width:100%}.vc-status-tracker__bar{display:block;flex:0 0 auto;height:100%;min-width:1px;transition:opacity .16s ease}.vc-status-tracker__bar:hover{opacity:.78}.vc-status-tracker__bar--rounded-start{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.vc-status-tracker__bar--rounded-end{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.vc-status-tracker__bar--empty:hover{opacity:1}.vc-status-tracker__labels{gap:1rem;justify-content:space-between;margin-top:.5rem}.vc-status-tracker__labels,.vc-status-tracker__legend{color:var(--vc-legend-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);line-height:1rem}.vc-status-tracker__legend{flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:.75rem 0 0;padding:0}.vc-status-tracker__legend-item{align-items:center;display:inline-flex;gap:.375rem}.vc-status-tracker__legend-dot{border-radius:9999px;flex:0 0 auto;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}}
+@layer vue-chrts{.vc-tooltip{background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));color:var(--vc-tooltip-fg,oklch(.205 0 0));font-size:var(--vc-legend-size,.75rem);line-height:1.5;min-width:8rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none}.vc-tooltip--frosted-glass{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:color-mix(in oklab,var(--vc-tooltip-bg,oklch(1 0 0)) 70%,transparent)}.vc-tooltip--sm{border-radius:.125rem}.vc-tooltip--md{border-radius:.375rem}.vc-tooltip--lg{border-radius:.5rem}.vc-tooltip--xl{border-radius:.75rem}.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0));font-weight:500;margin:0 0 .25rem}.vc-tooltip__list{display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;padding:0}.vc-tooltip__item{align-items:center;display:flex;gap:.375rem}.vc-tooltip__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:.5rem;width:.5rem}.vc-tooltip__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-tooltip__value{color:var(--vc-tooltip-fg,oklch(.205 0 0));font-variant-numeric:tabular-nums;font-weight:500;margin-left:auto}.vc-legend{flex-wrap:wrap;font-size:var(--vc-legend-size,.75rem);font-weight:var(--vc-legend-weight,400);gap:var(--vc-legend-gap,.75rem);justify-content:center;line-height:1.5;list-style:none;margin:0;padding:0}.vc-legend,.vc-legend__item{align-items:center;display:flex}.vc-legend__item{gap:.375rem}.vc-legend__item--inactive{opacity:.4}.vc-legend__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-legend__dot--square{border-radius:0}.vc-legend__dot--rounded-square{border-radius:2px}.vc-legend__dot--circle{border-radius:9999px}.vc-legend__dot--vertical-bar{border-radius:2px;height:calc(var(--vc-legend-dot-size, .5rem)*1.5);width:calc(var(--vc-legend-dot-size, .5rem)*.5)}.vc-legend__dot--horizontal-bar{border-radius:2px;height:calc(var(--vc-legend-dot-size, .5rem)*.5);width:calc(var(--vc-legend-dot-size, .5rem)*1.5)}.vc-legend__dot--circle-outline,.vc-legend__dot--rounded-square-outline{box-sizing:border-box;height:calc(var(--vc-legend-dot-size, .5rem)*1.25);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;width:calc(var(--vc-legend-dot-size, .5rem)*1.25)}.vc-legend__dot--circle-outline{border-radius:9999px}.vc-legend__dot--rounded-square-outline{border-radius:3px}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-skeleton{align-items:stretch;box-sizing:border-box;color:var(--vc-tick-color,oklch(.556 0 0));display:flex;overflow:hidden;padding:8% 4%;position:relative;width:100%}.vc-skeleton__bars{align-items:flex-end;display:flex;gap:2%;height:100%;width:100%}.vc-skeleton__bar{background:currentColor;border-radius:2px 2px 0 0;flex:1;opacity:.14}.vc-skeleton__wave{height:100%;opacity:.14;width:100%}.vc-skeleton__ring{aspect-ratio:1;border:1.75rem solid;border-radius:9999px;height:100%;margin:auto;opacity:.14}.vc-skeleton__shimmer{animation:vc-skeleton-sweep 1.8s linear infinite;background:linear-gradient(105deg,transparent 35%,currentColor 50%,transparent 65%);inset:0;opacity:.1;position:absolute}@keyframes vc-skeleton-sweep{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.vc-skeleton__pill{align-items:center;background:var(--vc-surface-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:.375rem;color:var(--vc-tick-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;height:-moz-fit-content;height:fit-content;inset:0;line-height:1.5;margin:auto;padding:.125rem .5rem;position:absolute;width:-moz-fit-content;width:fit-content}.vc-skeleton__spinner{animation:vc-skeleton-spin .7s linear infinite;border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:9999px;border-top:1px solid;height:.75rem;width:.75rem}@keyframes vc-skeleton-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.vc-skeleton__shimmer,.vc-skeleton__spinner{animation:none}}.vc-candlestick-chart{cursor:crosshair;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.vc-candlestick-chart__svg{display:block;overflow:visible;width:100%}.vc-funnel-layered{position:relative;width:100%}.vc-funnel{position:relative}.vc-funnel-layered__tooltip{align-items:center;background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));color:var(--vc-tooltip-fg,oklch(.205 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none;position:absolute;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}.vc-funnel-layered__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-funnel-layered__value{font-variant-numeric:tabular-nums;font-weight:600}.vc-funnel-layered__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-funnel-layered-shape{opacity:.96;transition:opacity .15s}.vc-funnel-layered-shape:hover{opacity:1}.vc-funnel .v-charts-label-list .v-charts-label{fill:var(--vc-funnel-value-color,oklch(.205 0 0));font-size:var(--vc-funnel-value-size,.75rem);font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-value-weight,600)}.vc-funnel-classic-shape{cursor:default}.vc-funnel-classic-shape__shadow{opacity:var(--vc-funnel-shadow-opacity,.16)}.vc-funnel-classic-shape__body{opacity:var(--vc-funnel-shape-opacity,.92);transition:opacity .15s ease}.vc-funnel-classic-shape__highlight{fill:none;stroke:hsla(0,0%,100%,.24);stroke-width:1;vector-effect:non-scaling-stroke}.vc-funnel-classic-shape:hover .vc-funnel-classic-shape__body{opacity:var(--vc-funnel-shape-hover-opacity,1)}.vc-funnel-classic-shape__name,.vc-funnel-classic-shape__value{font-family:inherit;paint-order:stroke;pointer-events:none;stroke:rgba(0,0,0,.12);stroke-linejoin:round;stroke-width:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vc-funnel-classic-shape__value{fill:var(--vc-funnel-inside-value-color,#fff);font-variant-numeric:tabular-nums}.vc-funnel-classic-shape__name{fill:var(--vc-funnel-inside-label-color,#fff);opacity:.78}.vc-funnel-layered-shape__divider{stroke:var(--vc-surface-bg,oklch(1 0 0))}.vc-funnel-layered-shape__badge-text,.vc-funnel-layered-shape__name,.vc-funnel-layered-shape__value{font-family:inherit;pointer-events:none;stroke:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vc-funnel-layered-shape__value{fill:var(--vc-funnel-value-color,var(--vc-axis-label-color,oklch(.205 0 0)));font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-value-weight,600)}.vc-funnel-layered-shape__badge{fill:var(--vc-funnel-badge-bg,var(--vc-surface-bg,oklch(1 0 0)));fill-opacity:var(--vc-funnel-badge-opacity,.82);stroke:var(--vc-funnel-badge-border,var(--vc-axis-line-color,oklch(.922 0 0)));stroke-opacity:.7}.vc-funnel-layered-shape__badge-text{fill:var(--vc-funnel-badge-color,var(--vc-tick-color,oklch(.556 0 0)));font-variant-numeric:tabular-nums;font-weight:var(--vc-funnel-badge-weight,600)}.vc-funnel-layered-shape__name{fill:var(--vc-funnel-label-color,var(--vc-tick-color,oklch(.556 0 0)));font-weight:var(--vc-funnel-label-weight,500)}.vc-status-tracker{color:var(--vc-axis-label-color,var(--ui-text-highlighted,var(--foreground,oklch(.205 0 0))));font-family:inherit;width:100%}.vc-status-tracker__header{align-items:baseline;display:flex;gap:1rem;justify-content:space-between;margin-bottom:.75rem}.vc-status-tracker__summary,.vc-status-tracker__title{font-size:.875rem;line-height:1.25rem;margin:0}.vc-status-tracker__title{font-weight:600}.vc-status-tracker__summary{color:var(--vc-tick-color,var(--ui-text-muted,var(--muted-foreground,oklch(.556 0 0))));font-variant-numeric:tabular-nums}.vc-status-tracker__track{display:flex;overflow:hidden;width:100%}.vc-status-tracker__bar{display:block;flex:0 0 auto;height:100%;min-width:1px;transition:opacity .16s ease}.vc-status-tracker__bar:hover{opacity:.78}.vc-status-tracker__bar--rounded-start{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.vc-status-tracker__bar--rounded-end{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.vc-status-tracker__bar--empty:hover{opacity:1}.vc-status-tracker__labels{gap:1rem;justify-content:space-between;margin-top:.5rem}.vc-status-tracker__labels,.vc-status-tracker__legend{color:var(--vc-legend-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);line-height:1rem}.vc-status-tracker__legend{flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:var(--vc-legend-inset,.75rem) 0 0;padding:0}.vc-status-tracker__legend-item{align-items:center;display:inline-flex;gap:.375rem}.vc-status-tracker__legend-dot{border-radius:9999px;flex:0 0 auto;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}}.vc-sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.vc-empty-state{color:var(--vc-tick-color);display:grid;font-size:var(--vc-legend-size);place-items:center}

package/dist/runtime/assets/theme.css

@@ -1 +1 @@
-@layer vue-chrts{.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-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-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: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-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)))}}

package/dist/runtime/components/AreaChart.vue

@@ -3,12 +3,16 @@ import { computed, useId } from "vue";
 import { Area, AreaChart as VccsAreaChart } from "vccs";
 import CartesianFrame from "./internal/CartesianFrame.vue";
 import GradientDefs from "./internal/GradientDefs";
+import StrokeGradientDefs from "./internal/StrokeGradientDefs";
 import { categoriesToSeries } from "../utils/categories";
 import { curveTypeToVccs } from "../utils/curve";
 import { markerToDot, normalizeMarkerConfig, toStrokeDasharray } from "../utils/marker";
-import { DEFAULT_GRADIENT_STOPS, gradientId } from "../utils/gradient";
+import { DEFAULT_GRADIENT_STOPS, gradientId, strokeGradientId } from "../utils/gradient";
 import DitherDefs from "./internal/DitherDefs";
+import AreaVariantDefs, { areaFillId } from "./internal/AreaVariantDefs";
+import ChartDot from "./internal/ChartDot";
 import { ditherId } from "../utils/dither";
+import { strokeDasharrayFor, variantId } from "../utils/variants";
 const props = defineProps({
   xAxis: { type: null, required: false },
   curveType: { type: String, required: false },
@@ -19,9 +23,16 @@ const props = defineProps({
   ditherTile: { type: Number, required: false },
   ditherWash: { type: Number, required: false },
   lineWidth: { type: Number, required: false },
+  strokeGradient: { type: Array, required: false },
   stacked: { type: Boolean, required: false },
+  percent: { type: Boolean, required: false },
   lineDashArray: { type: [Array, String], required: false },
   markerConfig: { type: Object, required: false },
+  variant: { type: String, required: false },
+  strokeVariant: { type: String, required: false },
+  dotVariant: { type: String, required: false },
+  dotSize: { type: Number, required: false },
+  glow: { type: Boolean, required: false },
   data: { type: Array, required: true },
   height: { type: Number, required: true },
   xLabel: { type: String, required: false },
@@ -51,14 +62,25 @@ 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 },
   xExplicitTicks: { type: Array, required: false },
   yExplicitTicks: { type: Array, required: false },
   crosshairConfig: { type: Object, required: false },
-  theme: { 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, default: true },
+  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 },
+  loading: { type: Boolean, required: false },
+  loadingLabel: { type: String, required: false }
 });
 const gradientScope = useId();
 const markers = computed(() => normalizeMarkerConfig(props.markerConfig));
@@ -70,16 +92,21 @@ const series = computed(
 );
 const curve = computed(() => curveTypeToVccs(props.curveType));
 const stackId = computed(() => props.stacked ? "stack" : void 0);
+const chartContainerProps = computed(
+  () => props.stacked && props.percent ? { stackOffset: "expand" } : {}
+);
 const fillOpacity = computed(() => props.hideArea ? 0 : 0.6);
-const dashArray = computed(() => toStrokeDasharray(props.lineDashArray));
 const useDither = computed(
   () => !props.hideArea && props.dither !== void 0 && props.dither !== false
 );
 const ditherVariant = computed(
   () => typeof props.dither === "string" ? props.dither : "bayer"
 );
+const useFillVariant = computed(
+  () => !props.hideArea && props.variant !== void 0 && !useDither.value
+);
 const useGradientFill = computed(
-  () => !props.hideArea && props.gradient !== false && !useDither.value
+  () => !props.hideArea && props.gradient !== false && !useDither.value && !useFillVariant.value
 );
 const useDitherFade = computed(
   () => useDither.value && props.gradient !== false
@@ -96,16 +123,45 @@ const ditherWashStops = computed(() => {
     stopOpacity: stop.stopOpacity * scale
   }));
 });
+const paintedSeries = computed(
+  () => series.value.map((s) => ({ dataKey: s.dataKey, color: s.color }))
+);
 function fillFor(dataKey, color) {
   if (useDither.value) return `url(#${ditherId(dataKey, gradientScope)})`;
+  if (useFillVariant.value) return `url(#${areaFillId(props.variant, dataKey, gradientScope)})`;
   if (useGradientFill.value) return `url(#${gradientId(dataKey, gradientScope)})`;
   return color;
 }
+function strokeFor(dataKey, color) {
+  return props.strokeGradient?.length ? `url(#${strokeGradientId(dataKey, gradientScope)})` : color;
+}
+function glowFor(dataKey) {
+  return props.glow ? `url(#${variantId("glow", dataKey, gradientScope)})` : void 0;
+}
+const dashArray = computed(
+  () => toStrokeDasharray(props.lineDashArray) ?? strokeDasharrayFor(props.strokeVariant)
+);
+const frameClass = computed(
+  () => props.strokeVariant === "animated-dashed" ? "vc-dash-animated" : void 0
+);
+const showDots = computed(() => props.dotVariant !== void 0);
 const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : void 0);
+defineSlots();
 </script>
 
 <template>
-  <CartesianFrame :container="VccsAreaChart" :x-axis-key="xAxisKey" v-bind="props">
+  <CartesianFrame
+    :container="VccsAreaChart"
+    :x-axis-key="xAxisKey"
+    :container-props="chartContainerProps"
+    :percent-axis="stacked === true && percent === true"
+    :frame-class="frameClass"
+    skeleton-shape="wave"
+    v-bind="props"
+  >
+    <template v-if="$slots.tooltip" #tooltip="scope">
+      <slot name="tooltip" v-bind="scope" />
+    </template>
     <!--
       GradientDefs builds SVG nodes with `h()` so they land in the SVG namespace
       inside the chart surface. Do not wrap this in vccs `<Customized>`: that
@@ -118,6 +174,12 @@ const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : v
       :stops="gradientStops"
       :scope="gradientScope"
     />
+    <StrokeGradientDefs
+      v-if="strokeGradient?.length"
+      :series="paintedSeries"
+      :stops="strokeGradient"
+      :scope="gradientScope"
+    />
     <!-- Same namespace/`Customized` constraints as GradientDefs above. -->
     <DitherDefs
       v-if="useDither"
@@ -128,6 +190,13 @@ const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : v
       :fade-stops="ditherWashStops"
       :height="height"
     />
+    <AreaVariantDefs
+      v-if="useFillVariant || glow"
+      :series="paintedSeries"
+      :variant="useFillVariant ? variant : void 0"
+      :scope="gradientScope"
+      :glow="glow === true"
+    />
     <Area
       v-for="s in series"
       :key="s.dataKey"
@@ -136,14 +205,26 @@ const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : v
       :y-axis-id="s.yAxisId"
       :type="curve"
       :stack-id="stackId"
-      :stroke="s.color"
+      :stroke="strokeFor(s.dataKey, s.color)"
       :fill="fillFor(s.dataKey, s.color)"
-      :fill-opacity="useGradientFill || useDither ? 1 : fillOpacity"
+      :fill-opacity="useGradientFill || useDither || useFillVariant ? 1 : fillOpacity"
       :stroke-width="lineWidth ?? 2"
       :stroke-dasharray="dashArray"
-      :dot="s.dot"
+      :filter="glowFor(s.dataKey)"
+      :dot="showDots || s.dot"
       :hide="s.hidden"
       :is-animation-active="duration !== void 0 && duration !== 0"
-    />
+      :transition="{ duration: (duration ?? 800) / 1e3, ease: 'easeOut' }"
+    >
+      <template v-if="showDots" #dot="dotProps">
+        <ChartDot
+          :cx="dotProps.cx"
+          :cy="dotProps.cy"
+          :color="s.color"
+          :variant="dotVariant"
+          :size="dotSize ?? 3"
+        />
+      </template>
+    </Area>
   </CartesianFrame>
 </template>

package/dist/runtime/components/AreaChart.vue.d.ts

@@ -5,7 +5,11 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        tooltip?: (props: {
+            values: T | undefined;
+        }) => unknown;
+    };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;