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

 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: [1, 2, 3, 4, 5, 6, 7],
        datasets: [
            {
                label: 'table',
                data: [0, 22, 45, 67, 77, 88, 100],
                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: 'Hash',
                    align: "end",
                    font : {
                        family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                        size: 14,
                        style: 'normal'
                    }
                }
            },
            y: {
                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: 'Month',
                    align: "end",
                    font : {
                        family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                        size: 14,
                        weight: 'bold'
                    }
                }
            },
        },
        plugins: {
            legend:{
                display:false
            },
            animation: {
                duration: 0,
            },
            tooltip: {
                enabled: false
            },
            datalabels: {
                anchor: "start",
                align: function(value) {
                    if (value.dataIndex == value.dataset.data.length - 1)
                    {
                        return 'left';
                    } else if (value.dataIndex == 0) {
                        return 'top';
                    } else {
                        return '';
                    }
                },
                formatter: function (value, context) {
                    if (context.dataIndex == context.dataset.data.length - 1)
                    {
                        return value; // 마지막 값
                    } else if (context.dataIndex == 0) {
                        return value; // 제일 초기값
                    } else {
                        return ''; // 중간값들
                    }
                },
                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);

 

 

https://www.chartjs.org/docs/latest/general/fonts.html

Fonts | Chart.js

Y축이 약간 Font weight가 얇은데, 해당 부분은 bold로 수정했다. 왜 얇은건지 모르겠다.