Charts - RTL

#Usage

import { ChartCanvas, ChartSvg } from '@primeui/vue-chart';

<ChartSvg dir="rtl">
    <!-- series and axes -->
</ChartSvg>

dir is set on the chart root. RTL applies across axes, legend, tooltip placement, data labels, and overlay positioning without needing view-specific configuration.

#Cartesian Charts

Set dir="rtl" on ChartSvg or ChartCanvas to switch to a right-to-left layout. The X axis is mirrored so the first category appears on the right, the Y axis moves to the right side by default, and all overlay positioning (tooltip, data labels) follows the RTL direction.

#Radial Charts

RTL also applies to pie and donut charts. Legend items are right-aligned, text direction is reversed, and tooltip positioning follows the RTL flow.

#Localized Time Series

RTL layout can be combined with locale on the same chart root. This is useful for financial and operations dashboards where the axis dates, numeric values, tooltip content, legend, and overlay placement should all follow the same locale and reading direction.

<ChartCanvas locale="ar-SA" dir="rtl">
    <!-- financial time-series chart -->
</ChartCanvas>

#Auto Direction

dir defaults to 'auto', which inherits the text direction from the nearest ancestor element with a dir attribute. Charts inside an RTL page therefore mirror automatically with no dir set on each chart. Set dir explicitly to 'ltr' or 'rtl' to override the inherited direction.

<ChartSvg dir="auto">
    ...
</ChartSvg>

#API

#ChartSvg / ChartCanvas

#Related Docs

• Locale
• Time Series Line Examples
• Axes
• Legend
• Tooltip