Diagramm suchen seltsam auf dem Handy-Browser mit chart.js

Question

Ich verwende chart.js, um meine Diagramme zu erstellen. Die Grafik selbst sieht ziemlich gut aus, solange ich sie auf den Browsern meines PCs zeige.

Sobald ich den Browser meines Handys benutze, sieht die Grafik gar nicht ordentlich aus, die X-Achse wird teilweise geschnitten. Ich benutze auch Bootstrap.

Mein Code sieht wie folgt:

<div id="TempChart" class="chart-container col-md-8 col-xs-8 col-lg-8 col-sm-8" style ="position: relative; 40vh; width 80vw"> 

    <canvas id="chart"></canvas> 

</div> 

Ändern es zu folgenden nicht helfen:

<canvas id="chart" class = "img-responsive"></canvas> 

ich auch in meinem Javascript-Code folgenden Teil hinzugefügt haben, um das Diagramm zu erzeugen.

options: { 
     animation: { 
    duration: 0 
}, 
responsive: true, 

Hat jemand eine Idee, wie man es auch im Browser eines Telefons ordentlich aussehen lässt?

Answer 1

auf wechselnden Darstellungsgröße Verwendung

options: { 
    maintainAspectRatio: false, 

bearbeiten richtig anzuzeigen: fand ich die beste Erfahrung in einem bestimmten Fall die oben erwähnte wurde mit Ihnen aber ohne

options: { 
     responsive: true, 

so möchte das auch mal ausprobieren :-)