Search code examples
javascripthighchartsfarsi

Highcharts axis labels cluttered but after a refresh, it'll be OK

I'm using Highcharts to create a negative-stack according to its document. My language is Persian (Farsi) so I'm using RTL direction overall the project. My problem doesn't limit to negative-stack type, but all charts with xAxis & yAxis.When I open the index.html file at first I'll face with axis labels overlap the chart as you see in the attached image-1, but after a refresh, it will be aligned properly according to the attached image-2.

Attachments:

👉 Sample CodeSandBox Link 👈

Solution

  • Looks like it's caused by the fontFamily.
    After changing that property, everything works as expected.

    chart: {
    style: {
      fontFamily: "iranyekan"
    }
  },

    Live demo: https://codesandbox.io/s/upbeat-sun-me5m8