<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
         i18n>
      <div class="d-inline-flex align-items-center gap-1">
        <div *ngIf="!maxValue"
             class="blue-box">
      </div>
        <div *ngIf="label2">{{ label }}:
        </div>
        {{ currentData || 'N/A' }} {{ currentDataUnits }}
        <div *ngIf="maxValue && currentData"> used of
          {{ maxConvertedValue }} {{ maxConvertedValueUnits }}
        </div>
      </div>
    </div>
    <div *ngIf="label2"
         i18n>
      <div class="d-inline-flex align-items-center gap-1">
        <div class="yellow-box"></div>
        <div *ngIf="label2 !== chartTitle" >{{ label2 }}: </div>
        <div>{{ currentData2 || 'N/A' }} {{ currentDataUnits2 }}</div>
      </div>
    </div>
  </div>
  <div class="col-9 d-flex flex-column">
    <div class="chart mt-3">
      <canvas baseChart
              [datasets]="chartData.dataset"
              [options]="options"
              [chartType]="'line'"
              [plugins]="chartAreaBorderPlugin">
      </canvas>
    </div>
  </div>
</div>
