# Chart: Negative values

> Color each bar with `<Cell />` and mark zero with `<ReferenceLine />`.

Example: https://hextaui.com/docs/chart/examples/negative
Component docs: https://hextaui.com/docs/chart.md

## Add this example

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

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

## Source

```tsx title="components/examples/chart/negative.tsx"
"use client"

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ReferenceLine,
  XAxis,
} from "recharts"

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

const chartData = [
  { month: "Jan", change: 12.4 },
  { month: "Feb", change: -4.1 },
  { month: "Mar", change: 8.7 },
  { month: "Apr", change: -9.3 },
  { month: "May", change: 3.2 },
  { month: "Jun", change: 15.8 },
]

const chartConfig = {
  change: {
    label: "Change",
  },
  gain: {
    label: "Gain",
    color: "var(--chart-1)",
  },
  loss: {
    label: "Loss",
    color: "var(--chart-5)",
  },
} satisfies ChartConfig

export function ChartNegative() {
  return (
    <ChartContainer
      aria-label="Bar chart of gains and losses"
      config={chartConfig}
      className="h-56 w-full max-w-md"
    >
      <BarChart data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          axisLine={false}
          tickMargin={10}
        />
        <ReferenceLine y={0} />
        <ChartTooltip
          cursor={false}
          content={
            <ChartTooltipContent
              hideIndicator
              valueFormatter={(value) =>
                `${Number(value) > 0 ? "+" : ""}${value}%`
              }
            />
          }
        />
        <Bar dataKey="change" radius={4}>
          {chartData.map((item) => (
            <Cell
              key={item.month}
              fill={item.change < 0 ? "var(--color-loss)" : "var(--color-gain)"}
            />
          ))}
        </Bar>
      </BarChart>
    </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)
- [Formatting values](https://hextaui.com/docs/chart/examples/value-format.md)
- [Icons](https://hextaui.com/docs/chart/examples/icons.md)
- [Light and dark colors](https://hextaui.com/docs/chart/examples/theme.md)
- [Long labels](https://hextaui.com/docs/chart/examples/long-labels.md)
- [Right to left](https://hextaui.com/docs/chart/examples/rtl.md)