chartjs 4.2.1 change datalabes style vue

Question

I'm using Vue and ChartJS, and I want to change datalabes style.

I have 3 datalabes, I want to change second label style to bold from normal.

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 + "원";
        },
    },
},

Number 2 way return's text is [object object] so i can't confirm thT style works well.

Please help me to change databases individual style.

Answer 1

To change the font, you should implement the scriptable options for the font options and not the formatter one.

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