JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title: {
			text: "Day Planner"
		},
    exportEnabled: true,
		axisY: {
			interval: 1,
			valueFormatString: "#0:'0''0'"
		},
		axisX: {
    	interval: 1,
      intervalType: "day",
			valueFormatString: "DD MMM"
		},
		data: [
		{
			type: "rangeBar",
      toolTipContent: " {y[0]}-{y[1]} <br/> {task}",
			yValueFormatString: "##:'00'",
			dataPoints: [
				{x: new Date(2014,03,1), y: [ 9,10], task: "Standup Meeting"},  
        {x: new Date(2014,03,1), y: [ 10,11], task: "Project Planning Meeting"},  
        {x: new Date(2014,03,1), y: [ 11,13], task: "Task 1"},  
        {x: new Date(2014,03,1), y: [ 13, 14], task: "Lunch Break"},  
        {x: new Date(2014,03,1), y: [ 14, 16], task: "Task 2"},  
        {x: new Date(2014,03,1), y: [ 16, 17], task: "Task 3"},
        
        {x: new Date(2014,03,2), y: [ 9,10], task: "Standup Meeting"},  
        {x: new Date(2014,03,2), y: [ 10,11], task: "Task 4"},  
        {x: new Date(2014,03,2), y: [ 11,13], task: "Task 5"},  
        {x: new Date(2014,03,2), y: [ 13, 14], task: "Lunch Break"},  
        {x: new Date(2014,03,2), y: [ 14, 16], task: "Task 6"},  
        {x: new Date(2014,03,2), y: [ 16, 17], task: "Task 7"},
        
        {x: new Date(2014,03,3), y: [ 9,10], task: "Standup Meeting"},  
        {x: new Date(2014,03,3), y: [ 10,11], task: "Task 8"},  
        {x: new Date(2014,03,3), y: [ 11,13], task: "Task 9"},  
        {x: new Date(2014,03,3), y: [ 13, 14], task: "Lunch Break"},  
        {x: new Date(2014,03,3), y: [ 14, 16], task: "Task 10"},  
        {x: new Date(2014,03,3), y: [ 16, 17], task: "Task 11"},
        
				
			]
		}
		]
	});
	chart.render();
}