---
product: "AG Charts"
title: "RTL Layout"
description: "Angular Charts supports right-to-left (RTL) layouts for languages such as Arabic, Persian, and Hebrew."
framework: angular
version: "14.2.0"
related:
    - title: "Background"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/background/"
    - title: "Colours"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/colours/"
    - title: "Fills & Borders"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/fills-borders/"
    - title: "Layout"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/layout/"
    - title: "Overlays"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/overlays/"
    - title: "Text"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/text/"
    - title: "Themes"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/themes/"
    - title: "Background Image"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/background-image/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# 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/archive/14.2.0/angular/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

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: RTL Locale Switcher](https://www.ag-grid.com/charts/archive/14.2.0/angular/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.
- Both series have negative values in some months, and those values keep their sign on the left, rendering as `-30` rather than `30-`. This applies to the sign, the decimal and group separators, and any unit attached to the value, such as `-12.5kg`.
- The "Sales Growth" series uses the default tooltip which correctly displays the negative values.
- The "Net Profit" series uses a custom `renderer`. As the returned HTML is inserted exactly as supplied, the numbers are wrapped with `U+202A` and `U+202C` to ensure the negative sign renders in the correct position.

## 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/archive/14.2.0/angular/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. |