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

package/dist/runtime/components/BubbleChart.d.vue.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/BubbleChart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, h } from "vue";
 import {
   CartesianGrid,
   Legend,
@@ -11,6 +11,7 @@ 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 { categoriesToSeries } from "../utils/categories";
@@ -69,16 +70,32 @@ const props = defineProps({
   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 },
+  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 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,9 +144,12 @@ 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;
+});
 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) {
     const cat = String(row[categoryKey.value]);
@@ -140,26 +160,64 @@ 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: category,
+      payload,
+      variant: props.tooltipVariant,
+      roundness: props.tooltipRoundness
+    });
+  };
+});
 </script>
 
 <template>
   <div class="vue-chrts" :style="themeVars">
-  <ChartContainer width="100%" :height="height">
+  <ChartSkeleton
+    v-if="loading"
+    :height="height"
+    shape="bars"
+    :label="loadingLabel ?? 'Loading'"
+  />
+  <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 +229,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 +242,21 @@ 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"
       />
 
-      <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 +265,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/DonutChart.vue

@@ -1,9 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed, useId } from "vue";
 import { Legend, Pie, PieChart, Tooltip } from "vccs";
 import ChartContainer from "./internal/ChartContainer";
-import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import SegmentVariantDefs, { segmentGradientId } from "./internal/SegmentVariantDefs";
+import { tooltipContentFor } from "./internal/tooltipContent";
+import { variantId } from "../utils/variants";
 import { DonutType } from "../enums";
 import { categoriesToSeries } from "../utils/categories";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
