Chart.js color connection between result and list of data

Question

I need to make a chart that the colors connect between the chart and list of data, as shown in this chart. I don't know what should I change, HTML? TypeScript? because mine is like this chart

Can anyone help me?

I've tried this:

HTML

In this HTML I still using hardcode color at the ion-badge color = "primary"

<ion-header class="hackathon-header" no-border>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-icon class="back" name="ios-arrow-back" [routerLink]="['/app/home']"></ion-icon>
      </ion-buttons>
      <ion-title class="title">
          <div>Vote Result</div>
      </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card class="welcome-card">
    <ion-card-header>
      <ion-card-title class = "title1">{{topicName}}</ion-card-title>
      <ion-card-title class = "title2">{{topicTitle}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <canvas id="myChart" width="200" height="200"></canvas>
      <ion-list>
        <ion-item *ngFor="let choice of topicChoices; let i = index">
          <ion-badge color = "primary" slot="start">{{i+1}}</ion-badge>
          <ion-label >{{choice.name}}</ion-label>
          <ion-badge color = "Tint" slot="end">{{choice.total_vote}}</ion-badge>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

TS

this.ctx = document.getElementById('myChart');
    var myChart = new Chart(this.ctx, {
    type: 'horizontalBar',  
    data: {
        labels: this.ChoiceName,
        datasets: [{
            data: this.ChoiceTotalVote,
            backgroundColor: [
                'rgba(10, 183, 115, 1)',
                'rgba(251, 118, 139, 1)',
                'rgba(255, 194, 0, 1)',
                'rgba(159, 105, 216, 1)',
                'rgba(39, 215, 210, 1)',
                'rgba(0, 163, 230, 1)'
            ],
            borderWidth: 1
        }]
    },
    options : {
      legend: {
        display: false
      },
      tooltips: {
          callbacks: {
            label: function(tooltipItem) {
                    return tooltipItem.yLabel;
            }
          }
      },
      scales: {
          xAxes: [{
              gridLines: {
                  color: "rgba(0, 0, 0, 0)",
              }
          }],
          yAxes: [{
              gridLines: {
                  color: "rgba(0, 0, 0, 0)",
              }
          }]
      }
  }
});

The result that I made is as shown in this chart, so the numbers are all green but I want it to follow the chart's color.

Thanks in advance!