Change Chart.js 4.2.1 data label style in Vue

Question

I'm using Vue and ChartJS, and I want to change the style of the data labels.

I have 3 data labels and I want to change the style of the second label from normal to bold.

What I tried - 1

plugins: {
    legend: {
        display: false,
    },
    tooltip: {
        enabled: false,
    },
    datalabels: {
        formatter: function (value, context) {
            if (context.dataIndex === 1) {
                var ctx = context.chart.ctx;
                ctx.font = "bold 20px 'Noto Sans Kr', sans-serif";
                ctx.fillStyle = "#333";
                console.log(ctx.fontWeight);
            }
            return value "원";
        },
    },
},

What I tried - 2

plugins: {
    legend: {
        display: false,
    },
    tooltip: {
        enabled: false,
    },
    datalabels: {
        formatter: function (value, context) {
            if (context.dataIndex === 1) {
                return {
                    text: value,
                    style : {
                        weight: 'bold'
                    }
                }
            }
            return value "원";
        },
    },
},

The text returned by the second method is [object object], so I can't confirm that the styling is working properly.

Please help me change individual styles of the database.

Answer 1

To change the font, you should implement the scriptable option font instead of formatter.

datalabels: {
    font: (context) => context.dataIndex === 1 ? ({weight: 'bold'}) : undefined 
    formatter: (value) => value + "원"
  },