1

I have using the jalali-moment library in my project to deal with Persian dates. currently, I'm stuck with how to use the library with highcharts to convert all dates to Jalali dates. I found a "time.Date" option that takes a custom Date Object for doing all date related operations like zoom buttons in highstock chart and xAxis labels in highstock and line charts. But really I don't understand how to create and pass the custom object to it? I see all related Q&A in StackOverflow, but none of them used the option to change the date object, also anyone doesn't mention how to do that with the jalali-moment library. Even no official example exists in the highcharts documentation. please note that I have to use the jalali-moment library and I can not use any other one.

Can you please explain exactly how to achieve this? (It's better to mention that I am using the highcharts library in the reactjs framework.)

Saeed Zhiany
  • 2,051
  • 9
  • 30
  • 41

1 Answers1

4

You can overwrite all of the Highcharts.dateFormats methods and use in them the jalali-moment plugin:

moment.locale('fa');

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

Live demo: http://jsfiddle.net/BlackLabel/cbqh3d0m/

API Reference: https://api.highcharts.com/class-reference/Highcharts#.dateFormats

Also, you can check Highcharts Localization plugin as an alternative solution: https://www.highcharts.com/products/plugin-registry/single/21/Highcharts%20Localization

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Overwriting `Highchart.DateFormat` causes highstock zoom buttons to operate in jalali date automatically? – Saeed Zhiany May 20 '19 at 14:33
  • And So what the use case of `time:Date` option? it seems it is not used anywhere. – Saeed Zhiany May 20 '19 at 14:36
  • Also using `Highcharts.dateFormats` gives me a typescript error. it says that dateFormat is a read-only member of Highchart. however, the live demo is working but I still can not use it – Saeed Zhiany May 20 '19 at 14:55
  • Hi @Saeed Zhiany, I am not an expert in this matter, but Highcharts is based on timestamps and use `dateFormats` only to display dates in a specific format. You can check if the zoom buttons work in the way you need: http://jsfiddle.net/BlackLabel/2cm5prxz/ – ppotaczek May 20 '19 at 14:59
  • I updated my question to make it more clear from my requirement (I don't want only present dates in Jalali dates, I want to chart operate with jalali dates like in highstock zoom buttons). sorry for previous ambiguity. – Saeed Zhiany May 20 '19 at 15:00
  • The `time` option must be compatible with original javascript Date class. `jdate` - https://github.com/tahajahangir/jdate works fine: http://jsfiddle.net/BlackLabel/qygrkxv2/ – ppotaczek May 20 '19 at 15:01
  • As I mentioned before I used your official react wrapper of highcharts. but when I import highcharts (`import * as highcharts from 'highcharts'`) and try to initiate `dateFormats` in the constructor of component, it gives me an error that the property is read-only and I can't initiate it. – Saeed Zhiany May 20 '19 at 15:06
  • your second live demo is working too. but I couldn't use it in my codes. unfortunately, all good examples are in pure javascript and there is no example source code in reactJs+typescript. I'm really confused about how to make it works. – Saeed Zhiany May 20 '19 at 15:11
  • Hi @Saeed Zhiany, As you can see it is very hard to use your library in this case. You can try to rely on time in milliseconds and convert all of the chart text elements (labels, tooltip, range selector) to jalali date, for example: http://jsfiddle.net/BlackLabel/derbuav6/. You can also try to wrap all of the `dateFormats` methods instead of overwritting them: http://jsfiddle.net/BlackLabel/ts5hcdvu/ – ppotaczek May 21 '19 at 16:37