Chart.js doughnut text visibility

Viewed 32

Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.

const myChart = new Chart(canvas,
        {
            type: 'doughnut',
            data: {
                labels: dataNameDB,
                datasets: [{
                    data: dataCountDB,
                    backgroundColor: backgroundColor,
                    borderWidth: 0,
                }],
            },
            plugins: [ChartDataLabels, DoughnutLabel],
            options: {
                cutout: 340,
                responsive: true,
                animation: false,

                plugins: {
                    legend: {
                        display: false,
                    },
                    datalabels: {
                        formatter: (val, ctx) => {
                            return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
                        },
                        display: (val,ctx) =>{
                            return 'auto';
                        },
                        clamp: true,
                        clip: true,
                        anchor: 'center',
                        align: 'center',
                        offset: 1,
                        font: {
                            size: 65,
                            weight: 'bold',
                            color: '000000'
                        },
                        color: '000000',
                        labels: {
                            value: {
                                color: '#000000'
                            }
                        }
                    },
                    doughnutlabel: {
                        labels: [{
                            text: summChart,
                            font: {
                                size: 140,
                                weight: 'bold',
                                color: '000000'
                            }
                        }]
                    }
                }
            }
        },
    );

enter image description here

Now it outputs something like this, but I need it to be like this:

enter image description here

Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?

0 Answers
Related