analytics/lib/plausible_web/templates/stats/_graph.html.eex

<div class="w-full bg-white shadow-md rounded mt-6">
  <div class="border-b border-grey-light p-4 font-medium">
    <span><%= @pageviews %> Pageviews</span> • <span><%= @unique_visitors %> Unique visitors</span>
  </div>
  <div class="p-4">
    <canvas id="main-graph" class="mt-4" width="1054" height="329"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script>
    var plot = [<%= Enum.join(@plot, ",") %>];
    var dashedPart = plot.slice(-2);
    var dashedPlot = (new Array(plot.length - 2)).concat(dashedPart)
    plot[plot.length - 1] = undefined
    var labels = [<%= raw Enum.map(@labels, fn l -> "'#{l}'" end) |> Enum.join(", ") %>]
    var ctx = document.getElementById("main-graph").getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 300);
    gradient.addColorStop(0, 'rgba(101,116,205, 0.2)');
    gradient.addColorStop(1, 'rgba(101,116,205, 0)');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            label: 'Visitors',
            data: plot,
            borderWidth: 3,
            borderColor: 'rgba(101,116,205)',
            pointBackgroundColor: 'rgba(101,116,205)',
            backgroundColor: gradient,
          },
          {
            label: 'Visitors',
            data: dashedPlot,
            borderWidth: 3,
            borderDash: [10, 15],
            borderColor: 'rgba(101,116,205)',
            pointBackgroundColor: 'rgba(101,116,205)',
            backgroundColor: gradient,
          }
        ]
      },
      options: {
        legend: {display: false},
        responsive: true,
        elements: {line: {tension: 0.1}, point: {radius: 0}},
        tooltips: {
          enabled: false,
          mode: 'index',
          intersect: false,
          custom: drawTooltip
        },
        hover: {
          mode: 'index',
          intersect: false
        },
        scales: {
          yAxes: [{
            ticks: {
              callback: labelFormatter,
              beginAtZero: true,
              autoSkip: true,
              maxTicksLimit: 8,
            },
            gridLines: {
              zeroLineColor: 'transparent',
              drawBorder: false,
            }
          }],
          xAxes: [{
            gridLines: {
              display: false,
            },
            ticks: {
              autoSkip: true,
              maxTicksLimit: 8,
            }
          }]
        }
      }
    });

function labelFormatter(num) {
  if (num > 999 && num < 100000) {
    return (num / 1000) + 'k'
  } else {
    return num
  }
}

function drawTooltip(tooltipModel) {
  var tooltipEl = document.getElementById('chartjs-tooltip');

  // Create element on first render
  if (!tooltipEl) {
    tooltipEl = document.createElement('div');
    tooltipEl.id = 'chartjs-tooltip';
    tooltipEl.innerHTML = '<table></table>';
    document.body.appendChild(tooltipEl);
  }

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

  var data = tooltipModel.dataPoints[0]

  // Set Text
  if (tooltipModel.body) {
    var innerHtml = '<thead>';
    innerHtml += '<tr><th>' + data.yLabel.toLocaleString() + ' visitors' +  '</th></tr>';
    innerHtml += '</thead><tbody>';

    innerHtml += '<tr><td>' + data.xLabel + '</td></tr>';
    innerHtml += '</tbody>';

    var tableRoot = tooltipEl.querySelector('table');
    tableRoot.innerHTML = innerHtml;
  }

  // `this` will be the overall tooltip
  var position = this._chart.canvas.getBoundingClientRect();

  // Display, position, and set styles for font
  tooltipEl.style.opacity = 1;
  tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
  tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
  tooltipEl.classList.add('bg-indigo-darkest', 'text-white', 'rounded', 'text-center', 'p-3', 'text-sm');
}
    </script>
  </div>
</div>