title: how do I get my lables to show up in ChartJS?
body: <p>I'm trying to bring my label content to the top and change the label flow color by column, but i still can't find a way, can you suggest or suggest me some ways.</p>
  <p>this is my:</p>
  <p><a href="https://i.stack.imgur.com/2Wbi1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Wbi1.png" alt="bar chart" /></a></p>
  <p>desired output</p>
  <p><a href="https://i.stack.imgur.com/zZzbu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZzbu.png" alt="" /></a></p>
  <p>this is my code: I'm trying to custom lange but it's not working as i thought.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var ctx = document.getElementById("myChart").getContext('2d');
  
      Chart.defaults.font.size = 16;
      const labels = ["Cat", "Dog", "Monkey"];
      const data = [89, 52, 70];
      const barBgColor = ['#A0C8BB', '#B0C3E6', '#FFE38B', ]
  
      var chartOptions = {
          borderSkipped: false,
          plugins: {
              legend: {
                  display: false,
              },
              datalabels: {
                  display: true,
                  color: 'black',
                  anchor: 'end',
                  align: 'top',
                  offset: -30,
                  formatter: function(value, context) {
                      return value + '%';
                  }
              }
          },
          barThickness: 55,
          responsive: true,
          scales: {
              x: {
                  display: true,
                  title: {
                      font: {
                          size: 16,
                      },
                      display: true,
                      text: "",
                  },
                  grid: {
                      display: false,
                      drawBorder: false,
                  },
                  ticks: {
                      display: true,
                      beginAtZero: true,
                  },
              },
              y: {
                  display: true,
                  ticks: {
                      display: false,
                      beginAtZero: true,
                      stepSize: 30,
                  },
                  grid: {
                      color: '#9B9898',
                      drawBorder: false,
                      borderDash: [8, 4],
                  },
              },
          },
      };
  
      var myChart = new Chart(ctx, {
          type: 'bar',
          plugins: [ChartDataLabels],
          data: {
              labels,
              datasets: [{
                  data: data,
                  backgroundColor: barBgColor,
              }],
          },
          options: chartOptions,
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myChart"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>