Round pie chart in rectangular canvas - chart.js

Question

It it possible to get a good-looking pie chart with legend on right?
When I set a rectangular canvas bad things happen, depending on the exact combination of HTML attributes, CSS properties and Chart.js's responsive setting:
Canvas becomes square and pie itself looks tiny
Graph stretches to fit canvas and pie becomes an ellipse
My custom size is ignored anyway and some of the two previous things happen
E.g.:
new Chart("foo", {
type: "pie",
data: {
labels: [
"Lorem ipsum dolor sit",
"Morbi nec lacus",
"Others"
],
datasets: [
{
data: ["134", "74", "13"]
}
]
},
options: {
responsive: true,
legend: {
position: "right",
labels: {
usePointStyle: true
}
}
}
});
figure {
position: relative;
width: 300px;
height: 150px;
}
canvas {
border: 1px solid salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<figure><canvas id="foo"></canvas></figure>
Are pie charts only designed to be square?

Answer 1

To accomplish so, you would need to set canvas element­'s width and height, using it­'s native attributes (not style/css).
<canvas id="foo" width="300" height="150"></canvas>
note: this width and height values have to be half of the values that you set for the canvas wrapper element (<figure>)
ᴅᴇᴍᴏ
new Chart(foo, {
type: "pie",
data: {
labels: [
"Lorem ipsum dolor sit",
"Morbi nec lacus",
"Others"
],
datasets: [{
data: ["134", "74", "13"]
}]
},
options: {
responsive: true,
legend: {
position: "right",
labels: {
usePointStyle: true
}
}
}
});
figure {
position: relative;
width: 300px;
height: 150px;
}
canvas {
border: 1px solid salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<figure>
<canvas id="foo" width="150" height="75"></canvas>
</figure>
another approach
without canvas wrapper and setting responsive property to false
new Chart(foo, {
type: "pie",
data: {
labels: [
"Lorem ipsum dolor sit",
"Morbi nec lacus",
"Others"
],
datasets: [{
data: ["134", "74", "13"]
}]
},
options: {
responsive: false,
legend: {
position: "right",
labels: {
usePointStyle: true
}
}
}
});
canvas {
border: 1px solid salmon;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="foo" width="300" height="150"></canvas>