nuxt-charts 3.0.0-beta.3 → 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
@@ -158,6 +163,46 @@ 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.
+
+## 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`
@@ -166,7 +211,7 @@ export default defineNuxtConfig({
   `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`

package/dist/module.json

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

package/dist/module.mjs

@@ -58,7 +58,6 @@ const resolveImports = (config, resolverUrl) => {
       "StatusTrackerDatum",
       "BulletLegendItemInterface",
       "AxisConfig",
-      "TooltipConfig",
       "ValueLabel",
       "ReferenceLineConfig",
       // v2 parity: these auto-imported in nuxt-charts v2. The types still exist

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));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)}}
+@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 :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-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/AreaChart.vue

@@ -62,7 +62,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 },
@@ -71,6 +70,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, 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 },
@@ -209,6 +214,7 @@ defineSlots();
       :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

package/dist/runtime/components/BarChart.vue

@@ -70,7 +70,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 },
@@ -79,6 +78,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, 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 },
@@ -231,6 +236,7 @@ defineSlots();
       :radius="isCubes ? 0 : barRadius(i)"
       :hide="s.hidden"
       :is-animation-active="duration !== void 0 && duration !== 0"
+      :transition="{ duration: (duration ?? 400) / 1e3, ease: 'easeOut' }"
     >
       <!--
         Always register `#shape`. vccs reads `slots.shape` once in Bar setup, so a

package/dist/runtime/components/BubbleChart.vue

