# Chart: Formatting values

> `valueFormatter` formats the number and keeps the indicator and name. `labelFormatter` does the same for the label. To replace a whole row instead, use `formatter`.

Example: https://hextaui.com/docs/chart/examples/value-format
Component docs: https://hextaui.com/docs/chart.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/chart-value-format.json
```

This adds `components/examples/chart/value-format.tsx` with the Chart component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/chart/value-format.tsx"
"use client"

import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

const chartData = [
  { month: "2026-01", revenue: 18420.5 },
  { month: "2026-02", revenue: 21310 },
  { month: "2026-03", revenue: 19875.25 },
  { month: "2026-04", revenue: 24960 },
  { month: "2026-05", revenue: 28140.75 },
  { month: "2026-06", revenue: 31295 },
]

const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig

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

const compactCurrency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  notation: "compact",
})

const monthFormat = new Intl.DateTimeFormat("en-US", {
  month: "long",
  year: "numeric",
  timeZone: "UTC",
})

function formatMonth(value: unknown) {
  return monthFormat.format(new Date(`${value}-01T00:00:00Z`))
}

export function ChartValueFormat() {
  return (
    <ChartContainer
      aria-label="Area chart of revenue"
      config={chartConfig}
      className="h-56 w-full max-w-md"
    >
      <AreaChart data={chartData} margin={{ left: 4, right: 12, top: 8 }}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          tickFormatter={(value) => formatMonth(value).slice(0, 3)}
        />
        <YAxis
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          width={48}
          tickFormatter={(value) => compactCurrency.format(value)}
        />
        <ChartTooltip
          content={
            <ChartTooltipContent
              indicator="line"
              labelFormatter={formatMonth}
              valueFormatter={(value) => currency.format(Number(value))}
            />
          }
        />
        <Area
          dataKey="revenue"
          type="monotone"
          stroke="var(--color-revenue)"
          strokeWidth={2}
          fill="var(--color-revenue)"
          fillOpacity={0.1}
        />
      </AreaChart>
    </ChartContainer>
  )
}
```

## Props in this example

### ChartContainer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `config` | `ChartConfig` | – | Labels, icons and colors for each data key. |

### ChartTooltip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` | `ReactElement \| (props) => ReactNode` | – | Usually <ChartTooltipContent />. |

## More Chart examples

- [Bar chart](https://hextaui.com/docs/chart/examples/bar.md)
- [Line chart](https://hextaui.com/docs/chart/examples/line.md)
- [Stacked bars](https://hextaui.com/docs/chart/examples/stacked.md)
- [Horizontal bars](https://hextaui.com/docs/chart/examples/horizontal.md)
- [Donut](https://hextaui.com/docs/chart/examples/pie.md)
- [Radar](https://hextaui.com/docs/chart/examples/radar.md)
- [Tooltip](https://hextaui.com/docs/chart/examples/tooltip.md)
- [Icons](https://hextaui.com/docs/chart/examples/icons.md)
- [Light and dark colors](https://hextaui.com/docs/chart/examples/theme.md)
- [Negative values](https://hextaui.com/docs/chart/examples/negative.md)
- [Long labels](https://hextaui.com/docs/chart/examples/long-labels.md)
- [Right to left](https://hextaui.com/docs/chart/examples/rtl.md)