TypeScript

vccs ships complete types. In .vue files with Volar, slot props and event payloads are inferred without annotations:

<Tooltip>
  <template #content="{ active, payload, label }">
    <div v-if="active">{{ label }}: {{ payload?.[0]?.value }}</div>
  </template>
</Tooltip>

Row-typed charts

A child component cannot see the type of its chart's data, so data-key accepts any string by default. To check data keys against your row type, create typed components once per row type:

<script setup lang="ts">
import { Area, AreaChart, Tooltip, XAxis, defineChartComponents } from 'vccs'

interface Visit { date: string, desktop: number, mobile: number }
defineProps<{ visits: Visit[] }>()

const Chart = defineChartComponents<Visit>()({ AreaChart, Area, XAxis, Tooltip })
</script>

<template>
  <Chart.AreaChart
    :data="visits"
    :height="300"
  >
    <Chart.XAxis data-key="date" />
    <Chart.Area data-key="desktop" />
    <Chart.Area data-key="mobile" />
    <!-- data-key="tablet" is a type error -->
    <Chart.Tooltip />
  </Chart.AreaChart>
</template>

defineChartComponents returns the supplied components with row types. Only selected components enter the bundle. Tooltip payload items carry payload: Visit. Standalone charts infer row types from data; aggregate payloads keep their source rows.

Exported types

ChartTransition (the transition prop), ChartPointerState (chart event state), BrushStartEndIndex, TooltipActiveIndex and LegendHidden (model values), BrushIndex (one Brush row index), an XxxProps type for every public component, and the available named slot prop types. TooltipPayloadEntry and TooltipPayload type reusable tooltip content. Runtime prop-definition objects and internal context helpers are not public exports.