Estou utilizando o gráfico em linha do ng2-charts, ele possui uma boa visualização no meu monitor, porém no mobile fica uma má visualização dos dados.
Meu gráfico na visualização padrão do monitor:
O mesmo gráfico redimensionado:
Meu 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>
No meu TS eu defini:
public lineChartOptions:any = {
responsive: true
};
Penso que o ideal seria manter o height do gráfico e o Width eu der um overflow: auto na div, porém quando redimensiona o canvas automaticamente fica desse tamanho e se eu aumento através do css ele continua com as linhas do gráfico pequeno.
Alguém tem alguma ideia de como deixar esse gráfico apresentável no mobile?