ng-2 chart not responsive

Question

I am using ng2-charts. I have a date tab where I can choose today, week, month and particular dates. According to that my data varies in chart. My datas are working well according to date. But my chart is not responsive enough to plot the values corresponding to the dates.

Today View: https://ibb.co/bHDdwLG data[100,105,120],

Week View: https://ibb.co/SfWxyMr data[100,105,120,140]

If you see week's view, before completing value:140 graph cuts down it's not responsive it seems.

Code

TS

public lineChartOptions: any = {
responsive: true,
};

getabc(start?: moment.Moment, end?: moment.Moment) {
this.abcService.getabc(this.token, start, end).subscribe(
  data => {
    this.a = data.map(k => k.a);
    this.date_time = data.map(k => k.datetime.toLocaleTimeString());
    this.lineChartData = [
      { data: this.a, label: 'abc' }
  ]
  this.lineChartLabels=this.date_time
    console.log(this.a);
    console.log(this.date_time); // I can get the values correctly 
   according to the date
  }
);
}

HTML

<div style="display: block;" *ngIf="lineChartData.length > 0">
<canvas baseChart width="400" height="180" style="margin- 
left:5%;margin-top: 5%;" [datasets]="lineChartData"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>

Answer 1

Here's the solution (class must be called chart)

<div class="chart">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="chartOptions"
              legend="true"
              chartType="bar">
      </canvas>
    </div>

CSS

.chart {
  position: relative;
  min-height: unset;
}

Answer 2

You need need set the maintainAspectRatio to false

 public pieChartOptions: ChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
 }

And set the canvas height => canvas baseChart height="450"

  <canvas baseChart height="450"
    [data]="pieChartData"
    [labels]="pieChartLabels"
    [chartType]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    [colors]="pieChartColors"
    [legend]="pieChartLegend"
    (chartClick)="chartClicked($event)">
   </canvas>

You can set the mobile height with CSS

@media (max-width: 600px) {
  .chartjs-render-monitor {
    height: 700px !important;
  }
}

Answer 3

Don't provide width and height to canvas element as it is restricting the graph to show completely, you should have a chart wrapper instead and give it a width and canvas will take the size according to the available space.

<div class="chart-wrapper">
<canvas baseChart [datasets]="lineChartData"  *ngIf="lineChartData.length > 0"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>

And in css style your wrapper class

.chart-wrapper{
    position: relative;
    height: 40vh;
    max-width:100%;
}