CODEWITHSUNDEEP
javascripthtmljqueryapexcharts
Sam
Sam

Reputation: 361

ApexCharts.js RTL Support

I am using the apexcharts.js library and my app supports Arabic language, when the RTL mode is activated the tooltip appears as follow. Notice how the tooltip takes full width. enter image description here

Upvotes: 1

Views: 3342

Answers (2)

Brahim Oulhaj
Brahim Oulhaj

Reputation: 226

I know this is too late 😁. Please try to set a boolean variable that takes if isRTL or not, then set opposite attribute, in chartOptions>yaxix, to isRTL value and reverse series data like the code below.

let isRTL = true

let chartOptions: {
  //... your options
  yaxix:{
    //... your yaxix options
    opposite: this.isRTL
  }
}

let series = [...]
if(this.isRTL){
  series.map(s => s['data'].reverese())
}

I hope this solution will work for you. Good luck 😁.

Upvotes: 3

ABsazer Ner
ABsazer Ner

Reputation: 21

you can add style to it like this:

    type: 'area',
    height: 100,
    style:{
        direction: 'rtl'
    },
    ......

Upvotes: 2

Related Questions