'how to fix Chart.js bubble inner padding problem

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)';
                                },
                            }
                        }
                    }
                },
chart.js


Solution 1:[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.

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 Eric Aya

Related Questions