JSFiddle - React, Tailwind, and code Playground

by sazakharov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://npmcdn.com/[email protected]/dist/Chart.bundle.js"></script>
<div class="chart-wrapper">
  <div>
    <canvas id="myChart"></canvas>
  </div>
  <div id="chartjs-tooltip">Tooltip here, YAY</div>
</div>

SCSS

.chart-wrapper {
  position: relative;
  
  canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  #chartjs-tooltip {
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 50%;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 6px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    
    p {
      margin: 0;
    }
  }
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
}

#myChart {
  border: 2px solid black;
}

JavaScript

var ctx = document.getElementById("myChart");
var sliceData = [25, 58, 35, 43, 76, 10];
var sliceLabels = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"]
var canvasWidth = $(ctx).width();
var grd;

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function createGrad(size, colorOne = "#62D7FA", opacityOne = 1, colorTwo = "#ffffff", opacityTwo = 1, colorStop = 95){

	var rgbOne = hexToRgb(colorOne);	
  var rgbTwo = hexToRgb(colorTwo);
  colorStop = colorStop/100;
  
  var canvasWidth = size.width;
  var canvasHeight = size.height;

  grd = ctx.getContext("2d").createRadialGradient(
    canvasWidth/2, 
    canvasHeight/2, 
    0.000, 
    canvasWidth/2, 
    canvasWidth/2, 
    canvasWidth/2
  );

  // Add colors
  grd.addColorStop(0.000, 'rgba(' + rgbOne.r + ', ' + rgbOne.g + ', ' + rgbOne.b + ', ' + opacityOne + ')');
  grd.addColorStop(colorStop, 'rgba(' + rgbOne.r + ', ' + rgbOne.g + ', ' + rgbOne.b + ', ' + opacityOne + ')');
  grd.addColorStop(colorStop, 'rgba(' + rgbTwo.r + ', ' + rgbTwo.g + ', ' + rgbTwo.b + ', ' + opacityTwo + ')');
  grd.addColorStop(1.000, 'rgba(' + rgbTwo.r + ', ' + rgbTwo.g + ', ' + rgbTwo.b + ', ' + opacityTwo + ')');
  
	return grd;
}

var data = {
  labels: sliceLabels,
  datasets: [{
    label: '# of Votes',
    data: sliceData,
    backgroundColor: createGrad({width: canvasWidth, height: $(ctx).height()}),
    hoverBackgroundColor: "#FF8000",
    borderWidth: 1,
    borderColor: "#fff",
    hoverBorderColor: "#fff"
  }]
};

var options = {
  cutoutPercentage: 60,
  responsive: true,
  aspectRatio: 2,
  animation: {
  	animateScale: true
  },
  hover: {
    onHover: function(data) {
      // console.log(data);
    }, // Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars,...