ng2Charts Linea: How to apply responsiveness to this graph?

Question

I’m using the online chart of ng2-Charts, It has a good view on my monitor, but in mobile is a bad view of the data.

My chart in the default display of the monitor:

The same resized graph:

My html:

<div class="col-12 col-lg-8 pt-4 p-2">
   <div class="card">
      <div class="m-3">
         <h5 class="mt-2 pt-3">Total de vendas por dia</h5>
         O quanto você vende por dia em cada conta?
      </div>
      <div class="mt-3">
         <div id="rowOpcoesGrafico" class="row">
            <i (click)="alteraCoresGrafico()" class="fas fa-palette opcoesGrafico ml-3 pl-3" matTooltipPosition="above" matTooltip="Alterar cores do gráfico"></i>
            <div id="colunaMesAnoGrafico" class="col-xl-3 col-12">
               <label class="dataPesquisaGrafico" for="dataPesquisaGrafico">Mês/Ano:</label>
               <input name="dataPesquisaGrafico" id="dataPesquisaGrafico" [(ngModel)]="dataPesquisarGrafico" placeholder="mês/ano" type="text" mask="00/0000" class="form-control" aria-describedby="start-date">
               <span (click)="atualizaGrafico(dataPesquisarGrafico)" matTooltip="Atualizar gráfico" class="input-group-addon" id="start-date"><span class="fas fa-sync-alt opcoesGrafico ml-2"></span></span>
            </div>
         </div>
         <canvas baseChart width="400" height="100"
         [datasets]="lineChartDataMes05"
         [labels]="diasMesAtualEscolhido"
         [options]="lineChartOptions"
         [colors]="lineChartColors"
         [legend]="lineChartLegend"
         [chartType]="lineChartType">
         </canvas>
      </div>
   </div>
</div>

On my TS I set:

  public lineChartOptions:any = {
    responsive: true
  };

I think the ideal would be to keep the height of the graph and the Width I give an overflow: auto in the div, but when resizes the canvas automatically gets that size and if I increase through the css it continues with the lines of the small graph.

Does anyone have any idea how to make this graphic presentable on mobile?

Answer 1

I managed to solve it that way:

HTML:

<canvas baseChart width="600" height="larguraGrafico"
     [datasets]="lineChartDataMes05"
     [labels]="diasMesAtualEscolhido"
     [options]="lineChartOptions"
     [colors]="lineChartColors"
     [legend]="lineChartLegend"
     [chartType]="lineChartType">
</canvas>

Now the width of my graph is set through a property of my ts.

My ts got that way:

ngOnInit(){
//Pega o tamanho da tela
    var widthTela = screen.width;

    //Em monitores grandes, a largura 100 resulta em uma boa visualização do gráfico
    this.larguraGrafico = 100;

    //Se a largura da tela for maior que 556, define a propriedade responsive como true, para ocupar todo o conteúdo da div
    if(widthTela > 556){
      this.lineChartOptions.responsive = true
    }else{
      //Caso for menor que 556 (dispositivos moveis), então define uma largura minima de 450 para que consiga visualizar corretamente as linhas do gráfico em conjunto com um overflow na div.
      this.lineChartOptions.responsive = false;
      this.larguraGrafico = 450
    }
}

And then I applied it to my chart card:

#cardGrafico{
    overflow: auto;
}

My mobile result: