[Chartjs]-Chart.js – display control timescale time zone

by

7👍

✅

In the time configuration options specify parser as a function:

                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'hour',
                            min: minDate,
                            max: maxDate,
                            displayFormats: {
                                hour: 'HH'
                            },
                            parser: function (utcMoment) {
                                return utcMoment.utcOffset('+0100');
                            }                
                        }
                    }]

As well as converting the chart values this will also apply to the min/max values of the x axis.

This assumes your min/max values and label array is populated with moment objects. If dealing with date objects then the function needs to convert the date to a moment first.

parser: function(date) {
    return moment(date).utcOffset('+0100');
}

2👍

I use a callback on the ticks function. That way you only change the label.

import Moment from 'moment';

//...

const options = {
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          callback: (label, index, ticks) => {
            const format = 'DD HH'; // Change how you please
            return new Moment(ticks[index].value)
              .utcOffset(this.timeZoneOffsetSeconds / 60)
              .format(format);
          }
        }
      }]
    },
    // other options removed for clarity
  };
  
this.chart = new Chart(chartElem, {
  options: options,
  // other parameters removed for clarity
});

Note on the example: Moment is deprecated, apparently there are better libraries out there but that’s what I have in my codebase so…

Leave a comment