ngx-admin/src/app/pages/dashboard/trafficChart/trafficChart.html

<div class="channels-block">

  <div class="chart-bg"></div>
  <div class="traffic-chart" id="trafficChart">
    <div class="canvas-holder">
      <canvas class="chart-area" width="300px" height="300px"></canvas>
      <div class="traffic-text">
        1,900,128
        <span>Views Total</span>
      </div>
    </div>
    <div class="traffic-legend"></div>
  </div>

  <div class="channels-info">
    <div>
      <div class="channels-info-item" *ngFor="#item of doughnutData">
        <div class="legend-color" [ngStyle]="{'background-color': item.color }"></div>
        <p>{{ item.label }}<span class="channel-number">+{{ item.percentage }}%</span></p>
        <div class="progress progress-sm channel-progress">
          <div class="progress-bar" role="progressbar"
               [attr.aria-valuenow]="item.percentage" aria-valuemin="0" aria-valuemax="100" style="width: {{ item.percentage }}%">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>