Methods & Properties of StripLine - 0 | JSFiddle Sample Code

Methods & Properties of StripLine - 0 | JSFiddle Sample Code

by jv morin

HTML

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

  	<div id="chartContainer" style="height: 275px; width: 100%;"></div>
	<button id="button">Modify stripLine</button>
  	  	<span id="display"></span>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
		axisX:{
          	valueFormatString: "DD,MMM HH:mm 'hr'",
	   stripLines:[
              {                
                  	startValue: 2019-08-13,// 2019-08-13 at 12:00 h
                    endValue: 2019-08-18, // 2019-08-18 at 23:00 hr
                	label: "In the 40s"
              }
            ]                    
        },
        data: [
        {
            type: "splineArea",            
            color: "rgba(83, 223, 128, .6)",
            
            xValueType: "dateTime",
            
            dataPoints: [
                { x: 1568304000000, y: 0},
								{ x: 1568307600000, y: 9.8},
								{ x: 1568340000000, y: 55},
								{ x: 1568343600000, y: 55},
								{ x: 1568347200000, y: 55},
								{ x: 1568350800000, y: 55},
								{ x: 1568422800000, y: 46.4},
								{ x: 1568426400000, y: 46.4},
								{ x: 1568430000000, y: 46.4},
								{ x: 1568433600000, y: 46.4},
								{ x: 1568437200000, y: 46},
								{ x: 1568440800000, y: 46},
								{ x: 1568444400000, y: 46},
								{ x: 1568448000000, y: 46},
								{ x: 1568451600000, y: 46},
								{ x: 1568494800000, y: 45.5},
								{ x: 1568498400000, y: 45.5},
								{ x: 1568606400000, y: 45.4},
								{ x: 1568610000000, y: 45.4},
								{ x: 1568707200000, y: 45},
								{ x: 1568710800000, y: 45},
                { x: 1568836800000, y: 44},
                { x: 1568840400000, y: 44},
                { x: 1568919600000, y: 41},
                { x: 1568923200000, y: 42},
                { x: 1568948400000, y: 43},
                { x: 1568952000000, y: 43},
                { x: 1568955600000, y: 43}
            ]
        }
        ]        
	});
	chart.render();
	document.getElementById("button").addEventListener("click", function(){
      	var label = chart.axisX[0].stripLines[0].get("label");	
      document.getElementById("display").innerHTML = "Initial Label: " + label;
 ...