JSFiddle - React, Tailwind, and code Playground

by Gary Davies

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!doctype html>
<html>

  <head>
  </head>

  <body>
    <div class="graph">
      <div class="section">
        <canvas id="chart_id" class="graph" width="auto" height="auto"></canvas>
      </div>
    </div>
  </body>

</html>

JavaScript

function generateColour() {
  const hue = Math.random() * 360
  const saturation = 60 + Math.random() * 30 // start at 60, cap at 90, max is 100.
  const luminosity = 50 + Math.random() * 30 // start at 50, cap at 80, max is 100.

  return `hsl(${hue}, ${saturation}%, ${luminosity}%)`
}

Chart.plugins.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});



var total = 11076481;
var ctx = document.getElementById('chart_id');
var data = {
  labels: ['StatusCode'],
  fullWidth: false,
  datasets: [{
    stack: 'Stack 0',
    label: 'iplayer',
    /*  ...