---
title: "Chart"
description: "A chart to visualize data as lines, areas, bars or a donut."
canonical_url: "https://ui.nuxt.com/docs/components/chart"
---
# Chart

> A chart to visualize data as lines, areas, bars or a donut.

## Usage

The Chart component is built on top of [TanStack Charts](https://tanstack.com/charts/latest) and renders an SVG on the server.

TanStack Charts is an optional peer dependency, install it first:

```bash [pnpm]
pnpm add @tanstack/charts
```

```bash [yarn]
yarn add @tanstack/charts
```

```bash [npm]
npm install @tanstack/charts
```

```bash [bun]
bun add @tanstack/charts
```

### Data

Use the `data` prop to pass an array of objects, the `index` prop to set the key used for the x axis and the `categories` prop to set the series, each with the `key` of its values and an optional `label` and `color`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

> [!NOTE]
> 
> You can also pass categories as strings, like `['desktop', 'mobile']`, when they read well as names.

> [!TIP]
> 
> Use the `aria-label` prop to name the chart for assistive technologies.

### Type

Use the `type` prop to change the type of chart. Defaults to `line`.

> [!NOTE]
> 
> With `donut`, each row of `data` is a slice. The `index` sets its label and the first key of `categories` its value.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart type="donut" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Stacked

Use the `stacked` prop to stack the series on top of each other.

> [!WARNING]
> 
> This prop only works when `type` is `area` or `bar`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart type="bar" stacked :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Curve

Use the `curve` prop to change the shape of the line between values. Defaults to `linear`.

> [!WARNING]
> 
> This prop only works when `type` is `line` or `area`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart type="line" curve="monotone" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Colors

Use the `colors` prop to set the color of each series with theme colors or any CSS color.

> [!NOTE]
> 
> The colors follow the `categories` order, or the `data` order with `donut`. A `color` set on a category takes precedence. When there are more series than colors, they repeat as lighter tints.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :colors="[
  'success',
  '#8b5cf6'
]" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

> [!TIP]
> See: /docs/getting-started/theme/css-variables#chart
> 
> The colors default to the `--ui-chart-*` CSS variables, which you can customize in your `main.css` file.

### Points

Use the `points` prop to draw a dot at each value.

> [!WARNING]
> 
> This prop only works when `type` is `line`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart points :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Grid

Use the `grid` prop to toggle the horizontal grid lines. Defaults to `true`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :grid="false" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Axis

Use the `x-axis` and `y-axis` props to toggle each axis. Both default to `true`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :x-axis="false" :y-axis="false" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Axis labels

Use the `x-label` and `y-label` props to display a title along each axis.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart x-label="Month" y-label="Visitors" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Legend

Use the `legend` prop to toggle the legend.

> [!NOTE]
> 
> The legend is displayed by default when there is more than one category, or more than one slice with `donut`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :legend="false" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Tooltip

