<div class="channels-block" ng-class="{'transparent': transparent}">
  <div class="chart-bg"></div>
  <div class="traffic-chart" id="trafficChart">
    <div class="canvas-holder">
      <canvas id="chart-area" width="280" height="280"></canvas>
      <div class="traffic-text">
        1,900,128
        <span>Views Total</span>
      </div>
    </div>
  </div>

    <div class="channels-info">
        <div>
            <div class="channels-info-item" ng-repeat="label in doughnutData.labels"
                 ng-init="i = $index; data = doughnutData.datasets[0]">
                <div class="legend-color" style="background-color: {{::data.backgroundColor[i]}}"></div>
                <p>{{::label}}<span class="channel-number">+{{data.percentage[i]}}%</span></p>
                <div class="progress progress-sm channel-progress">
                    <div class="progress-bar " role="progressbar"
                         aria-valuenow="{{data.percentage[i]}}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{item.percentage}}%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

