image/svg+xml

#TIL How to synchronize the time axis of Highcharts with the client’s timezone

In the context of front-end development, you’ve probably dealt with Highcharts. This tool is very powerful, but sometimes you have to read the long pages of detailed documentation to get the result you want. That’s if you know what you’re looking for in the first place.

That was my case few days ago. My problem even though Highcharts was plotting my data correctly, the tooltip above the data points reflected the time in the client’s time zone while the time axis was in UTC.

After some research, it turns out that Highcharts can be configured to be in UTC mode or local mode as documented here.

To put it simply, you need to do the following:

Highcharts.setOptions
  time:
    utUTC: false
  }
});

Another important point, your points in the time axis must be in ISO format or as a Momentjs or Date object. If the format of your dates is a bit special, you can define the parseDate method shown in this example.

Be sure to let me know if I made a mistake in the article or if you have any suggestion, correction or question!

#TIL How to correct sorting on ngx-datatable

If you’re currently working with Angular 4, chances are you’re using ngx-datatable somewhere in your app.

It is also very likely that automatic sorting will not work. To remedy it I looked a little on my side and I came across these two resources:

Basically, you’ll need to add the following two attributes to your code:

<ngx-datatable-column [sortable]="true" [prop]="yourColumnName"></ngx-datatable-column>

Note that prop represents the prop attribute in your model object that you assign to the data table. If you haven’t defined it, ngx-datatable adapts it to the camelCase format as documented here.

Be sure to let me know if I made a mistake in the article or if you have any suggestion, correction or question!

By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this site are set to "accept cookies" to provide you with the best browsing experience possible. If you continue to use this site without changing your cookie settings or if you click "accept" below, you consent to this.

Close