JavaScript Line Charts with Zoom and Pan - 0 | JSFiddle Sample Code

JavaScript Line Charts with Zoom and Pan - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;">
</div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-charts/line-chart-zoom-pan/" target="_blank" title="JavaScript Line Charts with Zoom and Pan ">https://canvasjs.com/javascript-charts/line-chart-zoom-pan/</a></div>

JavaScript

window.onload = function () {

  let chart = new CanvasJS.Chart("chartContainer", {	
    zoomEnabled: true,  
    title:{
      text: "Crosshair Label is Not Shown for Last Datapoint with Logarithmic X-Axis",
      fontSize: 25
    },
    axisX: {
      logarithmic: true,
      logarithmBase: 10,
      gridThickness: 1,
      crosshair: {
        enabled: true,
      snapToDataPoint: true
      }
    },
    axisY: {    
      crosshair: {
        enabled: true
      }
    },
    toolTip: {
      enabled: false                                
    },
    data: [{
      type: 'line',
      markerType: 'none',
      lineThickness: 1,
      highlightEnabled: false,
      dataPoints: []
    }]
  });


  let limit = 100000;
  let increment_value = 500;

  let y = 0;
  let dataPoints = [];

  for (let i = 1; i < limit; i += increment_value) {
    y += (Math.random() * 10 - 5);
    
    i = limit - i < increment_value ? limit : i;
    
    dataPoints.push({
      x: i,
      y: y                
    });  
  }     

  chart.options.data[0].dataPoints = dataPoints;

  chart.render();

}