Use the `tooltip` prop to customize or hide the [Tooltip](https://ui.nuxt.com/docs/components/tooltip) displayed on the focused values. Defaults to `true`.

> [!TIP]
> See: #with-tooltip-slot
> 
> You can also use the `#tooltip` slot to replace its content.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :tooltip="false" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Thickness

Use the `thickness` prop to set the width of the ring in pixels. Defaults to `24`.

> [!WARNING]
> 
> This prop only works when `type` is `donut`.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart type="donut" :thickness="12" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

### Size

Use the `height` prop to set the height of the chart in pixels. Defaults to `300`.

> [!TIP]
> 
> The chart follows the width of its container. Use the `aspect-ratio` prop to derive the height from the width, or the `width` prop to set a fixed width.

> [!NOTE]
> 
> With a fixed height, the chart fades in once its container is measured. With `aspect-ratio`, the chart rendered on the server is displayed right away.

```vue
<script setup lang="ts">
import type { ChartData } from '@nuxt/ui'

const data = ref<ChartData[]>([
  {
    month: "January",
    desktop: 186,
    mobile: 80
  },
  {
    month: "February",
    desktop: 305,
    mobile: 200
  },
  {
    month: "March",
    desktop: 237,
    mobile: 120
  },
  {
    month: "April",
    desktop: 73,
    mobile: 190
  },
  {
    month: "May",
    desktop: 209,
    mobile: 130
  },
  {
    month: "June",
    desktop: 214,
    mobile: 140
  }
])
</script>

<template>
  <UChart :height="200" :data="data" index="month" :categories="[
  {
    key: 'desktop',
    label: 'Desktop'
  },
  {
    key: 'mobile',
    label: 'Mobile'
  }
]" />
</template>
```

## Examples

### With formatted values

Use the `format` prop to format the values on the y axis and in the tooltip.

```vue [ChartFormatExample.vue]
<script setup lang="ts">
const data = [
  { month: 'January', revenue: 18600 },
  { month: 'February', revenue: 30500 },
  { month: 'March', revenue: 23700 },
  { month: 'April', revenue: 27300 },
  { month: 'May', revenue: 20900 },
  { month: 'June', revenue: 31400 }
]

const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', notation: 'compact' })
</script>

<template>
  <UChart
    type="bar"
    :data="data"
    index="month"
    :categories="[{ key: 'revenue', label: 'Revenue' }]"
    :format="value => currency.format(value)"
    aria-label="Monthly revenue"
  />
</template>
```

### With a chart definition

Use the `definition` prop to pass a complete [TanStack Charts definition](https://tanstack.com/charts/latest/docs/concepts/chart-definitions) when the other props are not enough.

> [!NOTE]
> See: https://tanstack.com/charts/latest
> 
> A definition from the TanStack Charts examples renders as is, with the tooltip and the responsive sizing applied.

```vue [ChartDefinitionExample.vue]
<script setup lang="ts">
import { defineChart, lineY, ruleY } from '@tanstack/charts'
import { scaleLinear } from '@tanstack/charts/scales/linear'
import { scalePoint } from '@tanstack/charts/scales/point'

const data = [
  { month: 'January', revenue: 186 },
  { month: 'February', revenue: 305 },
  { month: 'March', revenue: 237 },
  { month: 'April', revenue: 273 },
  { month: 'May', revenue: 209 },
  { month: 'June', revenue: 314 }
]

const definition = defineChart({
  marks: [
    ruleY([250], { stroke: 'var(--ui-error)', strokeDasharray: '4 4' }),
    lineY(data, { x: 'month', y: 'revenue', stroke: 'var(--ui-primary)', strokeWidth: 2, points: true })
  ],
  scales: {
    x: { scale: () => scalePoint<string>().padding(0.2) },
    y: { scale: scaleLinear, nice: true, grid: true, axis: { label: 'Revenue' } }
  }
})
</script>

<template>
  <UChart :definition="definition" aria-label="Revenue against target" />
</template>
```

> [!TIP]
> See: /docs/getting-started/theme/css-variables#chart
> 
> Series without an explicit color use the `--ui-chart-*` CSS variables. Colors set in the definition are kept.

> [!CAUTION]
> 
> When the definition brings its own `tooltip`, it is displayed in place of the `tooltip` prop.

> [!WARNING]
> 
> Examples importing `d3-*` packages need them installed in your project.

### With center slot

Use the `#center` slot to display content in the middle of a `donut` chart.

```vue [ChartCenterSlotExample.vue]
<script setup lang="ts">
const data = [
  { browser: 'Chrome', visitors: 275 },
  { browser: 'Safari', visitors: 200 },
  { browser: 'Firefox', visitors: 187 },
  { browser: 'Edge', visitors: 173 }
]
</script>

<template>
  <UChart
    type="donut"
    :data="data"
    index="browser"
    :categories="['visitors']"
    legend
    aria-label="Visitors by browser"
  >
    <template #center>
      <span class="text-2xl font-semibold text-highlighted">835</span>
      <span class="text-xs text-muted">Visitors</span>
    </template>
  </UChart>
</template>
```

### With tooltip slot

Use the `#tooltip` slot to replace the tooltip content. It receives the `title`, the `rows` with their `label`, `value` and `color`, and the focused `points`.

```vue [ChartTooltipSlotExample.vue]
<script setup lang="ts">
const data = [
  { month: 'January', revenue: 18600, expenses: 12400 },
  { month: 'February', revenue: 30500, expenses: 21800 },
  { month: 'March', revenue: 23700, expenses: 25100 },
  { month: 'April', revenue: 27300, expenses: 19600 },
  { month: 'May', revenue: 20900, expenses: 22300 },
  { month: 'June', revenue: 31400, expenses: 20700 }
]

const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })

function profit(month?: string) {
  const row = data.find(row => row.month === month)

  return row ? row.revenue - row.expenses : 0
}
</script>

<template>
  <UChart
    type="bar"
    :data="data"
    index="month"
    :categories="[{ key: 'revenue', label: 'Revenue', color: 'success' }, { key: 'expenses', label: 'Expenses', color: 'error' }]"
    :format="value => currency.format(value)"
    aria-label="Revenue and expenses"
  >
    <template #tooltip="{ title, rows }">
      <p class="font-medium text-highlighted">
        {{ title }}
      </p>

      <div v-for="row in rows" :key="row.label" class="flex items-center gap-2">
        <span class="size-2 rounded-full" :style="{ backgroundColor: row.color }" />
        <span class="text-muted">{{ row.label }}</span>
        <span class="ms-auto ps-4 tabular-nums">{{ row.value }}</span>
      </div>

      <USeparator class="my-1" />

      <div class="flex items-center gap-2">
        <span class="text-muted">Profit</span>
        <UBadge
          :color="profit(title) >= 0 ? 'success' : 'error'"
          :label="currency.format(profit(title))"
          variant="subtle"
          size="sm"
          class="ms-auto tabular-nums"
        />
      </div>
    </template>
  </UChart>
</template>
```

## API

### Props

```ts
/**
 * Props for the Chart component
 */
interface ChartProps {
  /**
   * The type of chart to render.
   * @default 'line'
   */
  type?: "line" | "area" | "bar" | "donut" | undefined;
  /**
   * The rows to plot, one object per x value, or per slice with `donut`.
   */
  data?: T[] | undefined;
  /**
   * The key of each row used for the x axis, or for the slice labels with `donut`.
   */
  index?: keyof T & string | undefined;
  /**
   * The keys of each row plotted as series on the y axis, or objects to set their `label` and `color`.
   * With `donut`, the first one sets the slice values.
   */
  categories?: ((keyof T & string) | ChartCategory<T>)[] | undefined;
  /**
   * The series colors, in `categories` order, or in `data` order with `donut`. Accepts theme colors or any CSS color.
   * When there are more series than colors, the colors repeat as lighter tints.
   * Defaults to the `--ui-chart-1` to `--ui-chart-6` CSS variables.
   */
  colors?: string[] | undefined;
  /**
   * Stack the series on top of each other. Only applies to `area` and `bar`.
   */
  stacked?: boolean | undefined;
  /**
   * The shape of the line between values. Only applies to `line` and `area`.
   * @default 'linear'
   */
  curve?: "linear" | "monotone" | "step" | undefined;
  /**
   * Draw a dot at each value. Only applies to `line`.
   * @default false
   */
  points?: boolean | undefined;
  /**
   * Display horizontal grid lines.
   * @default true
   */
  grid?: boolean | undefined;
  /**
   * Display the x axis.
   * @default true
   */
  xAxis?: boolean | undefined;
  /**
   * Display the y axis.
   * @default true
   */
  yAxis?: boolean | undefined;
  /**
   * A title displayed along the x axis.
   */
  xLabel?: string | undefined;
  /**
   * A title displayed along the y axis.
   */
  yLabel?: string | undefined;
  /**
   * Display a legend. Defaults to `true` when there is more than one category, or more than one slice with `donut`.
   */
  legend?: boolean | undefined;
  /**
   * Format the values on the y axis and in the tooltip.
   */
  format?: (value: number): string | undefined;
  /**
   * Display a tooltip on the focused values.
   * `{ content: { side: 'top', sideOffset: 12 } }`{lang="ts-type"}
   * @default true
   */
  tooltip?: boolean | TooltipProps | undefined;
  /**
   * The width of the ring in pixels. Only applies to `donut`.
   * @default 24
   */
  thickness?: number | undefined;
  /**
   * The height of the chart in pixels. Defaults to `300` unless `aspectRatio` is set.
   */
  height?: number | undefined;
  /**
   * The width over height ratio of the chart, used when `height` is not set.
   */
  aspectRatio?: number | undefined;
  /**
   * A fixed width in pixels. The chart follows its container by default.
   */
  width?: number | undefined;
  /**
   * The width used on the server and before the container is measured.
   * @default 640
   */
  initialWidth?: number | undefined;
  /**
   * The accessible name of the chart. Defaults to the categories, set it when using `definition`.
   */
  ariaLabel?: string | undefined;
  /**
   * A longer description of the chart for assistive technologies.
   */
  ariaDescription?: string | undefined;
  /**
   * A complete TanStack Charts definition. Takes precedence over `data`, `index` and `categories`.
   * When it has its own `tooltip`, that one is used in place of the `tooltip` prop.
   */
  definition?: Omit<StaticChartDefinition<any, any, any, "dom">, "tooltip"> & { tooltip?: false | ChartTooltipInput<any, any, any, "dom"> | undefined; } | Omit<ResponsiveChartDefinition<any, any, any, "dom">, "tooltip"> & { tooltip?: false | ChartTooltipInput<any, any, any, "dom"> | undefined; } | undefined;
  ui?: { root?: SlotClass; base?: SlotClass; tooltip?: SlotClass; tooltipTitle?: SlotClass; tooltipRow?: SlotClass; tooltipIndicator?: SlotClass; tooltipLabel?: SlotClass; tooltipValue?: SlotClass; center?: SlotClass; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Chart component
 */
interface ChartSlots {
  tooltip(): any;
  center(): any;
}
```

### Emits

```ts
/**
 * Emitted events for the Chart component
 */
interface ChartEmits {
  select: (payload: [point: ChartPoint<any, ChartValue, ChartValue> | null]) => void;
  focusChange: (payload: [point: ChartPoint<any, ChartValue, ChartValue> | null]) => void;
  focusGroupChange: (payload: [points: readonly ChartPoint<any, ChartValue, ChartValue>[]]) => void;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    chart: {
      slots: {
        root: [
          'relative w-full text-xs text-muted **:data-reka-popper-content-wrapper:pointer-events-none',
          '[--ts-chart-tooltip-background:var(--ui-bg)] [--ts-chart-tooltip-color:var(--ui-text-highlighted)] [--ts-chart-tooltip-border:1px_solid_var(--ui-border)] [--ts-chart-tooltip-border-radius:var(--radius-sm)] [--ts-chart-tooltip-shadow:var(--shadow-sm)] [--ts-chart-tooltip-padding:--spacing(1.5)_--spacing(2.5)] [--ts-chart-tooltip-font:inherit]'
        ],
        base: 'opacity-0 in-data-measured:opacity-100 transition-opacity duration-150 [&_.ts-chart]:rounded-md [&_.ts-chart]:outline-0 [&_.ts-chart]:outline-primary/25 [&_.ts-chart:focus-visible]:outline-3 [&_.ts-chart:focus-visible]:ring [&_.ts-chart:focus-visible]:ring-primary',
        tooltip: 'flex-col items-stretch gap-1 h-auto min-w-32 py-1.5 pointer-events-none',
        tooltipTitle: 'font-medium text-highlighted',
        tooltipRow: 'flex items-center gap-1.5 text-muted data-[active=true]:text-highlighted',
        tooltipIndicator: 'size-2 shrink-0 rounded-full',
        tooltipLabel: 'truncate',
        tooltipValue: 'ms-auto ps-4 font-medium text-highlighted tabular-nums',
        center: 'absolute inset-0 flex flex-col items-center justify-center pointer-events-none opacity-0 in-data-measured:opacity-100 transition-opacity duration-150'
      },
      variants: {
        type: {
          line: '',
          area: '',
          bar: '',
          donut: ''
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/Chart.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/chart.ts).

---

- [TanStack Charts](https://tanstack.com/charts/latest)
- [GitHub](https://github.com/nuxt/ui/blob/v4/src/runtime/components/Chart.vue)


## Sitemap

See the full [sitemap](https://ui.nuxt.com/sitemap.md) for all pages.