Topic: radar chart enclosure increases in size

drclohite pro asked 6 years ago


<canvas id="contactRadarChart" height="17206" class="chartjs-render-monitor" width="380" style="display: block; width: 380px; height: 17206px;">contactRadarChart</canvas> as you can see the height is large. This is a snapshot in time, it has risen from zero. I guess it is trying to be responsive. It is not a variable from the code. Here's the code. var myRadarChart = new Chart(ctxR, { type: 'radar', data: { labels: ["Key Info", "Address", "Connections", "Profile", "Notes", "History"], datasets: [ { label: "Insights", fillColor: "rgba(54, 162, 235, 0.2)", strokeColor: "rgba(54, 162, 235, 1)", pointColor: "rgba(54, 162, 235, 0.2)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(54, 162, 235, 1)", data: [ptsKI, ptsA, ptsSM, ptsP, ptsN1, ptsH1] } ] }, options: { responsive: false } });   I can clear the issue by doing an empty cache and hard reload. This is fine in dev, but not a production solution. Is there a setting I can set to fix this? Fix card height perhaps? during the time of writing height has risen: <canvas id="contactRadarChart" height="923638" class="chartjs-render-monitor" width="380" style="display: block; width: 380px; height: 923638px;">contactRadarChart</canvas>    

drclohite pro commented 6 years ago

I found turning responsive to false fixes the problem. I found out how to add color to the chart here: http://www.chartjs.org/docs/latest/charts/radar.html e.g. backgroundColor: "rgba(255, 99, 132, 0.2)", borderColor:"rgb(255, 99, 132)", pointBackgroundColor:"rgb(255, 99, 132)", pointBorderColor:"#fff", pointHoverBackgroundColor:"#fff", pointHoverBorderColor:"rgb(255, 99, 132)", I tested style='height:300px;' in the card. solved problem.

drclohite pro commented 6 years ago

Those fixes are temporary, anyone got something that fixes the problem for real?

Piotr Glejzer staff commented 6 years ago

We noticed that bug. We put this on our list 'TODO'. We are very sorry about that. Have a nice day.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No