[Chartjs]-ChartJS ignoring TailwindCSS styling

by

1👍

Found the solution in my object options, where i had to add

maintainAspectratio: false

to get the result i wanted:

options: {
          responsive: true,
          aspectRatio: 1,
          maintainAspectRatio: false
        }

0👍

Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. Check this Doc

<div class="relative m-auto w-1/2 h-auto" style="position: relative; height:40vh; width:80vw">
   <canvas class="w-full h-full" id="myChart" /> //give your target width & height
</div>

Leave a comment