CODEWITHSUNDEEP
angulardatechartsfarsi
Mahdi
Mahdi

Reputation: 416

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

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
      ]
    ]
  }]
});

Upvotes: 0

Views: 540

Answers (1)

Mahdi
Mahdi

Reputation: 416

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

Upvotes: 1

Related Questions