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

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

## Usage

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

> [!WARNING]
> 
> TanStack Charts is still in alpha, its API may change between minor releases.

### 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 keys plotted as series.

```vue
<template>
  <UChart :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Type

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

```vue
<template>
  <UChart type="bar" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Stacked

Use the `stacked` prop to stack the series on top of each other. Only applies to `area` and `bar` types.

```vue
<template>
  <UChart type="area" stacked :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Curve

Use the `curve` prop to change the shape of the line between values, `linear`, `monotone` or `step`. Only applies to `line` and `area` types. Defaults to `linear`.

```vue
<template>
  <UChart curve="monotone" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Colors

Use the `colors` prop to set the color of each series, in `categories` order. It accepts theme colors or any CSS color. Defaults to `['primary', 'secondary', 'info', 'success', 'warning', 'error']`.

```vue
<template>
  <UChart :colors="[
  'success',
  '#8b5cf6'
]" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Points

Use the `points` prop to draw a dot at each value. Only applies to the `line` type.

```vue
<template>
  <UChart points :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Grid

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

```vue
<template>
  <UChart :grid="false" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Axis

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

```vue
<template>
  <UChart :y-axis="false" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Legend

Use the `legend` prop to toggle the legend. Defaults to `true` when there is more than one category.

```vue
<template>
  <UChart :legend="false" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

### Height

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

```vue
<template>
  <UChart :height="200" :data="[
  {
    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
  }
]" index="month" :categories="[
  'desktop',
  'mobile'
]" />
</template>
```

## Examples

### With custom tooltip

Use the `#tooltip` slot to replace the tooltip content. It receives the hovered `points`, each with the `datum` it comes from and its `color`.

```vue [ChartTooltipSlotExample.vue]
<script setup lang="ts">
const data = [
  { 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="['desktop', 'mobile']"
    curve="monotone"
    aria-label="Visitors by device"
  >
    <template #tooltip="{ points }">
      <p class="font-medium text-highlighted mb-1">
        {{ points[0]?.datum.x }}
      </p>

      <div v-for="point in points" :key="point.key" class="flex items-center gap-2">
        <span class="size-2 rounded-full" :style="{ backgroundColor: point.color }" />
        <span class="capitalize text-muted">{{ point.datum.category }}</span>
        <span class="ms-auto font-medium text-highlighted tabular-nums">{{ point.datum.value }}</span>
      </div>
    </template>
  </UChart>
</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. The component still applies the theme and keeps the chart responsive.

```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'
import { tooltip } from '@tanstack/charts/tooltip'

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 }
  },
  tooltip
})
</script>

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

## API

### Props

```ts
/**
 * Props for the Chart component
 */
interface ChartProps {
  /**
   * The type of chart to render.
   * @default 'line'
   */
  type?: "line" | "area" | "bar" | undefined;
  /**
   * The rows to plot, one object per x value.
   */
  data?: T[] | undefined;
  /**
   * The key of each row used for the x axis.
   */
  index?: keyof T & string | undefined;
  /**
   * The keys of each row plotted as series on the y axis.
   */
  categories?: (keyof T & string)[] | undefined;
  /**
   * The series colors, in `categories` order. Accepts theme colors or any CSS color.
   * @default ['primary', 'secondary', 'info', 'success', 'warning', 'error']
   */
  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;
  /**
   * Display a legend. Defaults to `true` when there is more than one category.
   */
  legend?: boolean | undefined;
  /**
   * Format the y axis ticks.
   */
  format?: (value: number): string | undefined;
  /**
   * The height of the chart in pixels.
   * @default 300
   */
  height?: 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.
   */
  ariaLabel?: string | undefined;
  /**
   * A complete TanStack Charts definition. Takes precedence over `data`, `index` and `categories`.
   */
  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; } | undefined;
}
```

### Slots

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

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    chart: {
      slots: {
        root: [
          'relative w-full text-xs text-muted',
          '[--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:calc(var(--ui-radius)*1.5)]',
          '[--ts-chart-tooltip-shadow:var(--shadow-lg)]',
          '[--ts-chart-tooltip-padding:--spacing(2)]',
          '[--ts-chart-tooltip-font:inherit]'
        ],
        base: ''
      },
      variants: {
        type: {
          line: '',
          area: '',
          bar: ''
        }
      }
    }
  }
})
```

## 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.