Redirect to URL when stripLines is clicked - CanvasJS JavaScript Charts

Redirect to URL when stripLines is clicked - CanvasJS JavaScript Charts

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: 360px; width: 100%;"></div>

JavaScript

function stripLinesClickHandler() {
	 window.open("//www.canvasjs.com"); // Change your URL here
}

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Stripline on  Axis X"
  },
  axisX:[{
    stripLines:[
      {                
        startValue:1935,
        endValue:1945,                
        color:"#d8d8d8"                      
      }
    ],
    valueFormatString: "####"
  }],
  data: [
    {
      type: "splineArea",            
      color: "rgba(83, 223, 128, .6)",
      dataPoints: [
        { x: 1910, y: 5 }, 
        { x: 1920, y: 9 }, 
        { x: 1930, y: 17}, 
        { x: 1940, y: 32}, 
        { x: 1950, y: 22}, 
        { x: 1960, y: 14}, 
        { x: 1970, y: 25}, 
        { x: 1980, y: 18}, 
        { x: 1990, y: 20}
      ]
    }
  ]        
});
chart.render();

document.getElementById("chartContainer").addEventListener("click", function(e){
  var xPos = e.pageX - this.offsetLeft, 
      yPos = e.pageY - this.offsetTop,
      bounds = chart.axisX[0].stripLines[0].bounds;
  
  if((bounds.x1 <= xPos && xPos <= bounds.x2) && (bounds.y1 <= yPos && yPos <= bounds.y2)) {
  	stripLinesClickHandler();
  } 
});