how to fix Chart.js bubble inner padding problem - chart.js

Question

How to fix this? chart.js 3.5.0
with small radius there are no padding
How remove chat inner plot padding? It shows when i have big bobble radius.
I try search in chart.js documentation, and in stack overflow but don't find solution
Unfortunately, the Chart JS documention on bubble charts is severely lacking as well.
options: {
animation: false,
onClick: (e, i) => {
if (i.length) {
const bubbleSelected = i[0];
wordsTopic = `Topic${bubbleSelected.datasetIndex + 1}`
aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:wordsTopic})
} else {
wordsTopic = `Default`
aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:wordsTopic})
}
},
onHover: (e, i) => {
if (i.length) {
const bubbleSelected = i[0];
if(wordsTopic !== `Topic${bubbleSelected.datasetIndex + 1}`){
aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:`Topic${bubbleSelected.datasetIndex + 1}`})
}
} else {
aBarCh.changeCanvas({data:groupDataByTopics(JSONDATA),topic:wordsTopic})
}
},
aspectRatio: 1,
layout: {
padding: 0
},
layout: {
padding: 0
},
plugins: {
legend: {
display: false,
},
title: {
display: false,
},
},
scales: {
x: {
min: -0.25,
max: 0.25,
suggestedMin:-0.25,
suggestedMax:0.25,
ticks: {
color: '#fff',
padding: 0,
},
grid: {
borderColor: 'rgba(255, 255, 255, 0.2)',
color: function (context) {
if (context.tick.value !== 0) {
return 'transparent';
}
return 'rgba(78, 99, 102, 1)';
},
}
},
y: {
min: -0.25,
max: 0.25,
suggestedMin:-0.25,
suggestedMax:0.25,
ticks: {
color: '#fff',
padding: 0
},
grid: {
borderColor: 'rgba(255, 255, 255, 0.2)',
color: function (context) {
if (context.tick.value !== 0) {
return 'transparent';
}
return 'rgba(78, 99, 102, 1)';
},
}
}
}
},

Answer 1

I had the same issue and adding this config to the chart's options solved the problem for me:
layout: {
autoPadding: false,
},
Adding some inner padding to the axis overriding the min and max values could be also needed.