JSFiddle - React, Tailwind, and code Playground

by Jeferson Almeida

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" max-width="100%" height="auto"></canvas>

JavaScript

var chartLabel = ["ABERTURA DE CREDITO - EXTRAORDINARIO", "ACOMPANHAMENTO GESTAO PUBLICA ESTADUAL - LEI DE DIRETRIZES ORÇAMENTARIAS - LDO", "ADMINISTRATIVO EXTERNO - CADASTROS DIVERSOS", "GESTAO FISCAL - ORCAMENTO GERAL DO ESTADO - OGE", "RECURSO - RECONSIDERACAO"];
var chartLabelEixo = ["ABERTURA DE CREDITO", "ACOMPANHAMENTO GESTAO", "ADMINISTRATIVO EXTERNO", "GESTAO FISCAL - ORCA", "RECURSO - RECONSIDE"];
var chartData = [2, 1, 1, 1, 2];
var chartColors = ["#7565F1", "#7113C9", "#7E5372", "#06D0C3", "#D3FC07"];

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'bar',                               
  data: {
    labels: chartLabelEixo,
    //backgroundColor: chartColors,                                    
    datasets: [{
      label: 'Quantidade de processos',
      data: chartData,
      backgroundColor: chartColors,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }],
      xAxes: [{
        ticks: {
          fontSize: 10,
          autoSkip: false,
        }
      }]
    },
     tooltips: {
       callbacks: {
         title: function (tooltipItem, data) { return chartLabel[tooltipItem[0].index] },
         label: function (tooltipItem, data) {
           return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
         },
         //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
       }
     },
  }
});