JSFiddle - React, Tailwind, and code Playground

by Mehul Parmar

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
	<div id="chartContainer" style="height: 300px; width: 100%;"></div>
	<div id="displayPixel"></div>
	<div id="dispList"></div>

CSS

.textbox {
		display: none;
	}

	.allign {
		position: absolute;
		width: 8px;
		height: 10px;
		border-width: 0px;
	}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "theme1",
	title: {
		text: "Chart Denver II - Testing"
	},
	exportEnabled: true,
	axisY: {
		includeZero: false,
		interval: 1,
		tickThickness: 1,
		gridThickness: 1,
		lineThickness: 1,
		stripLines: [{
			label: "",
			value: 32.80,
			thickness: 11,
			color: "darkgrey",
			showOnTop: true,
			opacity: .4
		}],
		labelFormatter: function(e) {
			var mtmp = e.value;
			switch (mtmp) {
				case 2:
					return "2 Months";
					break;
				case 4:
				case 6:
				case 9:
				case 12:
				case 15:
				case 18:
				case 24:
					return mtmp;
					break;
				case 28:
					return "3 Years";
					break;
				case 32:
					return "4";
					break;
				case 36:
					return "5";
					break;
				case 40:
					return "6";
					break;
				default:
					return "";
					break;
			}
		}
	},
	axisX: {
		interval: 1,
		tickThickness: 0,
		lineThickness: 0
	},
	toolTip: {
		content: function(e) {
			var axisY = e.entries[0].dataSeries.axisY.title;
			var axisX = e.entries[0].dataSeries.axisX.title;
			var xVal = e.entries[0].dataPoint.x;
			var yVal = e.entries[0].dataPoint.y;
			return "X: " + xVal + " Y: " + yVal;
		}
	},
	data: [{
		type: "rangeBar",
		indexLabelFontSize: 14,
		dataPoints: [{
			x: 15,
			y: [0, 12],
			color: "#99FF99",
			label: " ",
			click: onPut
		}, {
			x: 15,
			y: [12, 30],
			color: "#AEE8FE",
			label: " ",
			click: onPut
		}, {
			x: 16,
			y: [0, 0],
			label: " "
		}, {
			x: 17,
			y: [5, 17],
			color: "#99FF99",
			label: " ",
			click: onClick3
		}, {
			x: 17,
			y: [17, 39],
			color: "#AEE8FE",
			label: " ",
			click: onClick3
		}, {
			x: 18,
			y: [0, 0],
			label: " "
		}, {
			x: 19,
			y: [9, 15],
			color: "#99FF99",
			label: " ",
			click: onClick2
		}, {
			x: 19,
			y: [15, 30],
			color: "#AEE8FE",
			label: " ",
			click: onClick2
		}, {
			x: 20,
			y: [39, 39],
			label: " "
		}]
	}]
});
chart.render();

//Dynamic Flag insert - WORKING 50% - Pending -> last row point...