JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="dateFormate">Change Date Format</button>
on Click the button date format chang to %m-%d-%y

JavaScript

$(function() {

	var myPositioner = Highcharts.Tooltip.prototype.getPosition;

  $('#container').highcharts({

    xAxis: {
      type: 'datetime'
    },

    tooltip: {
      xDateFormat: '%Y-%m-%d',
      shared: true,
      positioner: function (labelWidth, labelHeight, point) {
      	return myPositioner.call(this, labelWidth, labelHeight, point);
      }
    },

    plotOptions: {
      series: {
        pointStart: Date.UTC(2012, 0, 1),
        pointInterval: 24 * 3600 * 1000
      }
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse()
    }]

  }, function(chart) {
    $('#dateFormate').click(function() {
      chart.series[0].update({
        tooltip: {
          xDateFormat: '%Y/%m/%d'
        }
      });

      myPositioner = function(labelWidth, labelHeight, point) {
        console.log('1a');
        return {
          x: 80,
          y: 50
        };
      };

    });
  });
});