Performance Chart

by GuiRoque47

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="info-box" id="info-chart-box2">
  <div class="chart-box" id="myChart2-box">
    <canvas id="myChart2" width="888" height="263"></canvas>
  </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>

CSS

.info-box {
  display: block;
  border-radius: 12px;
  background: transparent linear-gradient(69deg, #0D0D0D 0%, #1E1F23 100%) 0% 0% no-repeat padding-box;
  padding: 15px 21px 16px 18px;
}

#info-chart-box2 {
  width: 936px;
  height: 305px;
  position: relative;
  margin: 36px 0px;
  padding: 20px 22px 22px;
}

JavaScript

const ctx2 = document.getElementById('myChart2').getContext('2d');

const getOrCreateTooltip2 = (chart) => {
  let tooltipEl = chart.canvas.parentNode.querySelector('div');

  if (!tooltipEl) {
    tooltipEl = document.createElement('div');
    tooltipEl.style.background = '#1E1F26';
    tooltipEl.style.borderRadius = '4px';
    tooltipEl.style.borderWidth = '1px';
    tooltipEl.style.borderColor = '#353746';
    tooltipEl.style.borderStyle = 'solid';
    tooltipEl.style.boxShadow = "0px 0px 3px #27282C47";
    tooltipEl.style.opacity = 1;
    tooltipEl.style.width = '180px';
    tooltipEl.style.margin = '0px';
    tooltipEl.style.padding = '10px 13px';
    tooltipEl.style.pointerEvents = 'none';
    tooltipEl.style.position = 'absolute';
    tooltipEl.style.transform = 'translate(-50%, 0)';
    tooltipEl.style.transition = 'all .1s ease';

    const div = document.createElement('table');
    div.style.margin = '0px';
    div.style.width = '100%';

    tooltipEl.appendChild(div);
    chart.canvas.parentNode.appendChild(tooltipEl);
  }

  return tooltipEl;
};

const externalTooltipHandler2 = (context) => {
  // Tooltip Element
  const {
    chart,
    tooltip
  } = context;
  const tooltipEl = getOrCreateTooltip2(chart);

  // Hide if no tooltip
  if (tooltip.opacity === 0) {
    tooltipEl.style.opacity = 0;
    return;
  }

  // Set Text
  if (tooltip.body) {
    const titleLines = tooltip.title || [];
    const bodyLines = tooltip.body.map(b => b.lines);

    const tableHead = document.createElement('thead');

    titleLines.forEach(title => {
      const tr = document.createElement('tr');


      const th = document.createElement('th');
      th.style.border = 'none';
      th.style.Width = '100%';
      th.style.paddingBottom = "8px";
      th.style.fontWeight = 500;
      th.style.fontSize = "15px";
      th.style.lineHeight = "23px";
      th.style.textAlign = 'left';

      const p1 = document.createElement('p');
      const p2 =...