@if (chartData().length > 0 && scale()) {
<div #containerRef class="chart-container">
  <ngx-charts-area-chart
    [showXAxisLabel]="false"
    [showYAxisLabel]="true"
    [xAxis]="true"
    [yAxis]="true"
    [gradient]="true"
    [animations]="false"
    [view]="view()"
    yAxisLabel="Response Time (ms)"
    [customColors]="customColors"
    [xScaleMin]="scale()!.xScaleMin.getTime()"
    [yScaleMin]="scale()!.yScaleMin"
    [yScaleMax]="scale()!.yScaleMax"
    [results]="chartData()"
  >
    <ng-template #tooltipTemplate let-model="model">
      {{ model.name | date: "short" }}<br />
      {{ model.value }}ms
    </ng-template>
    <ng-template #seriesTooltipTemplate let-model="model">
      {{ model[0].name | date: "short" }}<br />
      {{ model[0].value }}ms
    </ng-template>
  </ngx-charts-area-chart>
</div>
}