1

I'm using chart.js in angular8 (in Primeng). I need to set these options in my chart:

  • for y-axis ticks => textDirection: 'ltr'
  • for x-axis ticks => textDirection: 'rtl'

for example, I have done this for tooltip by textDirection:

 options = {
   tooltips: {
    textDirection: 'rtl', //make tooltip text rtl
  }
}

Is there any way do something like that to my axes?

Nazanin KarimiMoghaddam
  • 23
  • 3

1 Answers1

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.

Aviv Dolev
  • 140
  • 3
  • 14
  • Unfortunately it messes up with [chartjs-plugin-datalabels](https://chartjs-plugin-datalabels.netlify.app/) but in some cases its actually a nice solution :) – Ilan Yashuk Apr 07 '23 at 11:29
  • @IlanYashuk It is very unfortunate, as my solution wraps all the canvas it's very likely to interfere with other plugins. With the core ChartJS library, it seems to work fine. I'm sorry I couldn't assist with your case. – Aviv Dolev Apr 08 '23 at 12:52