JSFiddle - React, Tailwind, and code Playground

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

var chart = new CanvasJS.Chart("chartContainer", {
	axisX:[{
		stripLines:[
			{                
				startValue:1935,
				endValue:1945,                
				color:"#d8d8d8"                      
			}
		],
		valueFormatString: "####"
	}],
	data: [
		{
			type: "splineArea",            
			color: "rgba(83, 223, 128, .6)",
			click: onClick,
			dataPoints: [
				{ x: 1930, y: 17}, 
				{ x: 1940, y: 32}, 
				{ x: 1950, y: 22}, 
				{ x: 1960, y: 14}
			]
		}
	]        
});
chart.render();

document.addEventListener("click", function(e){
	chart.options.dataPointClicked = false;
});

document.getElementById("chartContainer").addEventListener("click",function(e) {
	if(!chart.options.dataPointClicked) {
		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)) {
			console.log("inside stripLine click")
		}
		chart.options.dataPointClicked  = false;
	}
});

function onClick(e) {
	console.log("inside dataPoint click")
	e.chart.options.dataPointClicked = true;	
}