<div class="row mt-2">
  <div class="col-3 d-flex flex-column align-self-center">
    <br>
    <b class="chartTitle pb-2"
       i18n>{{ chartTitle }}</b>
    <div *ngFor="let data of currentChartData.dataset"
         i18n>
      <div *ngIf="data.data.length !== 0"
           class="d-inline-flex align-items-center gap-1">
        <div class="box"
             [style.background-color]="data.pointBackgroundColor">
        </div>
        <ng-container *ngIf="!chartTitle.includes(data.label)">
          <span [ngClass]="{'d-inline-block text-truncate': truncateLabel}"
                [ngStyle]="{'width': truncateLabel ? '10rem' : 'auto'}"
                [title]="data.label">{{ data.label }}</span>:
        </ng-container>
        <span>{{ data?.currentData || 'N/A' }} {{ data?.currentDataUnits }}</span>
        <div *ngIf="maxValue && data.currentData">
          used of {{ maxConvertedValue }} {{ maxConvertedValueUnits }}
        </div>
      </div>
    </div>
  </div>

  <div class="col-9 d-flex flex-column">
    <div [ngClass]="{'chart mt-3': !isMultiCluster, 'mt-3': isMultiCluster}">
      <canvas baseChart
              [datasets]="chartData.dataset"
              [options]="options"
              [type]="'line'"
              [plugins]="chartAreaBorderPlugin">
      </canvas>
    </div>
  </div>
</div>
