JSFiddle - React, Tailwind, and code Playground

by Konvas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<body>
  <div id="graph" class="outer-circle">

    <div id="inner-circle">
      <p id="asc">.</p>
      <p id="dsc">click here</p>
      <p id="dif">+ dif m</p>

    </div>
    <canvas id="canvas"></canvas>
    <div id="chartjs-tooltip">
    </div>
  </div>
</body>

CSS

* {
  font-family: Verdana, Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
  margin: 0px auto;
  background-color: #222;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.contents {
  display: flex;
  display: -webkit-flex;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 100%;
}

.content-padding {
  margin-top: 16px;
  margin-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

.content_text {
  font-weight: bold;
  font-size: 1em;
  color: #fff;
  margin-left: 10%;
}

#graph {
  /*padding-top: 0%;
	padding-right: 1%;
	padding-left: 1%;
	padding-bottom: 0%;*/
  background-color: #000;
  /*height: 360px;*/
}

.outer-circle {
  position: relative;
  width: 360px;
  height: 360px
}

#inner-circle {
  position: absolute;
  /*background: rgba(255, 255, 255, 1);*/
  background: rgba(255, 0, 0, 0.0);
  border-radius: 50%;
  right: 35%;
  left: 35%;
  top: 35%;
  bottom: 35%;
  border: dashed white 2px;
  /* no margin, no width, they get automatically calculated*/
}

#inner-circle p {
  color: white;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

#chartjs-tooltip {
  /*top: 15%;*/
  opacity: 1;
  position: absolute;
  background: rgba(0, 255, 0, .5);
  color: white;
  border-radius: 5%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  pointer-events: none;
}

.chartjs-tooltip-key {
  display: inline-block;
  margin-right: 10px;
}

JavaScript

var initGraph = true;
var config;
var currentPressure = 1013;
var counter = 0;
var interval = 1;
var limitPerMinute = 3;
var treshold = interval * limitPerMinute;
var actualDiff = 0;
var ascended = 0;
var descended = 0;
var nLine = 2;
var nPeakMin = 0;
var nPeakMax = 1;
var nDsc = 0;
var nAsc = 1;
var queryInterval = 2; //vrací všechny data (cca 1 minuta)
var numberOfLabels = 60 / queryInterval * 24;
var mode = 'nearest';
var intersect = false;
var arrayOfPressureFull = [1006.21, 1006.2, 1006.2, 1006.2, 1006.21, 1006.22, 1006.24, 1006.26, 1006.28, 1006.26, 1006.29, 1006.3, 1006.3, 1006.29, 1006.3, 1006.31, 1006.32, 1006.33, 1006.32, 1006.36, 1006.36, 1006.35, 1006.36, 1006.38, 1006.38, 1006.38, 1006.37, 1006.37, 1006.37, 1006.35, 1006.35, 1006.32, 1006.3, 1006.31, 1006.31, 1006.3, 1006.3, 1006.3, 1006.31, 1006.3, 1006.3, 1006.3, 1006.28, 1006.28, 1006.27, 1006.28, 1006.29, 1006.29, 1006.31, 1006.33, 1006.35, 1006.36, 1006.38, 1006.39, 1006.38, 1006.39, 1006.38, 1006.38, 1006.38, 1006.37, 1006.37, 1006.36, 1006.37, 1006.37, 1006.39, 1006.4, 1006.39, 1006.38, 1006.37, 1006.36, 1006.37, 1006.36, 1006.35, 1006.34, 1006.35, 1006.36, 1006.37, 1006.39, 1006.41, 1006.41, 1006.43, 1006.44, 1006.45, 1006.37, 1006.76, 1006.8, 1006.78, 1006.73, 1006.66, 1006.46, 1006.46, 1006.45, 1006.74, 1007.2, 1007.42, 1007.34, 1007.35, 1007.24, 1007.2, 1008.58, 1008.66, 1008.65, 1008.67, 1008.66, 1008.63, 1008.58, 1008.55, 1008.51, 1008.32, 1008.39, 1007.6, 1008.16, 1008.23, 1008.71, 1008.42, 1008.12, 1007.99, 1008.65, 1008.08, 1008.05, 1007.99, 1007.58, 1007.33, 1007.05, 1007.06, 1007.03, 1007.06, 1007.05, 1007.04, 1007.04, 1007, 1007, 1007, 1006.96, 1006.93, 1006.95, 1006.92, 1006.96, 1006.95, 1006.95, 1006.93, 1006.95, 1006.92, 1006.93, 1006.91, 1006.9, 1006.91, 1006.89, 1006.88, 1006.87, 1006.87, 1006.89, 1006.89, 1006.85, 1006.83, 1006.84, 1006.85, 1006.83, 1006.83, 1006.82, 1006.83, 1006.82, 1006.81, 1006.83, 1006.83, 1006.81, 1006.83, 1006.82, 1006.83, 1006.84, 1006.89, 1006.88,...