'Make pie chart smaller Chart JS
I have a Pie chart on my sharepoint Page that will not shrink. The smaller I make the px the bigger the chart gets. For example:
<canvas id="myChart2" width="200px" height="200px" ></canvas>
makes the chart huge while
<canvas id="myChart2" width="800px" height="200px" ></canvas>
makes the pie chart smaller.
The pie displays perfectly I just cant get it smaller.
I am using some java from Chart.JS.
HTML is:
<canvas id="myChart2" width="200px" height="200px" ></canvas>
The chart options are:
var options = {
tooltipEvents: [],
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
tooltipTemplate: "<%= label %> - <%= value %>",
responsive: true,
scaleBeginAtZero: true,
// you don't have to define this here, it exists inside the global defaults
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
// context
var ctxPTD = $("#myChart2").get(0).getContext("2d");
// data
var dataPTD = [{
label: "Active",
color: "#5093ce",
highlight: "#78acd9",
value: totalActive++
},
{
label: "Completed",
color: "#c7ccd1",
highlight: "#e3e6e8",
value: totalInActive++
}
]
var itemStatuses = new Chart(ctxPTD).Pie(dataPTD, options);
Solution 1:[1]
To make the pie chart smaller, set responsive
property to false
in your chart options, like so ...
var options = {
...
responsive: false,
...
}
Solution 2:[2]
In var ctxPTD = $("#myChart2").get(0).getContext("2d");
, you could use a HTML DOM element, not a jQuery element, and set height only like:
var ctxPTD = document.getElementById("myChart2");
ctxPTD.height = 200;
Hope it works.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | ggorlen |