Chartjs-Text Direction for axis labels in Chart.js

by

0👍

I’ve encountered the same problem: the date’s dd and MMM were messed up regardless of the display formatting order. Unfortunately, ChartJS doesn’t support RTL text direction officially.

One possible simple solution is directly setting the canvas element’s dir attribute using a custom plugin.

import { Chart } from 'chart.js'

const RtlChartPlugin = {
  id: 'rtl-chart-plugin',
  beforeDraw: (chart: Chart) => {
    chart.canvas.setAttribute('dir', 'rtl')
  }
}

Chart.register(
  // ...
  RtlChartPlugin
)

As a timeline axis user, it was also nessecsry for me to add a displayFormat.

time: {
  displayFormats: {
    day: 'dd MMM'
  }
}

I’m not sure it’s still relevant but I hope others will find it helpful.

Leave a comment