Chart

Default

A basic bar chart. ChartBar wraps ChartContainer, so it inherits the shared theming, tooltip, and legend plumbing from a single config.

Usage

Import the parts you need from the component's folder.

import { ChartContainer, ChartTooltipContent, ChartLegendContent } from "@/components/ui/chart";

Grid

Draw horizontal grid lines behind the plot with the grid prop.

Axis

Customize the axis ticks. Pass xTickFormatter and yTickFormatter to reshape category and value labels (here, compact currency).

Tooltip

ChartContainer wires ChartTooltipContent into the crosshair. Hover to see the title and per-series rows; valueFormatter shapes each value.

Custom tooltip

Pass tooltipFormatter for full control of each row. It forwards to ChartTooltipContent's formatter(value, name, item, index, payload) and returns a string that replaces the default label/value split.

Legend

Render ChartLegendContent (exported as ChartLegend) below the chart with the legend prop; labels and colors come from the config.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  ChartContainer,
  ChartCrosshair,
  ChartLegendContent,
  ChartTooltip,
  VisArea,
  VisAxis,
  VisLine,
  VisXYContainer,
} from "@/components/ui/chart";
</script>

<template>
  <ChartContainer>
    <VisXYContainer>
      <VisArea />
      <VisLine />
      <VisAxis />
      <ChartTooltip />
      <ChartCrosshair />
    </VisXYContainer>
    <ChartLegendContent />
  </ChartContainer>
</template>

API Reference