How can I make my ngx-line-chart responsive?

After some research I found the solution to my problem.

1) To change the chart size when the window is resized:

To change the chart's size I used a "onResize(event)" method. This method take in parameter the window resize event. In this method I simply get the width of the window, I divide it by a ratio (in my case it's 1.35) and I assign it to the width of my chart.

onResize(event) method:

// view is the variable used to change the chart size (Ex: view = [width, height])

onResize(event) {
    this.view = [event.target.innerWidth / 1.35, 400];
}

My html template:

<ngx-charts-line-chart
  (window:resize)="onResize($event)"
  [scheme]="colorScheme"
  [results]="multi"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [view]="view">
</ngx-charts-line-chart>

2) To change the chart size on different device:

To change the chart's size on different device I have to define the size of the chart into the constructor. I get the window size and like for "window resize" i divide it by a ratio and i assign it to "view".

My constructor:

constructor() {
    this.view = [innerWidth / 1.3, 400];
}

This answer work for me. I hope it will help you.

Neither of the above two answers completely worked for me. But basing myself on the above logic, that's how it worked for me:

chart-component.html

<div class="card">
  <div #ContainerRef class="card-body">
    <ngx-charts-pie-chart
      (window:resize)="
        resizeChart(ContainerRef.offsetWidth)
      "
      [view]="view"
      [results]="dataDashboard"
      [legend]="showLegend"
      legendPosition=""
      [labels]="showLabels"
      [legendTitle]="''"
      [scheme]="colorScheme"
    >
    </ngx-charts-pie-chart>
  </div>
</div>

chart-component.ts

/* ---- Auto resize chart ---- */
private resizeChart(width: any): void {
  this.view = [width, 320]
}

Thus, scaling according to the size of the parent div

I came up with a better & simple solution for this :

componenet.html

<div #containerRef class="card-body">
  <ngx-charts-line-chart
    [view]="[containerRef.offsetWidth, 400]"
    [scheme]="colorScheme"
    [legend]="legend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxis]="xAxis"
    [yAxis]="yAxis"
    [timeline]="timeline"
    [results]="_lineChartData"
  >
  </ngx-charts-line-chart>
</div>

Makes It responsive as per container's width.

UPDATE

if you want to make it responsive as of container for both height & width :

<div #containerRef class="card-body">
 <ngx-charts-line-chart
   [view]="[containerRef.offsetWidth, containerRef.offsetHeight]"
   [scheme]="colorScheme"
   [legend]="legend"
   [showXAxisLabel]="showXAxisLabel"
   [showYAxisLabel]="showYAxisLabel"
   [xAxis]="xAxis"
   [yAxis]="yAxis"
   [timeline]="timeline"
   [results]="_lineChartData"
 >
 </ngx-charts-line-chart>
</div>