Localization and RTL

ApexSankey's localization covers two things: the layout direction (for right-to-left languages) and the screen-reader strings the diagram generates. Visible tooltips are localized separately through tooltipTemplate and nodeTooltipTemplate.

RTL layout

Set locale.direction to 'rtl' to mirror the diagram horizontally so flows read right-to-left. This also sets dir="rtl" on the container element.

const sankey = new ApexSankey(document.getElementById('chart'), {
  locale: {
    direction: 'rtl',
  },
})
sankey.render(data)

direction	Effect
'ltr' (default)	Flows read left-to-right
'rtl'	Diagram mirrored; flows read right-to-left; dir="rtl" set on container
'auto'	Defers to the document or element's inherited dir

The mirroring reflects node centers and edge endpoints around a common axis, so every edge stays attached to the correct node face. Node labels and flows all move together.

Localizing screen-reader strings

locale.messages overrides the strings ApexSankey generates for assistive technology. Supply any subset; unset keys keep their English defaults.

const sankey = new ApexSankey(el, {
  locale: {
    messages: {
      nodesGroupLabel: 'Diagramme de flux — nœuds',
      diagramLabel: ({ nodeCount, flowCount }) =>
        `Diagramme Sankey avec ${nodeCount} nœuds et ${flowCount} flux`,
      nodeAriaLabel: ({ name, incoming, outgoing }) => {
        const parts = [name]
        if (incoming) parts.push(`entrée ${incoming.total}`)
        if (outgoing) parts.push(`sortie ${outgoing.total}`)
        return parts.join(', ')
      },
      edgeAriaLabel: ({ source, target, value }) =>
        `Flux de ${source} vers ${target} : ${value}`,
    },
  },
})
sankey.render(data)

SankeyMessages reference

Key	Type	Description
diagramLabel	(ctx) => string	Builds the SVG root aria-label. Receives { nodeCount, flowCount, largestFlow? }
edgeAriaLabel	(ctx) => string	Builds an edge's aria-label. Receives { source, target, value }
nodeAriaLabel	(ctx) => string	Builds a node's aria-label. Receives { name, incoming?, outgoing? }
nodesGroupLabel	string	aria-label for the group wrapping all nodes. Default: 'Sankey nodes'

The diagramLabel context includes an optional largestFlow of { source, target, value }. The nodeAriaLabel context includes optional incoming and outgoing summaries, each { total, sources } / { total, targets }.

Localizing visible tooltips

The messages object only affects assistive-technology strings. To localize the visible hover tooltips, supply tooltipTemplate and nodeTooltipTemplate with translated text:

const sankey = new ApexSankey(el, {
  locale: { direction: 'rtl' },
  tooltipTemplate: ({ source, target, value }) =>
    `<div style="padding:6px 10px">${source.title} ← ${target.title}: ${value}</div>`,
  nodeTooltipTemplate: ({ node, value }) =>
    `<div style="padding:6px 10px">${node.title}: ${value}</div>`,
})

See Custom Tooltips for the full tooltip API.

Complete RTL + localized example

const sankey = new ApexSankey(document.getElementById('chart'), {
  locale: {
    direction: 'rtl',
    messages: {
      nodesGroupLabel: 'عُقد',
      diagramLabel: ({ nodeCount, flowCount }) =>
        `مخطط سانكي يحتوي على ${nodeCount} عقدة و ${flowCount} تدفق`,
    },
  },
  tooltipTemplate: ({ source, target, value }) =>
    `<div style="padding:6px 10px">${source.title} ← ${target.title}: ${value}</div>`,
})
sankey.render(data)

React example

import { ApexSankey } from 'react-apexsankey'

const options = {
  locale: {
    direction: 'rtl' as const,
    messages: {
      nodesGroupLabel: 'Nœuds',
    },
  },
}

export default function LocalizedSankey() {
  return <ApexSankey data={data} options={options} />
}