HTML
<body>
<div style = "width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style = "width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style = "width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
JAVASCRIPT
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options =
{
title:
{
display:false,
},
legend:
{
display:false
},
tooltip:
{
enabled:false
},
animation:
{
duration: 0
}
}
var data =
{
datasets:
[
{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0
}
]
}
var chart =
new Chart(context,
{
type: "doughnut",
cutout: 100 * radius,
responsive: true,
data: data,
options: options
});
</script>
FIDDLE
https://jsfiddle.net/t5a41rdj/
As per title, somehow this chart has a little offset on top which I can't seem to be able to get rid of, despite having disabled legend and title.
Anything obvious I am missing?
This is because you did not disable the legend, title or tooltip. If you hover your chart you can see the tooltip is still working, title is hidden by default. Why the legend does not show I dont really know, should still show 1 item with undefined as text. But if you disable it in the correct space with is the plugins namespace you see your extra padding goes away.
Also cutout and responsive have to be configured in the options not in the root of new Chart:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;
var options = {
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
animation: {
duration: 0
},
cutout: 100 * radius,
responsive: true,
}
var data = {
datasets: [{
data: [50, 50],
backgroundColor: ["blue", "red"],
borderWidth: 0,
}]
}
var chart =
new Chart(context, {
type: "doughnut",
data: data,
options: options
});<body>
<div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
<div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
<canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>