@@ -14,6 +14,8 @@ import ChartContainer from "./internal/ChartContainer";
 import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartTooltip from "./internal/ChartTooltip.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
 import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
 import {
@@ -26,14 +28,8 @@ import {
 } from "../utils/axis";
 import { toAxisDomain, toCssProperties } from "../utils/style";
 import { axisTickVars, resolveHoverRadius, resolveHoverVisible, themeToVars } from "../utils/theme";
+import { DEFAULT_MAX_DATA_POINTS, sampleData, toFiniteNumber, warnDataLimit } from "../utils/data";
 const props = defineProps({
-  xAccessor: { type: Function, required: true, skipCheck: true },
-  yAccessor: { type: Function, required: true, skipCheck: true },
-  sizeAccessor: { type: Function, required: false, skipCheck: true },
-  categoryKey: { type: null, required: true },
-  sizeRange: { type: Array, required: false },
-  opacity: { type: Number, required: false },
-  sizeOptions: { type: Object, required: false },
   data: { type: Array, required: true },
   height: { type: Number, required: true },
   xLabel: { type: String, required: false },
@@ -62,21 +58,28 @@ const props = defineProps({
   duration: { type: Number, required: false },
   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 },
-  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 }
+  loadingLabel: { type: String, required: false },
+  xAccessor: { type: Function, required: true, skipCheck: true },
+  yAccessor: { type: Function, required: true, skipCheck: true },
+  sizeAccessor: { type: Function, required: false, skipCheck: true },
+  categoryKey: { type: null, required: true },
+  sizeRange: { type: Array, required: false },
+  opacity: { type: Number, required: false },
+  sizeOptions: { type: Object, required: false }
 });
 const slots = defineSlots();
 function resolveAccessor(accessor) {
@@ -149,9 +152,28 @@ const colorByCategory = computed(() => {
   for (const s of categoriesToSeries(props.categories)) map.set(s.dataKey, s.color);
   return map;
 });
+function accessorValue(row, accessor) {
+  return typeof accessor === "function" ? accessor(row) : accessor === void 0 ? void 0 : row[accessor];
+}
+const chartData = computed(() => {
+  const normalized = props.data.filter(
+    (row) => toFiniteNumber(accessorValue(row, props.xAccessor)) !== void 0 && toFiniteNumber(accessorValue(row, props.yAccessor)) !== void 0 && (props.sizeAccessor === void 0 || toFiniteNumber(accessorValue(row, props.sizeAccessor)) !== void 0)
+  );
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("BubbleChart", normalized.length, limit);
+  return sampleData(normalized, limit);
+});
+const accessibleRows = computed(() => chartData.value.map((row, index) => ({
+  label: String(row[categoryKey.value] ?? index + 1),
+  values: [
+    { label: xName.value, value: accessorValue(row, props.xAccessor) },
+    { label: yName.value, value: accessorValue(row, props.yAccessor) },
+    ...props.sizeAccessor === void 0 ? [] : [{ label: zName.value, value: accessorValue(row, props.sizeAccessor) }]
+  ]
+})));
 const groups = computed(() => {
   const byCategory = /* @__PURE__ */ new Map();
-  for (const row of props.data) {
+  for (const row of chartData.value) {
     const cat = String(row[categoryKey.value]);
     const bucket = byCategory.get(cat);
     if (bucket) bucket.push(row);
@@ -185,7 +207,7 @@ const tooltipContent = computed(() => {
     });
     return h(ChartTooltip, {
       ...tooltipProps,
-      label: category,
+      label: props.tooltipTitleFormatter && row ? props.tooltipTitleFormatter(row) : category,
       payload,
       variant: props.tooltipVariant,
       roundness: props.tooltipRoundness
@@ -195,13 +217,15 @@ const tooltipContent = computed(() => {
 </script>
 
 <template>
-  <div class="vue-chrts" :style="themeVars">
+  <div class="vue-chrts" role="group" :aria-label="ariaLabel ?? 'Bubble chart'" :style="themeVars">
+  <ChartAccessibility :label="ariaLabel ?? 'Bubble chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
   <ChartSkeleton
     v-if="loading"
     :height="height"
     shape="bars"
     :label="loadingLabel ?? 'Loading'"
   />
+  <ChartEmptyState v-else-if="error || chartData.length === 0" :height="height" :message="error || emptyLabel" />
   <ChartContainer v-else width="100%" :height="height">
     <ScatterChart>
       <CartesianGrid
@@ -254,6 +278,8 @@ const tooltipContent = computed(() => {
         :data="g.data"
         :fill="g.color"
         :fill-opacity="opacity ?? 0.7"
+        :is-animation-active="duration !== void 0 && duration !== 0"
+        :transition="{ duration: (duration ?? 400) / 1e3, ease: 'easeOut' }"
       />
 
       <Tooltip v-if="!hideTooltip" :content="tooltipContent" :cursor="cursor" :is-animation-active="false" />

package/dist/runtime/components/CandlestickChart.vue

@@ -1,6 +1,11 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 import CandlestickTooltip from "./internal/CandlestickTooltip.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
+import ChartSkeleton from "./internal/ChartSkeleton.vue";
+import { DEFAULT_MAX_DATA_POINTS, sampleData, toFiniteNumber, warnDataLimit } from "../utils/data";
+import { formatNumber } from "../utils/format";
 const props = defineProps({
   data: { type: Array, required: true },
   height: { type: Number, required: true },
@@ -27,7 +32,17 @@ const props = defineProps({
   hideXAxis: { type: Boolean, required: false },
   hideYAxis: { type: Boolean, required: false },
   hideTooltip: { type: Boolean, required: false },
-  tooltip: { type: Object, 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 xKey = computed(() => String(props.xAccessor ?? "label"));
 const openKey = computed(() => String(props.openAccessor ?? "open"));
@@ -35,26 +50,38 @@ const highKey = computed(() => String(props.highAccessor ?? "high"));
 const lowKey = computed(() => String(props.lowAccessor ?? "low"));
 const closeKey = computed(() => String(props.closeAccessor ?? "close"));
 const volumeKey = computed(() => String(props.volumeAccessor ?? "volume"));
-const upColor = computed(() => props.upColor ?? "#10b981");
-const downColor = computed(() => props.downColor ?? "#ef4444");
+const upColor = computed(() => props.upColor ?? "var(--vc-candle-up)");
+const downColor = computed(() => props.downColor ?? "var(--vc-candle-down)");
 const showVolume = computed(() => props.showVolume ?? false);
 const maxCandleWidth = computed(() => props.candleWidth ?? 18);
 const wickWidth = computed(() => props.wickWidth ?? 1.5);
 const yGridLine = computed(() => props.yGridLine ?? true);
 const xGridLine = computed(() => props.xGridLine ?? false);
 const yNumTicks = computed(() => props.yNumTicks ?? 5);
-const candles = computed(
-  () => props.data.map((row) => ({
-    label: row[xKey.value],
-    open: Number(row[openKey.value]),
-    high: Number(row[highKey.value]),
-    low: Number(row[lowKey.value]),
-    close: Number(row[closeKey.value]),
-    volume: props.volumeAccessor || volumeKey.value in row ? Number(row[volumeKey.value]) : void 0
-  }))
-);
+const candles = computed(() => {
+  const normalized = props.data.flatMap((row) => {
+    const open = toFiniteNumber(row[openKey.value]);
+    const high = toFiniteNumber(row[highKey.value]);
+    const low = toFiniteNumber(row[lowKey.value]);
+    const close = toFiniteNumber(row[closeKey.value]);
+    if (open === void 0 || high === void 0 || low === void 0 || close === void 0) return [];
+    if (low > Math.min(open, close) || high < Math.max(open, close) || low > high) return [];
+    const volume = toFiniteNumber(row[volumeKey.value]);
+    return [{ raw: row, label: String(row[xKey.value] ?? ""), open, high, low, close, volume }];
+  });
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("CandlestickChart", normalized.length, limit);
+  return sampleData(normalized, limit);
+});
+const accessibleRows = computed(() => candles.value.map((candle) => ({
+  label: String(candle.label),
+  values: ["open", "high", "low", "close", "volume"].flatMap((key) => {
+    const value = candle[key];
+    return typeof value === "number" ? [{ label: key, value: fmtPrice(value) }] : [];
+  })
+})));
 const containerRef = useTemplateRef("containerRef");
-const W = ref(600);
+const W = ref(0);
 const H = computed(() => props.height);
 const PAD = computed(() => ({
   top: 12,
@@ -135,7 +162,7 @@ const xTicks = computed(() => {
   })).filter((_, i) => i === 0 || i === n - 1 || i % step === 0);
 });
 function fmtPrice(value) {
-  return props.yFormatter ? props.yFormatter(value) : value.toLocaleString();
+  return props.yFormatter ? props.yFormatter(value) : formatNumber(value);
 }
 const activeIndex = ref(null);
 const pointer = ref({ x: 0, y: 0 });
@@ -161,12 +188,19 @@ function onMouseMove(e) {
 function onMouseLeave() {
   activeIndex.value = null;
 }
+function onKeydown(event) {
+  if (!candles.value.length) return;
+  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") return;
+  event.preventDefault();
+  const current = activeIndex.value ?? 0;
+  activeIndex.value = event.key === "Home" ? 0 : event.key === "End" ? candles.value.length - 1 : Math.min(Math.max(current + (event.key === "ArrowRight" ? 1 : -1), 0), candles.value.length - 1);
+}
 let ro;
 onMounted(() => {
   if (!containerRef.value) return;
   ro = new ResizeObserver((entries) => {
     const cr = entries[0]?.contentRect;
-    if (cr?.width) W.value = cr.width;
+    if (cr) W.value = Math.max(0, cr.width);
   });
   ro.observe(containerRef.value);
 });
@@ -177,10 +211,17 @@ onBeforeUnmount(() => ro?.disconnect());
   <div
     ref="containerRef"
     class="vc-candlestick-chart vue-chrts"
+    role="group"
+    :aria-label="ariaLabel ?? 'Candlestick chart'"
+    tabindex="0"
     @mousemove="onMouseMove"
     @mouseleave="onMouseLeave"
+    @keydown="onKeydown"
   >
-    <svg :width="W" :height="H" class="vc-candlestick-chart__svg">
+    <ChartAccessibility :label="ariaLabel ?? 'Candlestick chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
+    <ChartSkeleton v-if="loading" :height="height" shape="bars" :label="loadingLabel ?? 'Loading'" />
+    <ChartEmptyState v-else-if="error || candles.length === 0" :height="height" :message="error || emptyLabel" />
+    <svg v-else :width="W" :height="H" class="vc-candlestick-chart__svg" aria-hidden="true">
       <!-- Grid -->
       <template v-if="yGridLine">
         <line
@@ -252,7 +293,7 @@ onBeforeUnmount(() => ro?.disconnect());
           :width="c.halfW * 2"
           :height="c.bodyH"
           :rx="Math.min(2, c.halfW / 2)"
-          :fill="c.rising ? c.color : 'var(--chart-bg, #ffffff)'"
+          :fill="c.rising ? c.color : 'var(--vc-surface-bg)'"
           :stroke="c.color"
           :stroke-width="activeIndex === i ? 2.5 : 1.5"
         />
@@ -322,6 +363,7 @@ onBeforeUnmount(() => ro?.disconnect());
           :up-color="upColor"
           :down-color="downColor"
           :value-formatter="yFormatter"
+          :title="tooltipTitleFormatter ? tooltipTitleFormatter(activeCandle.raw) : activeCandle.label"
         />
       </div>
     </Teleport>

package/dist/runtime/components/DonutChart.vue

@@ -4,6 +4,8 @@ import { Legend, Pie, PieChart, Tooltip } from "vccs";
 import ChartContainer from "./internal/ChartContainer";
 import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import ChartEmptyState from "./internal/ChartEmptyState.vue";
+import ChartAccessibility from "./internal/ChartAccessibility.vue";
 import SegmentVariantDefs, { segmentGradientId } from "./internal/SegmentVariantDefs";
 import { tooltipContentFor } from "./internal/tooltipContent";
 import { variantId } from "../utils/variants";
@@ -12,8 +14,11 @@ import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
 import { toCssProperties } from "../utils/style";
 import { themeToVars } from "../utils/theme";
+import { DEFAULT_MAX_DATA_POINTS, normalizeNamedValues, sampleData, warnDataLimit } from "../utils/data";
 const props = defineProps({
   data: { type: Array, required: true },
+  nameKey: { type: null, required: false },
+  valueKey: { type: null, required: false },
   categories: { type: Object, required: true },
   type: { type: String, required: false },
   variant: { type: String, required: false },
@@ -31,9 +36,14 @@ const props = defineProps({
   legendStyle: { type: [String, Object], required: false },
   hideTooltip: { type: Boolean, required: false },
   tooltipTitleFormatter: { type: Function, required: false },
-  tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
   duration: { type: Number, 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 },
@@ -45,16 +55,21 @@ const variantScope = useId();
 const useGradient = computed(() => props.variant === "gradient");
 const segments = computed(() => {
   const cats = categoriesToSeries(props.categories);
-  return props.data.map((value, i) => {
-    const color = cats[i]?.color ?? `var(--chart-color-${i})`;
+  const normalized = normalizeNamedValues(props.data, cats.map((cat) => String(cat.name)), props.nameKey, props.valueKey);
+  const limit = props.maxDataPoints ?? DEFAULT_MAX_DATA_POINTS;
+  warnDataLimit("DonutChart", normalized.length, limit);
+  const values = sampleData(normalized, limit);
+  return values.map(({ row, value, sourceIndex, name }) => {
+    const color = cats[sourceIndex]?.color ?? `var(--vc-series-${sourceIndex % 8})`;
     return {
-      name: cats[i]?.name ?? String(i),
+      ...row && typeof row === "object" ? row : {},
+      name,
       value,
-      dataKey: String(i),
+      dataKey: String(sourceIndex),
       color,
       // vccs reads `fill` directly from the data entry to color each sector
-      fill: useGradient.value ? `url(#${segmentGradientId(String(i), variantScope)})` : color,
-      filter: props.glow ? `url(#${variantId("glow", String(i), variantScope)})` : void 0
+      fill: useGradient.value ? `url(#${segmentGradientId(String(sourceIndex), variantScope)})` : color,
+      filter: props.glow ? `url(#${variantId("glow", String(sourceIndex), variantScope)})` : void 0
     };
   });
 });
@@ -65,8 +80,9 @@ const legendColors = computed(
   () => Object.fromEntries(segments.value.map((s) => [s.name, s.color]))
 );
 const tooltipContent = computed(
-  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness)
+  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness, props.tooltipTitleFormatter)
 );
+const accessibleRows = computed(() => segments.value.map((segment) => ({ label: segment.name, values: [{ label: "Value", value: segment.value }] })));
 const DEFAULT_ARC_WIDTH = 40;
 const AUTO_OUTER_FRACTION = 0.9;
 const radii = computed(() => {
@@ -103,13 +119,15 @@ const legendWrapperStyle = computed(
 </script>
 
 <template>
-  <div class="donut-chart vue-chrts" :style="{ position: 'relative', width: '100%', height: `${height ?? (radius ? radius * 2 : 200)}px`, ...themeVars }">
+  <div class="donut-chart vue-chrts" role="group" :aria-label="ariaLabel ?? 'Donut chart'" :style="{ position: 'relative', width: '100%', height: `${height ?? (radius ? radius * 2 : 200)}px`, ...themeVars }">
+    <ChartAccessibility :label="ariaLabel ?? 'Donut chart'" :description="ariaDescription" :rows="accessibleRows" :show-table="accessibleDataTable !== false" />
     <ChartSkeleton
       v-if="loading"
       :height="height ?? 200"
       shape="ring"
       :label="loadingLabel ?? 'Loading'"
     />
+    <ChartEmptyState v-else-if="error || segments.length === 0" :height="height ?? 200" :message="error || emptyLabel" />
     <ChartContainer v-else width="100%" height="100%">
       <PieChart>
         <!--
@@ -135,6 +153,7 @@ const legendWrapperStyle = computed(
           :corner-radius="cornerRadius ?? 0"
           :stroke="stroke ?? 'none'"
           :is-animation-active="duration !== void 0 && duration !== 0"
+          :transition="{ duration: (duration ?? 1200) / 1e3, ease: 'easeOut' }"
         />
         <Tooltip v-if="!hideTooltip" :content="tooltipContent" :is-animation-active="false" />
         <Legend