---
title: "RTL Layout"
framework: react
version: "14.1.0"
---

# RTL Layout

AG Charts supports right-to-left (RTL) text direction for languages such as Arabic, Persian, and Hebrew.

> **Note**
>
> The RTL option handles text within the data elements and controls the visual direction of the chart.  
> To change the language of chart UI elements see [Localisation](https://www.ag-grid.com/charts/react/localisation/).

## Enabling RTL

Set `enableRtl: true` to enable right-to-left layout for the chart.

```js
{
    enableRtl: true,
}
```

AG Charts can also detect RTL automatically from the `dir="rtl"` attribute set on the chart container or any of its ancestor elements. When the `dir` attribute is present, `enableRtl` does not need to be set explicitly.

## Example: RTL and Localisation

Use the language dropdown to switch between English (LTR), Arabic, Persian, and Hebrew.

#### RTL Locale Switcher

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgCartesianChartOptions,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  LegendModule,
  LocaleModule,
  ModuleRegistry,
  NumberAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import {
  AG_CHARTS_LOCALE_AR_EG,
  AG_CHARTS_LOCALE_EN_US,
  AG_CHARTS_LOCALE_FA_IR,
  AG_CHARTS_LOCALE_HE_IL,
} from "ag-charts-locale";
import clone from "clone";

type Language = "en" | "ar" | "fa" | "he";

const LANGUAGES = {
  en: {
    localeText: AG_CHARTS_LOCALE_EN_US,
    enableRtl: false,
    title: "Quarterly Product Sales Performance Overview",
    subtitle:
      "Comparison of Sales and Revenue Across Categories for the Year 2024",
    footnote: "Source: Regional Sales Department — Internal Report",
    yAxisTitle: "Amount in US Dollars ($)",
    seriesNames: ["Total Sales Volume", "Gross Revenue"],
    zoomControls: "Zoom Controls",
    legendControls: "Legend Controls",
    data: [
      { month: "January", sales: 150, revenue: 200 },
      { month: "February", sales: 230, revenue: 310 },
      { month: "March", sales: 180, revenue: 250 },
      { month: "April", sales: 290, revenue: 380 },
      { month: "May", sales: 210, revenue: 290 },
      { month: "June", sales: 260, revenue: 350 },
    ],
  },
  ar: {
    localeText: AG_CHARTS_LOCALE_AR_EG,
    enableRtl: true,
    title: "نظرة عامة على أداء Sales مبيعات المنتجات الفصلية",
    subtitle: "مقارنة بيانات Revenue المبيعات والإيرادات عبر الفئات لعام 2024",
    footnote: "المصدر: قسم المبيعات الإقليمي — Sales Department تقرير داخلي",
    yAxisTitle: "المبلغ Amount بالدولار الأمريكي",
    seriesNames: ["مبيعات Sales", "إيرادات Revenue"],
    zoomControls: "عناصر التكبير",
    legendControls: "عناصر وسيلة الإيضاح",
    data: [
      { month: "يناير", sales: 150, revenue: 200 },
      { month: "فبراير", sales: 230, revenue: 310 },
      { month: "مارس", sales: 180, revenue: 250 },
      { month: "أبريل", sales: 290, revenue: 380 },
      { month: "مايو", sales: 210, revenue: 290 },
      { month: "يونيو", sales: 260, revenue: 350 },
    ],
  },
  fa: {
    localeText: AG_CHARTS_LOCALE_FA_IR,
    enableRtl: true,
    title: "نمای کلی عملکرد Sales فروش محصولات فصلی",
    subtitle:
      "مقایسه داده‌های Revenue فروش و درآمد در دسته‌بندی‌ها برای سال 2024",
    footnote: "منبع: بخش فروش منطقه‌ای — Sales Department گزارش داخلی",
    yAxisTitle: "مبلغ Amount به دلار آمریکا",
    seriesNames: ["فروش Sales", "درآمد Revenue"],
    zoomControls: "کنترل‌های بزرگ‌نمایی",
    legendControls: "کنترل‌های راهنما",
    data: [
      { month: "ژانوِیه", sales: 150, revenue: 200 },
      { month: "فوریه", sales: 230, revenue: 310 },
      { month: "مارس", sales: 180, revenue: 250 },
      { month: "آوریل", sales: 290, revenue: 380 },
      { month: "مه", sales: 210, revenue: 290 },
      { month: "ژوئن", sales: 260, revenue: 350 },
    ],
  },
  he: {
    localeText: AG_CHARTS_LOCALE_HE_IL,
    enableRtl: true,
    title: "סקירת ביצועי Sales מכירות מוצרים רבעונית",
    subtitle: "השוואת נתוני Revenue מכירות והכנסות בין קטגוריות לשנת 2024",
    footnote: "מקור: מחלקת מכירות אזורית — Sales Department דוח פנימי",
    yAxisTitle: "הסכום Amount בשקלים חדשים",
    seriesNames: ["מכירות Sales", "הכנסות Revenue"],
    zoomControls: "פקדי זום",
    legendControls: "פקדי מקרא",
    data: [
      { month: "ינואר", sales: 150, revenue: 200 },
      { month: "פברואר", sales: 230, revenue: 310 },
      { month: "מרץ", sales: 180, revenue: 250 },
      { month: "אפריל", sales: 290, revenue: 380 },
      { month: "מאי", sales: 210, revenue: 290 },
      { month: "יוני", sales: 260, revenue: 350 },
    ],
  },
};
ModuleRegistry.registerModules([
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  LegendModule,
  LocaleModule,
  NumberAxisModule,
  ZoomModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgCartesianChartOptions>({
    enableRtl: false,
    locale: {
      localeText: AG_CHARTS_LOCALE_EN_US,
    },
    title: { text: LANGUAGES.en.title, wrapping: "never", maxWidth: 300 },
    subtitle: {
      text: LANGUAGES.en.subtitle,
      wrapping: "always",
      maxWidth: 300,
    },
    footnote: { text: LANGUAGES.en.footnote },
    data: LANGUAGES.en.data,
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "sales",
        yName: LANGUAGES.en.seriesNames[0],
      },
      {
        type: "bar",
        xKey: "month",
        yKey: "revenue",
        yName: LANGUAGES.en.seriesNames[1],
      },
    ],
    axes: {
      x: { type: "category" },
      y: {
        type: "number",
        title: { text: LANGUAGES.en.yAxisTitle },
      },
    },
    zoom: { enabled: true },
    contextMenu: {
      items: [
        "download",
        "separator",
        {
          showOn: "series-area",
          label: LANGUAGES.en.zoomControls,
          items: ["zoom-to-cursor", "pan-to-cursor", "reset-zoom"],
        },
        {
          showOn: "legend-item",
          label: LANGUAGES.en.legendControls,
          items: ["toggle-series-visibility", "toggle-other-series"],
        },
      ],
    },
  });

  const updateLanguage = (lang: string) => {
    const nextOptions = clone(options);

    const config = LANGUAGES[lang as Language];
    nextOptions.enableRtl = config.enableRtl;
    nextOptions.locale = { localeText: config.localeText };
    nextOptions.title = {
      text: config.title,
      wrapping: "never",
      maxWidth: 300,
    };
    nextOptions.subtitle = {
      text: config.subtitle,
      wrapping: "always",
      maxWidth: 300,
    };
    nextOptions.footnote = { text: config.footnote };
    nextOptions.data = config.data;
    nextOptions.series = [
      {
        type: "bar",
        xKey: "month",
        yKey: "sales",
        yName: config.seriesNames[0],
      },
      {
        type: "bar",
        xKey: "month",
        yKey: "revenue",
        yName: config.seriesNames[1],
      },
    ];
    nextOptions.axes = {
      x: { type: "category" },
      y: {
        type: "number",
        title: { text: config.yAxisTitle },
      },
    };
    nextOptions.contextMenu = {
      items: [
        "download",
        "separator",
        {
          showOn: "series-area",
          label: config.zoomControls,
          items: ["zoom-to-cursor", "pan-to-cursor", "reset-zoom"],
        },
        {
          showOn: "legend-item",
          label: config.legendControls,
          items: ["toggle-series-visibility", "toggle-other-series"],
        },
      ],
    };

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <label htmlFor="locale">Language</label>
          <select
            id="locale"
            onChange={(event) => updateLanguage(event.target.value)}
          >
            <option value="en">English</option>
            <option value="ar">العربية (Arabic)</option>
            <option value="fa">فارسی (Persian)</option>
            <option value="he">עברית (Hebrew)</option>
          </select>
        </div>
      </div>
      <AgCharts options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: RTL Locale Switcher](https://www.ag-grid.com/charts/reactFunctionalTs/rtl/examples/rtl-locale-switcher)

In this example:

- The `enableRtl` option is used to enable right-to-left layout.
- The `localeText` option is used for localisation.
- All bidirectional text is rendered correctly.
- The RTL text in the title and subtitle wrap and truncate on the left.
- The legend layout is mirrored as is the series order in the chart.
- The tooltip and context menu layout are mirrored.

## Axis Layout

The axis positions and directions are not changed in RTL mode. If required, users should manually set [Axis Placement](https://www.ag-grid.com/charts/react/axes-position/) and `reverse` options explicitly.

## API Reference

#### Chart

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| enableRtl | boolean |  | Set to `true` to render the chart in right-to-left mode. If not specified, the chart will detect the `dir` attribute on the container or its ancestors. |