JSFiddle - React, Tailwind, and code Playground

by Douglas Santos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <canvas id="perfilPublico" height="300" width="500"></canvas>

JavaScript

var pb = document.getElementById("perfilPublico");

    var options = {
      scales: {
      	yAxes: [{
      		ticks: {max: 8, min: -8, stepSize: 2},
          position: "left",
          gridLines:{zeroLineColor:"rgba(255,0,0,1)"}
        }]
      },
      legend: {display: true},
      tooltips: {enabled: false},
    	hover: {animationDuration: 0},
      animation: {
        onComplete: function () {
          var chartInstance = this.chart,
              ctx = chartInstance.ctx;
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';
          ctx.fillStyle = "rgba(50,50,50,1)";
          this.data.datasets.forEach(function (dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
              var data = dataset.data[index];                            
              ctx.fillText(data, bar._model.x, bar._model.y - 5);
            });
          });
        }
      }
  }

  var dataPB = {
      labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov"],
      datasets: [
          {
              label: "Qualificado",
              fill: false,
              borderWidth: 2,
              borderColor: "rgba(65,180,195,1)",
              backgroundColor: "rgba(65,180,195,1)",
              pointBackgroundColor: "rgba(65,180,195,1)",
              pointHoverBackgroundColor: "rgba(65,180,195,1)",
              pointBorderColor: "transparent",
              pointHoverBorderColor: "transparent",
              data: [2.7, 4.9, 1, -3.2, -0.3, 2.1, -3.2, -0.4, 0.6, -0.2, 4],
          },{
              label: "MĂ©dio",
              fill: false,
              borderWidth: 2,
              borderColor: "rgba(100,50,130,1)",
              backgroundColor: "rgba(100,50,130,1)",
              pointBackgroundColor: "rgba(100,50,130,1)",
              pointHoverBackgroundColor: "rgba(100,50,130,1)",
              pointBorderColor: "transparent",
        ...