JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<canvas id="container" height="210"></canvas>

JavaScript

var ctx = document.getElementById("container").getContext('2d');

 var container = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["Administrativo"],
              datasets: [{
               label: "Aberta",
               backgroundColor: '#4dbd74',
               data: [5],
              }, {
               label: "Encerrada",
               backgroundColor: '#f86c6b',
               data: [5],
              }, {
               label: "Total",
               backgroundColor: '#20a8d8',
               data: [10],
            }]
          },
          options: {
            tooltips: {
               mode: 'index',
               intersect: false
            },
            scales: {
               yAxes: [{ 
            scaleLabel: {
            display: true,
            labelString: "Quantidade"
               }
               }],xAxes: [{
                            gridLines: {
                                color: "rgba(0, 0, 0, 0)",
                            },   
                                 ticks: {
                                 autoSkip: false,
                                 fontSize: 10
                             } 
                        }]
                },
            legend: {
              labels: {
                boxWidth: 12
              },
               position: "bottom",
            },

          }

      });