Dynamically changing dateTime axis labels on zoom - CanvasJS JavaScript Charts

Dynamically changing dateTime axis labels on zoom - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="copperChartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

if (jQuery('#copperChartContainer').length) { 
  var axisXOption = {      
    valueFormatString: "MMM YYYY" ,
    labelAngle: -50,
    gridColor: "Silver",
    tickColor: "silver",
    labelFontColor: '#000',
    titleFontColor: '#000',
    interval: 1,
    intervalType: "month"
  };
  drawchart(1.9,1);

  function drawchart(minimum, years) {
    var chart = new CanvasJS.Chart("copperChartContainer", {
      zoomEnabled: true,
      animationEnabled: true, 
      rangeChanging: dateTimeFormatter,
      axisX: axisXOption,
      axisY:{
        valueFormatString:"0.00",
        prefix: "$",
        minimum: minimum,
        title: 'Copper COMEX Price ($/lb)',
        titleFontSize: 18,
        titleFontFamily: 'acumin-pro-condensed, arial, sans-serif',
        titleMargin: 30,
      },
      axisY2:{
        valueFormatString:"0.00",
        prefix: "$",
        minimum: minimum,
        title: 'Copper COMEX Price ($/lb)',
        titleFontSize: 18,
        titleFontFamily: 'acumin-pro-condensed, arial, sans-serif',
        titleMargin: 30,
      },

      data: [{ 
        type: "line",
        yValueFormatString: "$#.000",
        axisYType: "secondary",
        color:"#B5682A",
        dataPoints : getdata(years)
      }]
    });
    chart.render();
  } //drawchart()

  function dateTimeFormatter(e) {
    var hours=1000*60*60;
    if(e.trigger === "reset") {
      axisXOption.valueFormatString= null;
      axisXOption.interval = 1;
      axisXOption.intervalType = "month";
    }
    else if(e.trigger === "zoom") {
      axisXOption.interval = null;
      axisXOption.intervalType = null;
      var intervalDifference = e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum;
      
      if((intervalDifference / hours) < 24) {
        axisXOption.valueFormatString= "D - HH:mm";
      }
      else if((intervalDifference / (hours*24) ) < 4) {
        axisXOption.valueFormatString= "DD - HH:mm";
      }
      //Week (Comparing Days)
      else...