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