Reputation: 333
I'm implementing asp.net core project. I have a pie chart.js. I used outlabel plugin to show labels for each piece of the piechart. Now the problem is how I can make the chart smaller than its container in order to show all the labels completely. Right now after running the project, the console displays half of the few of the labels. My code is like the following:
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative; border:1px solid orange;"> @*padding:20px;*@ @*width="650" height="450"*@
<canvas class="canvaspie" id="piechart" width="510" height="410" style=" border:1px solid black;"></canvas> @*width="710" height="520"*@
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
@*outlabel plugin*@
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
$(function () {
var bgcolor= [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
labels: @Html.Raw(XLabels),
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: @Html.Raw(YValues)
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
//===================================new outlabel implementation
//outlabel implementation
zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
//===================================
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
</script>
<style>
.container, .box1,box2,box3 {
/*display: block;*/
/*padding: 10px;*/
margin-bottom: 50px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1*/
text-align: justify;
}
.container{
border:1px solid red;
display: block;
}
.box2{
border:1px solid purple;
padding-top: 60px;
background-color: yellowgreen;
padding-bottom: 60px;
/*padding-right:40px;
padding-right:40px;
padding-left:40px;*/
margin-top:40px;
margin-right:40px;
display: inline-block;
/*float:left;*/
}
</style>
Upvotes: 1
Views: 1187
Reputation: 11283
There was similar issue on github
One workaround is to use layout option
new Chart(ctx, {
...,
layout: {
padding: 100
}
}
Example
$(function() {
var bgcolor = [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var commonbordercolor = [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
];
var ctx = document.getElementById("piechart").getContext('2d');
var data = {
width: 100,
height: 100,
labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
datasets: [{
label: "pie chart",
backgroundColor: bgcolor,
borderColor: commonbordercolor,
borderWidth: 1,
data: [20, 40, 30, 10, 50, 15, 10]
}]
};
var options = {
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
},
legend: {
display: false
},
layout: {
padding: 100
},
zoomOutPercentage: 55,
plugins: {
outlabels: {
text: '%l %p',
color: 'black',
stretch: 45,
font: {
resizable: true,
minSize: 12,
maxSize: 18
}
}
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type: 'pie'
});
})
.container,
.box1,
box2,
box3 {
margin-bottom: 50px;
text-align: justify;
}
.container {
display: block;
}
.box2 {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
<div class="container">
<div class="row box2">
<div class="col-xl-9 pie" width="510" height="410" style="position:relative;">
<canvas class="canvaspie" id="piechart" width="410" height="410"></canvas>
</div>
</div>
</div>
Upvotes: 2