CODEWITHSUNDEEP
javascripthtmlchartschart.jsresponsive
JayJay
JayJay

Reputation: 53

chart looking strange on phone´s browser using chart.js

I am using chart.js to create my charts. The chart itself looks pretty neat as long as I display it on my PC´s browsers.

As soon as I use my phone´s browser the chart does not look neat anmyore at all, the x-Axis being cut partly. I am also using Bootstrap.

My code looks as following:

 <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>

Changing it to following did not help:

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

I have also added following part in my javascript code for generating the chart.

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

Does anybody have an idea how to make it look neat on a phone´s browser as well?

Upvotes: 1

Views: 1655

Answers (1)

user8890598
user8890598

Reputation:

To display properly on changing viewport size use

options: {
    maintainAspectRatio: false,

Edit: I found the best experience in a particular case was using the above mentioned but without

options: {
        responsive: true,

so you might wanna try that as well :-)

Upvotes: 1

Related Questions