在图表外显示图表标签 - Vue.Js

Question

我试图在图表外显示标签，因为有时我会看到标签重叠。所以我尝试使用 connectorShape 和 crookDistance 但它没有按预期工作。我在图表中看不到任何变化。您的帮助将不胜感激。

我按照此链接进行了更改，但没有运气。 https://www.highcharts.com/docs/advanced-chart-features/pie-datalabels-alignment

我的图表看起来像这样 Image link。

要求：

在图表外显示标签。

    createChart(chartId, chartType, chartData, options = null) {
    var ctx = document.getElementById(chartId);
    return new Chart(ctx, {
        type: chartType,
        data:
        {
            labels: ["Not Attempted", "Fail", "Pass"],
            datasets: [
                {
                    backgroundColor: ["lightgray", "#ff8175", "#84efa5"],
                    data: [app.others, app.fail, app.pass]
                }
            ]
        },
        options: options,
        showTooltips: false,
        datalabels: {
            connectorShape: 'crookedLine',
            crookDistance: '70%'
        }
    });
    },
    createMonthlyBarChart() {
    var chartData = {
    }
    
    var chartOptions = {
        legend: {
            position: 'bottom',
        },
        plugins: {
            datalabels: {
                connectorShape: 'crookedLine',
                crookDistance: '70%',
                backgroundColor: '#fff',
                borderRadius: 3,
                font: {
                    size: 13,
                    weight: 'bold',
                },
                formatter: (value, ctx) => {
                    var sum = 0;
                    ctx.chart.data.datasets[0].data.map(data => { sum += data; });
                    return value + " (" + (value * 100 / sum).toFixed(1) + "%)";
                }
            }
        }
    }
    app.monthlyBarChart = app.createChart('monthlyBarChart', 'pie', chartData, chartOptions);