JSFiddle - React, Tailwind, and code Playground

by Mehul Parmar

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
      	theme: "theme1",
		title: {
			text: "Testing"
		},
		exportEnabled: true,
		axisY: {
			includeZero: false,
			interval: 1,
          	tickThickness: 1,
			gridThickness:1,
			lineThickness: 1,
            stripLines:[
              { //Display flag while click on "dataPoint" at the current row position.
				label: "",
                value: 33.9,
                thickness: 8,
				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,
			/*
			indexLabelFormatter: function(e){
				if(e.index === 0) 
					return "M";
				else
					return "N";
			},
			*/
			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: " "},
				{x:17, y: [17,39], color: "#AEE8FE", label: " ", click: onClick},
				{x:18, y: [0,0], label: " "},
				{x:19, y: [9,15], color: "#99FF99", label: " ", click:...