1

I have tried this solution as well as other solutions. But nothing is working as I want. On a ChartJS pie-charts canvas, when I am using a height attribute, it's working fine. Like:

<canvas id="a_Pie_Chart" height="400"></canvas>

But when I am removing the height attribute and trying to define it using CSS it doesn't seem to work. Like:

HTML: 

<canvas id="a_Pie_Chart" class="chartCanvas"></canvas>

CSS: 

.chartCanvas {
  height : 400px;
}

It is to add that in Javascript of the chartjs I am using:

options: {
   responsive: true,
   responsiveAnimationDuration: 500,
   mainAspectRatio : false
   }

and My Pie chart has too much (minimum 20) labels and data. How do I solve this problem?

Pritesh
  • 1,066
  • 3
  • 15
  • 35
Shunjid Rahman
  • 409
  • 5
  • 17
  • Why is this a problem? What's wrong with just using the HTML? Resizing via CSS could be difficult, because it's rendering in elements that all need to also be resized. The `height` *attribute* is there because it's parsed by the function when asked to populate the canvas - the `chartjs` has no way of knowing your CSS though, so that can only possibly apply after it's rendered everything (often too late in the case of SVGs). I'd advise creating a new canvas element instead via JS if you want to change the size, and deleting the old one. – Geza Kerecsenyi Aug 10 '19 at 19:37
  • predefining with html isn't worth. Because I have too much data. So, I have to take a large value of heigh which looks odd on desktop. – Shunjid Rahman Aug 10 '19 at 19:43
  • Just predefine the height via HTML. If you want to create the element via JS, too, however, simply do `let canvas = document.createElement("canvas"); ... stuff to set the contents ... canvas.setAttribute("height", "400");` If your problem is it looks too tall on the screen, try doing `maxheight: 200px; overflow: scroll;` in CSS. – Geza Kerecsenyi Aug 10 '19 at 19:48

0 Answers0