JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/financial-data-random"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="chartOverview"></div>
    <div id="zoomOverview"></div>

CSS

.buttonset {
            position: absolute;
            top: 0px;
            left: 50px;
            z-index: 10000;
        }

            .buttonset > label {
                width: 60px;
                height: 26px;
                margin-right: -4px !important;
            }

        .tooltip {
            font-weight: bold;
        }

JavaScript

$(function () {
$(document).ready(function () {
		    var chartOverview = $("#chartOverview"),
				
				popoverTimeout = 0,
				popoverLeft,
				popoverRight,
				lastTarget,
				currentlyDragged,                
				zoomParams;
		    chartOverview.igDataChart({
               
				width: "100%",
				height: "400px",
				axes: [
					{
						name: "xAxis",
						type: "time",
						dataSource: financialData1,
						dateTimeMemberPath: "Date",
						labelVisibility: "visible",

						breaks: [{
						    start: new Date("2009-12-26T00:00:00"),
						    end: new Date("2009-12-27T23:59:59.99"),
						    interval: 7 * 24 * 60 * 60 * 1000
						}],				
					},
					{
						name: "yAxis",
						type: "numericY"
					}
				],
				series: [
					{
						name: "series1",
						dataSource: financialData1,
						title: "Price Series",
						type: "financial",
						isTransitionInEnabled: true,
						displayType: "ohlc",
						xAxis: "xAxis",
						yAxis: "yAxis",
						openMemberPath: "Open",
						highMemberPath: "High",
						lowMemberPath: "Low",
						showTooltip: true,
						tooltipTemplate: "tooltipTemplate",
						closeMemberPath: "Close",
						thickness: 2,
						trendLineBrush: "rgba(68, 172, 214, .8)",
						trendLineThickness: 5,
						trendLineType: "exponentialAverage",
						negativeBrush: "rgba(198, 45, 54, .8)"
					},
					{
						name: "series2",
						dataSource: financialData2,
						title: "Price Series",
						type: "financial",
						isTransitionInEnabled: true,
						xAxis: "xAxis",
						yAxis: "yAxis",
						openMemberPath: "Open",
						highMemberPath: "High",
						lowMemberPath: "Low",
						closeMemberPath: "Close",
						thickness: 2,
						showTooltip: true,
						tooltipTemplate: "tooltipTemplate",
						trendLineBrush: "rgba(73, 73, 73, .8)",
						trendLineThickness: 5,
						trendLineType: "exponentialAverage",
						negativeBrush: "rgba(198, 45, 54, .8)",
						displayType: "ohlc"
					}
				],
				horizontalZoomable:...