JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<div style="width:500px;position:relative;padding-top:50px;">
  <canvas id="myChart"></canvas>
  <div class="mytooltip"></div>
</div>

CSS

.mytooltip {
  width: 100px;
  height: 30px;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

jQuery(function($) {

  if ($('#myChart').length) {

    var ctx = $('#myChart').get(0).getContext("2d");

    // Стандартные настройки для всех чартов
    Chart.defaults.global.legend.enabled = true;

    Chart.defaults.global.legend.labels.boxWidth = 0;
    Chart.defaults.global.legend.labels.fontColor = '#ffffff';
    Chart.defaults.global.legend.labels.fontSize = 0;

    Chart.defaults.global.tooltips.display = false;
    Chart.defaults.global.tooltips.backgroundColor = 'rgba(255,255,255,1)';
    Chart.defaults.global.tooltips.titleFontSize = 0;
    Chart.defaults.global.tooltips.titleMarginBottom = 0;
    Chart.defaults.global.tooltips.titleFontColor = '#929191';
    Chart.defaults.global.tooltips.bodyFontColor = '#929191';

    Chart.defaults.global.elements.line.backgroundColor = 'rgba(238, 245, 255, 1)';
    Chart.defaults.global.elements.line.borderColor = 'rgba(151, 193, 237, 1)';
    Chart.defaults.global.elements.line.borderWidth = 1;
    Chart.defaults.global.elements.line.fill = true;
    Chart.defaults.global.elements.line.showLines = true;

    Chart.defaults.global.elements.point.backgroundColor = 'rgba(151, 193, 237, 1)';
    Chart.defaults.global.elements.point.borderColor = 'rgba(151, 193, 237, 1)';


    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["1", "2", "3", "4", "5", "6"],
        datasets: [{
          label: 'Состояние пациента',
          data: [12, 8, 16, 10, 9, 14]
        }]
      },
      options: {
        scales: {
          yAxes: [{
            display: false,
            ticks: {
              beginAtZero: true
            }
          }],
          xAxes: [{
            display: false,
            ticks: {
              beginAtZero: true
            }
          }]
        },
        tooltips: {
          custom: function(tooltip) {


            if (!tooltip) {
              return;
            }

            var canvas = this._chart.canvas;
            var container =...