Topic: radar chart enclosure increases in size
<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>
Closed
This topic is closed.
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
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.