[Chart.JS]Line Chart Boundaries 라벨붙이기2

const ctx = document.getElementById('lineGraph').getContext('2d');
let gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(25, 224, 167, 1)');   
gradient.addColorStop(1, 'rgba(25, 224, 167, 0)');

const lineData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: 'Dataset',
            data: [ 5, 20, 45, 50, 60, 80, 150],
            backgroundColor : gradient,
            fill: true,
            borderColor : "#19E0A7",
        }
    ]
};

const lineConfig = {
    type: 'line',
    data: lineData,
    plugins:[ChartDataLabels],
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                ticks: {
                    display: false, //this will remove only the label
                },
                grid: {
                    borderDash:  [6, 4],
                    borderDashOffset: 1,
                    color: function (context) {
                        if (context.tick.value === 0) {
                            return 'rgba(0, 0, 0, 0)';
                        }
                        return 'rgba(0, 0, 0, 0.1)';
                    },
                },
                title: {
                    display: true,
                    text: 'Expire',
                    align: "end",
                    font: '7'
                }
            },
            y: {
                ticks: {
                    display: false, //this will remove only the label
                },
                grid: {
                    borderDash:  [6, 4],
                    borderDashOffset: 2,
                    color: function (context) {
                        if (context.tick.value === 0) {
                            return 'rgba(0, 0, 0, 0)';
                        }
                        return 'rgba(0, 0, 0, 0.1)';
                    },
                },
                title: {
                    display: true,
                    text: 'Asset',
                    align: "end",
                    font: '7'
                }
            },
        },
        plugins: {
            legend:{
                display:false
            },
            animation: {
                duration: 0,
            },
            tooltip: {
                enabled: false
            },
            datalabels: {
                align: function(value) {
                    if (value.dataIndex == value.dataset.data.length - 1)
                    {
                        return 'left';
                    } else if (value.dataIndex == 0) {
                        return 'right';
                    } else {
                        return 'top';
                    }
                },
                formatter: function (value, context) {
                    if (context.dataIndex == context.dataset.data.length - 1)
                    {
                        return value;
                    } else if (context.dataIndex == 0) {
                        return value;
                    } else {
                        return value;
                    }
                },
                font: (arr) => {
                    return (arr.dataIndex == 0 || arr.dataIndex == arr.dataset.data.length-1)? { size: "14px", weight: 'bold' } : '';
                },
                color: '474747',
            }
        },
    },

};

const lineGraph = new Chart($('#lineGraph'), lineConfig);

v3.0이상 적용