Vertical Marker Crosshair using Striplines

Vertical Marker Crosshair using Striplines

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 220px;"></div>

CSS

td {
   padding:0; margin:0;
}

.canvasjs-chart-tooltip {
  box-shadow: none !important;
}

.canvasjs-chart-credit {
   display: none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
    	zoomEnabled: true,
      title:{
        text: "CPU usage",
				verticalAlign: "top",
				horizontalAlign: "left",
        fontFamily: "Arial",
        fontSize: 16,
        fontWeight: "Normal",
        margin: 10,
      },
      legend: {
        cursor: "pointer",
        fontFamily: "Arial",
        fontSize: 12,
        horizontalAlign: "right",
        verticalAlign: "top",
        itemclick: function (e) {
          if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
            e.dataSeries.visible = false;
          } else {
            e.dataSeries.visible = true;
          }

          chart.render();
        }
      },
      axisY :{
        gridThickness : 1,
        tickThickness: 0,
        lineColor: "#ddd",
        gridColor: "#ddd",
        lineThickness: 1,
				includeZero: true,
				suffix: " %",
        labelFontFamily: "Arial",
        labelFontSize: 10,
        minimum: 0,
        maximum: 400,
      },
      axisX :{
				lineThickness : 1,
        gridThickness : 1,
        tickThickness: 0,
        lineColor: "#ddd",
        gridColor: "#ddd",
        labelFontFamily: "Arial",
        labelFontSize: 10,
        valueFormatString: "YYYY-MM-DD HH:mm",
        labelAutoFit:false,
        interval: 5,
        intervalType: "minute",
        labelMaxWidth: 85,
        labelWrap: true,
        labelAngle: 0,

      },
	  	toolTip:{
        shared: "true",
        labelFontFamily: "Arial",
        fontStyle: "normal",
        labelFontSize: 10,
        borderThickness: 1,
        cornerRadius: 2,
        borderColor: "#666",
        contentFormatter: function ( e ) {
			var content = "<div style=\"width: 100%; font-weight: bold; text-align: right;\">" + CanvasJS.formatDate(e.entries[0].dataPoint.x, "YYYY-MM-DD HH:mm:ss") + "</div><table>";
			for (var i = 0; i < e.entries.length; i++) {
				content += "<tr><td>";
				content += "<span style=\"color: " +...