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

package/dist/runtime/components/BarChart.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref, useId } from "vue";
 import { Bar, BarChart as VccsBarChart, LabelList, Rectangle } from "vccs";
 import CartesianFrame from "./internal/CartesianFrame.vue";
 import CubeBarShape from "./internal/CubeBarShape.vue";
+import VariantBarShape from "./internal/VariantBarShape.vue";
+import BarVariantDefs from "./internal/BarVariantDefs";
 import {
   categoriesToSeries,
   PRIMARY_Y_AXIS_ID
@@ -13,10 +15,12 @@ import {
   DEFAULT_CUBE_RADIUS,
   DEFAULT_CUBE_SIZE
 } from "../utils/cubes";
+import { PATTERNED_BAR_VARIANTS, variantId } from "../utils/variants";
 const props = defineProps({
   yAxis: { type: Array, required: true },
   xAxis: { type: null, required: false },
   stacked: { type: Boolean, required: false },
+  percent: { type: Boolean, required: false },
   orientation: { type: String, required: false },
   radius: { type: Number, required: false },
   barGap: { type: [Number, String], required: false },
@@ -31,6 +35,10 @@ const props = defineProps({
   cubeMinSize: { type: Number, required: false },
   cubeMinOpacity: { type: Number, required: false },
   cubeEmptyColor: { type: String, required: false, default: DEFAULT_CUBE_EMPTY_COLOR },
+  glow: { type: Boolean, required: false },
+  bufferBar: { type: Boolean, required: false },
+  hoverHighlight: { type: Boolean, required: false },
+  maxHighlight: { type: Boolean, required: false },
   stackAndGrouped: { type: Boolean, required: false },
   stackedGroupedSpacing: { type: Number, required: false },
   data: { type: Array, required: true },
@@ -62,16 +70,51 @@ 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 variantScope = useId();
 const isCubes = computed(() => props.variant === "cubes");
+const isPatterned = computed(() => PATTERNED_BAR_VARIANTS.includes(props.variant));
+const isStripped = computed(() => props.variant === "stripped");
+const usesVariantShape = computed(
+  () => isStripped.value || props.bufferBar === true || props.glow === true
+);
+const hoveredIndex = ref(null);
+const lastIndex = computed(() => props.data.length - 1);
+const maxIndex = computed(() => {
+  if (!props.maxHighlight) return null;
+  let best = -1;
+  let bestTotal = Number.NEGATIVE_INFINITY;
+  props.data.forEach((row, index) => {
+    const total = series.value.reduce((sum, s) => {
+      const value = row[s.dataKey];
+      return sum + (typeof value === "number" ? value : 0);
+    }, 0);
+    if (total > bestTotal) {
+      bestTotal = total;
+      best = index;
+    }
+  });
+  return best >= 0 ? best : null;
+});
 const valueAccessor = computed(() => {
   const fn = props.valueLabel?.label;
   if (!fn) return void 0;
@@ -98,6 +141,40 @@ const series = computed(
     };
   })
 );
+const paintedSeries = computed(
+  () => series.value.filter((s) => typeof s.color === "string").map((s) => ({ dataKey: s.dataKey, color: s.color }))
+);
+const legendColors = computed(
+  () => Object.fromEntries(
+    series.value.filter((s) => s.color).map((s) => [s.name, s.color])
+  )
+);
+function fillFor(dataKey, color) {
+  if (!isPatterned.value || color === void 0) return color;
+  return `url(#${variantId(props.variant, dataKey, variantScope)})`;
+}
+function bufferFillFor(dataKey) {
+  return `url(#${variantId("buffer", dataKey, variantScope)})`;
+}
+function glowFor(dataKey) {
+  return props.glow ? `url(#${variantId("glow", dataKey, variantScope)})` : void 0;
+}
+const DIMMED_OPACITY = 0.3;
+function opacityFor(index) {
+  if (props.hoverHighlight && hoveredIndex.value !== null) {
+    return index === hoveredIndex.value ? 1 : DIMMED_OPACITY;
+  }
+  if (maxIndex.value !== null) {
+    return index === maxIndex.value ? 1 : DIMMED_OPACITY;
+  }
+  return 1;
+}
+function onBarEnter(index) {
+  if (props.hoverHighlight) hoveredIndex.value = index ?? null;
+}
+function onBarLeave() {
+  if (props.hoverHighlight) hoveredIndex.value = null;
+}
 const stackIdFor = (yAxisId) => props.stacked ? `stack-${yAxisId}` : void 0;
 const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : void 0);
 const chartContainerProps = computed(() => {
@@ -105,18 +182,23 @@ const chartContainerProps = computed(() => {
   const barCategoryGap = props.barCategoryGap ?? props.groupPadding;
   return {
     ...barGap !== void 0 ? { barGap } : {},
-    ...barCategoryGap !== void 0 ? { barCategoryGap } : {}
+    ...barCategoryGap !== void 0 ? { barCategoryGap } : {},
+    // Normalising only means something once the series are summed into a stack.
+    ...props.stacked && props.percent ? { stackOffset: "expand" } : {}
   };
 });
 function barRadius(index) {
   const r = props.radius ?? 2;
+  const horizontal = props.orientation === "horizontal";
+  if (isStripped.value && !props.stacked) {
+    return horizontal ? [0, r, r, 0] : [r, r, 0, 0];
+  }
   if (!props.stacked) return r;
   const isLast = index === series.value.length - 1;
-  if (props.orientation === "horizontal") {
-    return isLast ? [0, r, r, 0] : 0;
-  }
+  if (horizontal) return isLast ? [0, r, r, 0] : 0;
   return isLast ? [r, r, 0, 0] : 0;
 }
+defineSlots();
 </script>
 
 <template>
@@ -124,8 +206,25 @@ function barRadius(index) {
     :container="VccsBarChart"
     :x-axis-key="xAxisKey"
     :container-props="chartContainerProps"
+    :percent-axis="stacked === true && percent === true"
+    :legend-colors="legendColors"
     v-bind="props"
   >
+    <!--
+      Same namespace/`Customized` constraints as GradientDefs: these are built
+      with `h()` so they land in the SVG namespace and `url(#…)` resolves.
+    -->
+    <BarVariantDefs
+      v-if="isPatterned || glow || bufferBar"
+      :series="paintedSeries"
+      :variant="variant"
+      :scope="variantScope"
+      :glow="glow === true"
+      :buffer="bufferBar === true"
+    />
+    <template v-if="$slots.tooltip" #tooltip="scope">
+      <slot name="tooltip" v-bind="scope" />
+    </template>
     <Bar
       v-for="(s, i) in series"
       :key="s.dataKey"
@@ -133,10 +232,11 @@ function barRadius(index) {
       :name="s.name"
       :y-axis-id="s.yAxisId"
       :stack-id="stackIdFor(s.yAxisId)"
-      :fill="s.color"
+      :fill="fillFor(s.dataKey, s.color)"
       :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
@@ -159,7 +259,30 @@ function barRadius(index) {
           :empty-color="cubeEmptyColor"
           :include-empty="!stacked || i === 0"
         />
-        <Rectangle v-else v-bind="shapeProps" />
+        <VariantBarShape
+          v-else-if="usesVariantShape"
+          :x="shapeProps.x"
+          :y="shapeProps.y"
+          :width="shapeProps.width"
+          :height="shapeProps.height"
+          :radius="barRadius(i)"
+          :fill="shapeProps.fill ?? s.color"
+          :color="s.color"
+          :capped="isStripped"
+          :is-buffer="bufferBar === true && shapeProps.index === lastIndex"
+          :buffer-fill="bufferFillFor(s.dataKey)"
+          :filter="glowFor(s.dataKey)"
+          :opacity="opacityFor(shapeProps.index)"
+          @mouseenter="onBarEnter(shapeProps.index)"
+          @mouseleave="onBarLeave"
+        />
+        <Rectangle
+          v-else
+          v-bind="shapeProps"
+          :opacity="opacityFor(shapeProps.index)"
+          @mouseenter="onBarEnter(shapeProps.index)"
+          @mouseleave="onBarLeave"
+        />
       </template>
       <LabelList
         v-if="valueLabel && !isCubes"

package/dist/runtime/components/BarChart.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>;

package/dist/runtime/components/BubbleChart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, h } from "vue";
 import {
   CartesianGrid,
   Legend,
@@ -11,8 +11,11 @@ import {
   ZAxis
 } from "vccs";
 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 {
@@ -25,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 },
@@ -61,24 +58,47 @@ 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 }
+  theme: { 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 },
+  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) {
   if (accessor === void 0) return void 0;
   return typeof accessor === "function" ? accessor : String(accessor);
 }
+function accessorName(accessor, fallback) {
+  if (accessor === void 0) return fallback;
+  if (typeof accessor !== "function") return String(accessor);
+  const match = /(?:=>|return)\s*[\w$]+(?:\?\.|\.)([\w$]+)\s*;?\s*\}?\s*$/.exec(String(accessor));
+  return match?.[1] ?? fallback;
+}
 const xKey = computed(() => resolveAccessor(props.xAccessor));
 const yKey = computed(() => resolveAccessor(props.yAccessor));
 const zKey = computed(() => resolveAccessor(props.sizeAccessor));
 const categoryKey = computed(() => String(props.categoryKey));
+const xName = computed(() => props.xLabel ?? accessorName(props.xAccessor, "x"));
+const yName = computed(() => props.yLabel ?? accessorName(props.yAccessor, "y"));
+const zName = computed(() => accessorName(props.sizeAccessor, "size"));
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
 const sizeRange = computed(() => {
   if (props.sizeRange) return props.sizeRange;
@@ -127,11 +147,33 @@ const cursor = computed(
     radius: resolveHoverRadius(props.theme)
   } : false
 );
+const colorByCategory = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  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 colorByCat = /* @__PURE__ */ new Map();
-  for (const s of categoriesToSeries(props.categories)) colorByCat.set(s.dataKey, s.color);
   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);
@@ -140,26 +182,66 @@ const groups = computed(() => {
   return Array.from(byCategory.entries()).map(([name, data]) => ({
     name,
     data,
-    color: colorByCat.get(name)
+    color: colorByCategory.value.get(name)
   }));
 });
+const tooltipContent = computed(() => {
+  const fields = [
+    { key: xKey.value, name: xName.value, format: xTickFormatter.value },
+    { key: yKey.value, name: yName.value, format: yTickFormatter.value },
+    ...zKey.value ? [{ key: zKey.value, name: zName.value, format: void 0 }] : []
+  ];
+  return (tooltipProps) => {
+    const row = tooltipProps.payload?.[0]?.payload;
+    if (slots.tooltip) return slots.tooltip({ values: row });
+    const category = row != null ? String(row[categoryKey.value]) : void 0;
+    const color = category != null ? colorByCategory.value.get(category) : void 0;
+    const payload = (tooltipProps.payload ?? []).map((entry) => {
+      const field = fields.find((f) => f.key === entry.dataKey);
+      return {
+        ...entry,
+        color,
+        name: field?.name ?? entry.name,
+        value: field?.format ? field.format(entry.value, 0) : entry.value
+      };
+    });
+    return h(ChartTooltip, {
+      ...tooltipProps,
+      label: props.tooltipTitleFormatter && row ? props.tooltipTitleFormatter(row) : category,
+      payload,
+      variant: props.tooltipVariant,
+      roundness: props.tooltipRoundness
+    });
+  };
+});
 </script>
 
 <template>
-  <div class="vue-chrts" :style="themeVars">
-  <ChartContainer width="100%" :height="height">
+  <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
         v-if="(xGridLine ?? true) || (yGridLine ?? true)"
+        :horizontal="yGridLine ?? true"
+        :vertical="xGridLine ?? true"
         stroke="var(--vc-grid-color)"
         stroke-dasharray="var(--vc-grid-dash)"
         :stroke-width="'var(--vc-grid-width)'"
       />
+      <!-- Axes stay mounted when hidden: their `dataKey` is what maps rows to x/y. -->
       <XAxis
-        v-if="!hideXAxis"
         type="number"
         :data-key="xKey"
-        :name="xLabel"
+        :hide="hideXAxis"
+        :name="xName"
         :height="xAxisHeight"
         :tick="xTickProp"
         :tick-margin="AXIS_TICK_MARGIN.x"
@@ -171,10 +253,10 @@ const groups = computed(() => {
         :interval="xAxis.interval"
       />
       <YAxis
-        v-if="!hideYAxis"
         type="number"
         :data-key="yKey"
-        :name="yLabel"
+        :hide="hideYAxis"
+        :name="yName"
         :width="yAxisWidth"
         :tick="yTickProp"
         :tick-margin="AXIS_TICK_MARGIN.y"
@@ -184,18 +266,23 @@ const groups = computed(() => {
         :domain="yAxisDomain"
         :interval="yAxis.interval"
       />
-      <ZAxis v-if="zKey" type="number" :data-key="zKey" :range="sizeRange" />
+      <ZAxis v-if="zKey" type="number" :data-key="zKey" :name="zName" :range="sizeRange" />
 
+      <!-- Distinct `dataKey` per series: `vccs` filters the item tooltip and the -->
+      <!-- active-symbol highlight by it, so shared keys show every series at once. -->
       <Scatter
         v-for="g in groups"
         :key="g.name"
+        :data-key="g.name"
         :name="g.name"
         :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="ChartTooltip" :cursor="cursor" :is-animation-active="false" />
+      <Tooltip v-if="!hideTooltip" :content="tooltipContent" :cursor="cursor" :is-animation-active="false" />
       <Legend
         v-if="!hideLegend"
         :align="legend.align"
@@ -204,7 +291,7 @@ const groups = computed(() => {
         :wrapper-style="legendWrapperStyle"
       >
         <template #content="slotProps">
-          <ChartLegend v-bind="slotProps" />
+          <ChartLegend v-bind="slotProps" :variant="legendVariant" />
         </template>
       </Legend>
     </ScatterChart>

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

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

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>