JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<div ng-controller="AppController as vm">

  <strong>First Chart</strong>
  <canvas class="chart chart-doughnut" chart-data="vm.data" chart-labels="vm.labels" chart-colors="vm.colors" chart-options="vm.options" ng-init="vm.chart()">
  </canvas>

  <br>

  <strong>Second Chart</strong>
  <canvas class="chart chart-bar" height="250px" chart-data="vm.data_gasto" chart-colors="vm.data_colors" chart-labels="vm.data_labels" chart-options="vm.data_options" ng-init="vm.chart_gasto()">
  </canvas>


</div>

JavaScript

angular.module('app', ['chart.js'])

.controller("AppController", function() {

  const vm = this;

  vm.labels = ["D1", "VC1", "Internacional", "À cobrar", "0300", "Gratuita", "Locais"];
  vm.colors = ['#f36e20', '#8aca7b', '#0bc4df', '#272343', '#389223', '#f1a80a', '#1e75eb'];
  vm.data = [10.5, 14.32, 22.4, 44.2, 2.2, 3.1, 3.28];
  vm.options = {
    tooltips: {
      callbacks: {
        label: (tooltipItem, chart) => {
          const realValue = chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
          const customValue = realValue.toFixed(2).replace(".", ",") + '%';
          const label = chart.labels[tooltipItem.index] + ':';
          return label + customValue;
        }
      }
    }
  }

  vm.data_labels = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "21", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
  vm.data_gasto = [85, 55, 85, 105, 55, 85, 35, 95, 85, 64, 25, 85, 25, 55, 85, 25, 85, 64, 85, 25, 64, 35, 85, 35, 55, 85, 35, 85, 35, 85, 105];
  vm.data_colors = ['#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf', '#8aacdf'];
  vm.data_options = {
    scales: {
      yAxes: [{
        display: false
      }],
      xAxes: [{
        display: true,
        gridLines: {
          color: 'rgba(255,255,255,.35)'
        },
        ticks: {
          fontColor: '#9d9d9c'
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, chart) => {
          const realValue = chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
          const customValue = realValue.toFixed(2).replace(".", ",") + '%';
          const label =...