Home > Mobile >  How to convert Gregorian or Timestamp date to persian date in the Higcharts in angular
How to convert Gregorian or Timestamp date to persian date in the Higcharts in angular

Time:12-06

I want the dates to be displayed in Persian on the Highcharts chart. I know you can use jalali-moment to convert the date to normal. Is there a way to do this in the Highcharts? I use Angular 12 and Highcharts 9.

 Highcharts.chart('lineChart', {

  chart: {
    scrollablePlotArea: {}
  },

  xAxis: {
    type: 'datetime',
    gridLineWidth: 1,
    labels: {
      align: 'left',
      x: 3,
      y: -3
    }
  },

  yAxis: [{
    title: {
      text: null
    },
    showFirstLabel: false
  }],
  series: [{
    type: 'line',
    data: [
      [
        1633209533000,
        3
      ],
      [
        1635796087000,
        3
      ],
      [
        1635882487000,
        6
      ],
      [
        1636055287000,
        4
      ],
      [
        1638466033000,
        8
      ],
      [
        1638479933000,
        6
      ]
    ]
  }]
});

CodePudding user response:

You can use Highcharts dateFormats and jalali-moment.

Use this link to install jalali-moment

in Highcharts options use Highcharts.dateFormats

>   chartDateFormat() {
    Highcharts.dateFormats.a = (ts) => {
      return moment(ts).locale('fa').format('dddd');
    };
    Highcharts.dateFormats.A = (ts) => {
      return moment(ts).locale('fa').format('dddd');
    };
    Highcharts.dateFormats.d = (ts) => {
      return moment(ts).locale('fa').format('DD');
    };
    Highcharts.dateFormats.e = (ts) => {
      return moment(ts).locale('fa').format('D');
    };
    Highcharts.dateFormats.b = (ts) => {
      return moment(ts).locale('fa').format('MMMM');
    };
    Highcharts.dateFormats.B = (ts) => {
      return moment(ts).locale('fa').format('MMMM');
    };
    Highcharts.dateFormats.m = (ts) => {
      return moment(ts).locale('fa').format('MM');
    };
    Highcharts.dateFormats.y = (ts) => {
      return moment(ts).locale('fa').format('YY');
    };
    Highcharts.dateFormats.Y = (ts) => {
      return moment(ts).locale('fa').format('YYYY');
    };
    Highcharts.dateFormats.W = (ts) => {
      return moment(ts).locale('fa').format('ww');
    };
  }

From this link, you can view the codes online

  • Related