chart.component.html

@for (chart of charts; track chart; let i = $index) {
  @if (chart.length && i < charts.length - 1) {
    <span>{{ chart | json }}</span>
    <ngx-charts-line-chart
      [view]="view"
      [results]="chart"
      [animations]="animations"
      [legend]="showLegend"
      [legendTitle]="legendTitle"
      [legendPosition]="legendPosition"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [timeline]="timeline"
      [showGridLines]="showGridLines"
      [roundDomains]="roundDomains"
      [xAxisTickFormatting]="hideXTicks"
    >
    </ngx-charts-line-chart>
  }
  @else if (chart.length) {
    <ngx-charts-line-chart
      [view]="view"
      [results]="chart"
      [animations]="animations"
      [legend]="showLegend"
      [legendTitle]="legendTitle"
      [legendPosition]="legendPosition"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [timeline]="timeline"
      [showGridLines]="showGridLines"
      [roundDomains]="roundDomains"
    >
    </ngx-charts-line-chart>
  }
}