@@ -13,10 +16,15 @@ const props = defineProps({
   data: { type: Array, required: true },
   categories: { type: Object, required: true },
   type: { type: String, required: false },
+  variant: { type: String, required: false },
+  glow: { type: Boolean, required: false },
   height: { type: Number, required: false },
   radius: { type: Number, required: false },
   arcWidth: { type: Number, required: false },
   padAngle: { type: Number, required: false },
+  cornerRadius: { type: Number, required: false },
+  startAngle: { type: Number, required: false },
+  endAngle: { type: Number, required: false },
   stroke: { type: String, required: false },
   hideLegend: { type: Boolean, required: false },
   legendPosition: { type: String, required: false },
@@ -25,18 +33,40 @@ const props = defineProps({
   tooltipTitleFormatter: { type: Function, required: false },
   tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
-  duration: { type: Number, required: false }
+  duration: { type: Number, 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 themeVars = computed(() => themeToVars(props.theme));
+const variantScope = useId();
+const useGradient = computed(() => props.variant === "gradient");
 const segments = computed(() => {
   const cats = categoriesToSeries(props.categories);
-  return props.data.map((value, i) => ({
-    name: cats[i]?.name ?? String(i),
-    value,
-    // vccs reads `fill` directly from the data entry to color each sector
-    fill: cats[i]?.color ?? `var(--chart-color-${i})`
-  }));
+  return props.data.map((value, i) => {
+    const color = cats[i]?.color ?? `var(--chart-color-${i})`;
+    return {
+      name: cats[i]?.name ?? String(i),
+      value,
+      dataKey: String(i),
+      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
+    };
+  });
 });
+const paintedSegments = computed(
+  () => segments.value.map((s) => ({ dataKey: s.dataKey, color: s.color }))
+);
+const legendColors = computed(
+  () => Object.fromEntries(segments.value.map((s) => [s.name, s.color]))
+);
+const tooltipContent = computed(
+  () => tooltipContentFor(props.tooltipVariant, props.tooltipRoundness)
+);
 const DEFAULT_ARC_WIDTH = 40;
 const AUTO_OUTER_FRACTION = 0.9;
 const radii = computed(() => {
@@ -59,9 +89,13 @@ const radii = computed(() => {
 });
 const outerRadius = computed(() => radii.value.outerRadius);
 const innerRadius = computed(() => radii.value.innerRadius);
-const angles = computed(
-  () => props.type === DonutType.Half ? { startAngle: 180, endAngle: 0 } : { startAngle: 0, endAngle: 360 }
-);
+const angles = computed(() => {
+  const defaults = props.type === DonutType.Half ? { startAngle: 180, endAngle: 0 } : { startAngle: 0, endAngle: 360 };
+  return {
+    startAngle: props.startAngle ?? defaults.startAngle,
+    endAngle: props.endAngle ?? defaults.endAngle
+  };
+});
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
 const legendWrapperStyle = computed(
   () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
@@ -70,8 +104,25 @@ const legendWrapperStyle = computed(
 
 <template>
   <div class="donut-chart vue-chrts" :style="{ position: 'relative', width: '100%', height: `${height ?? (radius ? radius * 2 : 200)}px`, ...themeVars }">
-    <ChartContainer width="100%" height="100%">
+    <ChartSkeleton
+      v-if="loading"
+      :height="height ?? 200"
+      shape="ring"
+      :label="loadingLabel ?? 'Loading'"
+    />
+    <ChartContainer v-else width="100%" height="100%">
       <PieChart>
+        <!--
+          Built with `h()` so the paints land in the SVG namespace and each
+          segment's `fill="url(#…)"` resolves.
+        -->
+        <SegmentVariantDefs
+          v-if="useGradient || glow"
+          :segments="paintedSegments"
+          :scope="variantScope"
+          :gradient="useGradient"
+          :glow="glow === true"
+        />
         <Pie
           :data="segments"
           data-key="value"
@@ -81,10 +132,11 @@ const legendWrapperStyle = computed(
           :start-angle="angles.startAngle"
           :end-angle="angles.endAngle"
           :padding-angle="padAngle ?? 0"
+          :corner-radius="cornerRadius ?? 0"
           :stroke="stroke ?? 'none'"
           :is-animation-active="duration !== void 0 && duration !== 0"
         />
-        <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :is-animation-active="false" />
+        <Tooltip v-if="!hideTooltip" :content="tooltipContent" :is-animation-active="false" />
         <Legend
           v-if="!hideLegend"
           :align="legend.align"
@@ -93,7 +145,7 @@ const legendWrapperStyle = computed(
           :wrapper-style="legendWrapperStyle"
         >
           <template #content="slotProps">
-            <ChartLegend v-bind="slotProps" />
+            <ChartLegend v-bind="slotProps" :variant="legendVariant" :colors="legendColors" />
           </template>
         </Legend>
       </PieChart>

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

@@ -1,3 +1,4 @@
+import { type FunnelLayeredDatum } from "./internal/FunnelLayeredShape.vue.js";
 import type { FunnelChartProps } from "../types/charts.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<FunnelChartProps<T>> & (typeof globalThis extends {
@@ -5,7 +6,13 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        shape(props: Record<string, unknown> & {
+            onMouseenter: (event: MouseEvent, datum: FunnelLayeredDatum) => void;
+            onMousemove: (event: MouseEvent) => void;
+            onMouseleave: () => void;
+        }): unknown;
+    };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/runtime/components/FunnelChart.vue

@@ -3,13 +3,13 @@ import { computed, ref, useTemplateRef } from "vue";
 import {
   Funnel,
   FunnelChart as VccsFunnelChart,
-  LabelList,
-  Legend,
-  Tooltip
+  Legend
 } from "vccs";
 import ChartContainer from "./internal/ChartContainer";
-import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartSkeleton from "./internal/ChartSkeleton.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
+import FunnelClassicShape from "./internal/FunnelClassicShape.vue";
+import FunnelTooltip from "./internal/FunnelTooltip.vue";
 import FunnelLayeredShape, {
 } from "./internal/FunnelLayeredShape.vue";
 import { categoriesToSeries } from "../utils/categories";
@@ -22,7 +22,12 @@ const props = defineProps({
   height: { type: Number, required: true },
   variant: { type: String, required: false },
   lastShapeType: { type: String, required: false },
-  showValueLabel: { type: Boolean, required: false },
+  showValueLabel: { type: Boolean, required: false, default: true },
+  showStageLabel: { type: Boolean, required: false, default: true },
+  stageGap: { type: Number, required: false, default: 4 },
+  valueFormatter: { type: Function, required: false },
+  showPercentage: { type: Boolean, required: false, default: true },
+  labelSize: { type: [String, Number, Object], required: false },
   hideLegend: { type: Boolean, required: false },
   legendPosition: { type: String, required: false },
   legendStyle: { type: [String, Object], required: false },
@@ -30,19 +35,42 @@ const props = defineProps({
   tooltipTitleFormatter: { type: Function, required: false },
   tooltip: { type: Object, required: false },
   theme: { type: Object, required: false },
-  duration: { type: Number, required: false }
+  duration: { type: Number, 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 }
 });
+defineSlots();
 const themeVars = computed(() => themeToVars(props.theme));
 const stages = computed(() => {
   const cats = categoriesToSeries(props.categories);
   return props.data.map((value, i) => ({
     name: cats[i]?.name ?? String(i),
     value,
+    formattedValue: props.valueFormatter?.(value, i),
     fill: cats[i]?.color ?? `var(--chart-color-${i})`,
     color: cats[i]?.color ?? `var(--chart-color-${i})`
   }));
 });
 const isLayered = computed(() => props.variant === "layered");
+const showValueLabel = computed(() => props.showValueLabel ?? true);
+const NAMED_LABEL_SIZES = { sm: 10, md: 12, lg: 14 };
+function toPixels(size) {
+  if (size === void 0 || size === "auto") return void 0;
+  return typeof size === "number" ? size : NAMED_LABEL_SIZES[size];
+}
+const labelSizes = computed(() => {
+  const size = props.labelSize;
+  const perRole = typeof size === "object" ? size : void 0;
+  return {
+    base: toPixels(typeof size === "object" ? size.base : size),
+    value: perRole?.value,
+    percentage: perRole?.percentage,
+    name: perRole?.name
+  };
+});
 const layeredData = computed(() => {
   const maxValue = stages.value[0]?.value ?? 0;
   return stages.value.map((stage, stageIndex) => ({
@@ -50,10 +78,24 @@ const layeredData = computed(() => {
     stageIndex,
     stageCount: stages.value.length,
     maxValue,
-    nextValue: stages.value[stageIndex + 1]?.value ?? stage.value
+    nextValue: stages.value[stageIndex + 1]?.value ?? stage.value,
+    labelSizes: labelSizes.value,
+    showValue: showValueLabel.value,
+    showPercentage: props.showPercentage ?? true,
+    showStageLabel: props.showStageLabel ?? true
+  }));
+});
+const classicData = computed(() => {
+  const maxValue = stages.value[0]?.value ?? 0;
+  return stages.value.map((stage) => ({
+    ...stage,
+    maxValue,
+    labelSizes: labelSizes.value,
+    showValue: showValueLabel.value,
+    showStageLabel: props.showStageLabel ?? true,
+    stageGap: props.stageGap
   }));
 });
-const showValueLabel = computed(() => props.showValueLabel ?? true);
 const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
 const legendWrapperStyle = computed(
   () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
@@ -73,7 +115,7 @@ function showTooltip(event, datum) {
   activeDatum.value = datum;
   updateTooltipPosition(event);
 }
-function hideTooltip() {
+function clearTooltip() {
   activeDatum.value = null;
 }
 </script>
@@ -85,56 +127,98 @@ function hideTooltip() {
     class="vc-funnel-layered vue-chrts"
     :style="{ height: `${height}px`, ...themeVars }"
   >
-    <ChartContainer width="100%" height="100%">
+    <ChartSkeleton
+      v-if="loading"
+      :height="height"
+      shape="bars"
+      :label="loadingLabel ?? 'Loading'"
+    />
+    <ChartContainer v-else width="100%" height="100%">
       <VccsFunnelChart :margin="{ top: 16, right: 0, bottom: 8, left: 0 }">
         <Funnel
           :data="layeredData"
           data-key="value"
           name-key="name"
           last-shape-type="rectangle"
+          stroke="none"
           :is-animation-active="duration !== void 0 && duration !== 0"
         >
           <template #shape="shapeProps">
-            <FunnelLayeredShape
+            <!--
+              Bind only what the shape reads. vccs also passes fill/stroke
+              (`stroke` defaults to `#fff`); those fall through onto the root
+              `<g>` and SVG-inherit onto every label, stroking the glyphs so
+              they read as extra-bold. CSS `font-weight` cannot undo that.
+            -->
+            <slot
+              name="shape"
               v-bind="shapeProps"
-              @mouseenter="showTooltip"
-              @mousemove="updateTooltipPosition"
-              @mouseleave="hideTooltip"
-            />
+              :on-mouseenter="showTooltip"
+              :on-mousemove="updateTooltipPosition"
+              :on-mouseleave="clearTooltip"
+            >
+              <FunnelLayeredShape
+                :payload="shapeProps.payload"
+                :parent-view-box="shapeProps.parentViewBox"
+                @mouseenter="showTooltip"
+                @mousemove="updateTooltipPosition"
+                @mouseleave="clearTooltip"
+              />
+            </slot>
           </template>
         </Funnel>
       </VccsFunnelChart>
     </ChartContainer>
 
-    <div
-      v-if="!hideTooltip && activeDatum"
-      class="vc-funnel-layered__tooltip"
-      :style="{ left: `${tooltipPosition.x}px`, top: `${tooltipPosition.y}px` }"
-    >
-      <span
-        class="vc-funnel-layered__dot"
-        :style="{ background: activeDatum.color }"
-      />
-      <span class="vc-funnel-layered__name">{{ activeDatum.name }}</span>
-      <strong class="vc-funnel-layered__value">{{
-        activeDatum.value.toLocaleString()
-      }}</strong>
-    </div>
+    <FunnelTooltip
+      v-if="!props.hideTooltip && activeDatum"
+      :datum="activeDatum"
+      :x="tooltipPosition.x"
+      :y="tooltipPosition.y"
+      :variant="tooltipVariant"
+      :roundness="tooltipRoundness"
+    />
   </div>
 
-  <div v-else class="vue-chrts" :style="themeVars">
-  <ChartContainer width="100%" :height="height">
+  <div v-else ref="chartContainer" class="vc-funnel vue-chrts" :style="themeVars">
+    <ChartSkeleton
+      v-if="loading"
+      :height="height"
+      shape="bars"
+      :label="loadingLabel ?? 'Loading'"
+    />
+    <ChartContainer v-else width="100%" :height="height">
     <VccsFunnelChart>
       <Funnel
-        :data="stages"
+        :data="classicData"
         data-key="value"
         name-key="name"
         :last-shape-type="lastShapeType ?? 'triangle'"
+        stroke="none"
         :is-animation-active="duration !== void 0 && duration !== 0"
       >
-        <LabelList v-if="showValueLabel" data-key="value" position="right" />
+        <template #shape="shapeProps">
+          <slot
+            name="shape"
+            v-bind="shapeProps"
+            :on-mouseenter="showTooltip"
+            :on-mousemove="updateTooltipPosition"
+            :on-mouseleave="clearTooltip"
+          >
+            <FunnelClassicShape
+              :x="shapeProps.x"
+              :y="shapeProps.y"
+              :upper-width="shapeProps.upperWidth"
+              :lower-width="shapeProps.lowerWidth"
+              :height="shapeProps.height"
+              :payload="shapeProps.payload"
+              @mouseenter="showTooltip"
+              @mousemove="updateTooltipPosition"
+              @mouseleave="clearTooltip"
+            />
+          </slot>
+        </template>
       </Funnel>
-      <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :is-animation-active="false" />
       <Legend
         v-if="!hideLegend"
         :align="legend.align"
@@ -143,10 +227,18 @@ function hideTooltip() {
         :wrapper-style="legendWrapperStyle"
       >
         <template #content="slotProps">
-          <ChartLegend v-bind="slotProps" />
+          <ChartLegend v-bind="slotProps" :variant="legendVariant" />
         </template>
       </Legend>
     </VccsFunnelChart>
   </ChartContainer>
+    <FunnelTooltip
+      v-if="!props.hideTooltip && activeDatum"
+      :datum="activeDatum"
+      :x="tooltipPosition.x"
+      :y="tooltipPosition.y"
+      :variant="tooltipVariant"
+      :roundness="tooltipRoundness"
+    />
   </div>
 </template>

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

@@ -1,3 +1,4 @@
+import { type FunnelLayeredDatum } from "./internal/FunnelLayeredShape.vue.js";
 import type { FunnelChartProps } from "../types/charts.js";
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<FunnelChartProps<T>> & (typeof globalThis extends {
@@ -5,7 +6,13 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        shape(props: Record<string, unknown> & {
+            onMouseenter: (event: MouseEvent, datum: FunnelLayeredDatum) => void;
+            onMousemove: (event: MouseEvent) => void;
+            onMouseleave: () => void;
+        }): unknown;
+    };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/runtime/components/LineChart.d.vue.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>;