Overview using an awesome Chart.js

by Anurak Sumranphan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
<script src="https://unpkg.com/@popperjs/core"></script>
<div class="chartjs-container">
  <canvas id="headerChart"></canvas>
</div>

CSS

body {
  background: #20262E;
  color: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}

.chartjs-container {
  min-height: 400px;
}

.popover, .popover > .arrow {
  position: absolute;
  display: block;
}

.popover {
  background-color: #152e4d;
  background-clip: padding-box;
  font-size: 0.8rem;
  border: 1px solid #12263f;
  padding: 0.8rem 0.95rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.popover > .arrow {
  height: 0.5rem;
  bottom: calc((.5rem + 1px) * -1);
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateX(-0.5rem);
}

.popover > .arrow:before,
.popover > .arrow:after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0.5rem 0.5rem 0;
}

.popover > .arrow:before {
  bottom: 0;
  border-top-color: #12263f;
}

.popover > .arrow:after {
  bottom: 1px;
  border-top-color: #152e4d;
}

.popover-header,
.popover-body {
  text-align: center;
}

.popover-header {
  font-size: 0.9rem;
  margin: 0 0 0.25rem 0;
  padding: 0;
}

.popover-body-indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-radius: 50%;
}

JavaScript

var ctx = document.getElementById('headerChart');

Chart.defaults.global.defaultColor = '#95AAC9';
Chart.defaults.global.defaultFontColor = '#95AAC9';
Chart.defaults.global.elements.line.borderWidth = 3;
Chart.defaults.global.elements.line.borderColor = '#2C7BE5';
Chart.defaults.global.elements.line.bacakgroundColor = 'rgba(44,123,229, 0.2)';
Chart.defaults.global.elements.line.tension = 0.4;

Chart.defaults.global.legend.display = false;

Chart.defaults.global.elements.point.backgroundColor = '#2C7BE5';
Chart.defaults.global.elements.point.borderColor = '#2C7BE5';

Chart.scaleService.updateScaleDefaults("linear", {
  gridLines: {
    borderDash: [2],
    borderDashOffset: [2],
    color: '#E3EBF6',
    drawBorder: false,
    drawTicks: false,
    zeroLineColor: '#E3EBF6',
    zeroLineBorderDash: [2],
    zeroLineBorderDashOffset: [2]
  },
  ticks: {
    beginAtZero: !0,
    padding: 10,
    callback: function(value, index, values) {
      if (!(value % 10)) return value;
    }
  }
});

Chart.scaleService.updateScaleDefaults("category", {
  gridLines: {
    drawBorder: false,
    drawOnChartArea: false,
    drawTicks: false
  },
  ticks: {
    padding: 20
  },
  maxBarThickness: 10
});

Chart.defaults.global.tooltips.intersect = false;
Chart.defaults.global.tooltips.mode = 'index';
Chart.defaults.global.tooltips.enabled = false;
Chart.defaults.global.tooltips.custom = function (tooltipModel) {
  // Tooltip Element.
  var tooltipEl = document.getElementById('chartjs-tooltip');
  
  // Create element on first render.
  if (!tooltipEl) {
  	tooltipEl = document.createElement('div'); 
    tooltipEl.id = 'chartjs-tooltip';
    tooltipEl.classList.add('popover');
    
    document.body.appendChild(tooltipEl);
  }
  
  // Hide if no tooltip.
  if (tooltipModel.opacity === 0) {
    tooltipEl.style.opacity = 0;
    return;
  }
  
 	// Set Text
  if (tooltipModel.body) {
  	var titleLines = tooltipModel.title || [];
    var bodyLines = tooltipModel.body.map(function (item)...