title: How to change UTC timestamp on the Highstock charts?
body: <p>I have an API at <a href="https://gmlews.com/api/data" rel="nofollow noreferrer">https://gmlews.com/api/data</a>. And my code for highstock charts in <a href="http://jsfiddle.net/estri012/b5nhezLs/8/" rel="nofollow noreferrer">http://jsfiddle.net/estri012/b5nhezLs/8/</a> .</p>
  
  <p>My problem is my timestamp look like this "2020-03-15T11:46:10+07:00". So on the chart it should shows 15 March 11:46 instead of 15 March 04:46. But the chart show UTC time. How to fix it, so the chart show the local same time with mine? And the last three data on the chart show 18 March instead of 19 March. In my API, the last three data must be 19 March not 18 March.</p>
  
  <pre><code>$(function () {
  
  $.getJSON('https://gmlews.com/api/data', function (data) {
  console.log(data);
  function format_two_digits(n) {
    return n &lt; 10 ? '0' + n : n;
  }
  var accelero_x = [], timestamp = [];
    for (var i=0; i&lt;data.length; i++){
    let inArr = [];
    inArr.push(Date.parse(data[i].timestamp));
    inArr.push(data[i].accelero_x);
      accelero_x.push(inArr);
      timestamp.push(data[i].timestamp);
   }
    console.log(accelero_x);
    console.log(timestamp);
  
      // Create the chart
      window.chart = new Highcharts.StockChart({
          chart: {
              renderTo: 'container'
          },
  
          rangeSelector: {
              inputEnabled: true,
                      buttons: [{
                          type: 'day',
                          count: 1,
                          text: '1D',
                      },
                      {
                          type: 'week',
                          count: 1,
                          text: '1W',
                      },
                      {
                          type: 'month',
                          count: 1,
                          text: '1M',
                      },
                      {
                          type: 'year',
                          count: 1,
                          text: '1Y',
                      }, {
                          type: 'all',
                          count: 1,
                          text: 'All',
                      }],
              inputDateFormat: '%d-%m-%Y',
              inputDateParser: function (value) {
                  value = value.split('-');
                  return Date.UTC(
                      parseInt(value[2]),
                      parseInt(value[1]) - 1,
                      parseInt(value[0])
                  );
              },
          },
  
      title: {
      text: 'Accelero X'
  },
  
  xAxis: {
      type: "datetime",
    labels: {
          /* format: '{value:%Y-%m-%d}', */
          formatter: (currData) =&gt; {
            const currDate = new Date(currData.value);
            return format_two_digits(currDate.getHours()) + ':' + format_two_digits(currDate.getMinutes());
          },
          rotation: 45,
          align: 'left'
      }
  },
  series: [{
      name: 'Accelero X',
      data: accelero_x,
      type: 'spline',
      tooltip: {
          valueDecimals: 2
      }
  }]
  }, function (chart) {
  
          // apply the date pickers
          setTimeout(function () {
              $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker();
          }, 0)
      });
  });
  
  
  // Set the datepicker's date format
  $.datepicker.setDefaults({
      dateFormat: 'dd-mm-yy',
      beforeShow: function() {
        var date = $(this).val().split('-');
          $('input.highcharts-range-selector').datepicker("setDate", new Date(parseFloat(date[0]), parseFloat(date[1]) - 1, parseFloat(date[2])));
      },
      onSelect: function (dateText) {
          this.onchange();
          this.onblur();
      }
  });
  
  });
  </code></pre>