<ul class="nav" id="metrics-navbar">
  <!-- TODO: Possible states are 'active' and 'disabled'. Make sure to impliment them. -->
  <li class="nav-item" *ngFor="let chartTab of this.getAvailableChartTabs()">
    <p class="nav-link" class="nav-link" (click)="this.switchTab(chartTab)"
    [ngClass]="chartTab.isActive ? 'selected-metric-item' : 'metric-item'"> {{ chartTab.getName() }} </p>
  </li>
</ul>

<div class="custom-control custom-switch">
    <input #logarithmicScalingSwitch type="checkbox" class="custom-control-input" id="logarithmicScalingSwitch" (click)="onSwitchStateChange()">
    <label class="custom-control-label" for="logarithmicScalingSwitch">Logarithmic scaling</label>
  </div>

<!-- NOTE: Area for displaying Mongoose charts -->
<div id="displaying-charts-area" class="card">
  <div class="card-body">
    <!-- NOTE: Actual chart -->
    <template #chartContainer ></template>g8
  </div>
</div>


<!-- MARK: - Templates -->

<ng-template #chartsNotAvailable>
  <div class="card-body text-center">
    <h5 class="card-title">Oops, sorry.</h5>
    <p class="card-text">Required chart couldn't be drawn, the data for it is missing.</p>
  </div>
</ng-template>

<ul class="nav" id="metrics-navbar">
  <!-- TODO: Possible states are 'active' and 'disabled'. Make sure to impliment them. -->
  <li class="nav-item" *ngFor="let chartTab of this.getAvailableChartTabs()">
    <p class="nav-link" class="nav-link" (click)="this.switchTab(chartTab)"
    [ngClass]="chartTab.isActive ? 'selected-metric-item' : 'metric-item'"> {{ chartTab.getName() }} </p>
  </li>
</ul>

<div class="custom-control custom-switch" style="margin-left: calc(2%);">
    <input #logarithmicScalingSwitch type="checkbox" class="custom-control-input" id="logarithmicScalingSwitch" (click)="onSwitchStateChange()">
    <label class="custom-control-label" for="logarithmicScalingSwitch">Logarithmic scaling</label>
  </div>

<!-- NOTE: Area for displaying Mongoose charts -->
<div id="displaying-charts-area" class="card">
  <div class="card-body">
    <!-- NOTE: Actual chart -->
    <template #chartContainer ></template>g8
  </div>
</div>


<!-- MARK: - Templates -->

<ng-template #chartsNotAvailable>
  <div class="card-body text-center">
    <h5 class="card-title">Oops, sorry.</h5>
    <p class="card-text">Required chart couldn't be drawn, the data for it is missing.</p>
  </div>
</ng-template>

Add a little margin for chart-scaling toggle.
Add a little margin for chart-scaling toggle.
