# Chart: Right to left

> Recharts does not mirror axes on its own. Set `reversed` on the x-axis and move the y-axis to the right. Pass `locale` to the tooltip to show the reader's digits.

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

## Add this example

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

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

## Source

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

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

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

const chartData = [
  { month: "يناير", desktop: 186, mobile: 80 },
  { month: "فبراير", desktop: 305, mobile: 200 },
  { month: "مارس", desktop: 237, mobile: 120 },
  { month: "أبريل", desktop: 73, mobile: 190 },
  { month: "مايو", desktop: 209, mobile: 130 },
  { month: "يونيو", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: {
    label: "سطح المكتب",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "الجوال",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

const numbers = new Intl.NumberFormat("ar-EG")

export function ChartRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md">
      <ChartContainer
        aria-label="مخطط أعمدة لزوار سطح المكتب والجوال"
        config={chartConfig}
        className="h-60 w-full"
      >
        <BarChart data={chartData}>
          <CartesianGrid vertical={false} />
          <XAxis
            dataKey="month"
            reversed
            tickLine={false}
            axisLine={false}
            tickMargin={10}
          />
          <YAxis
            orientation="right"
            tickLine={false}
            axisLine={false}
            tickMargin={8}
            width={36}
            tickFormatter={(value) => numbers.format(value)}
          />
          <ChartTooltip content={<ChartTooltipContent locale="ar-EG" />} />
          <ChartLegend content={<ChartLegendContent />} />
          <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
          <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
        </BarChart>
      </ChartContainer>
    </div>
  )
}
```

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

### ChartLegend

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

## 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)
- [Negative values](https://hextaui.com/docs/chart/examples/negative.md)
- [Long labels](https://hextaui.com/docs/chart/examples/long-labels.md)