Formatting option on data label

[hagaygo]

After #33 is implemented using chartjs-plugin-datalabels plugin it seems i am now missing an option to format the data label.

It seems to be supported by the plugin itself : https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#multiline-labels

I can workaround this need currently by truncating the data itself , but not it is not always to workaround this way, so it should be possible with this package someday.

Thanks in advance.

[erossini]

I know that because I'm trying to implement this functionality. I'll keep you posted.

[erossini]

I added a callbacks for Title and Labels. You can see the demo page here
I'll release the NuGet package tomorrow

[erossini]

Is it working? Can I close the issue?

[hagaygo]

Hi , Can't check it now , I will check it on the start of next week and let you know.

Thanks for your efforts so far.

[hagaygo]

Hi

Just tested the new nuget (6.0.40) and i think there a little mistunderstanding.

It Seems you handled the tooltip data , while i was referring to the the label on the graph it self, here is a screenshot of my graph :

As you can see i want to format the label on the bar graph it self , not the tooltip.

Let me know if i missed something.

Thanks again for your time and efforts.

[soulfire03]

I need this change too, for the DataLabels object.
Thanks!

[yhbder]

const workingHoursSummaryChart = new Chart(workingHoursSummaryEle.getContext('2d'), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Month',
data: [80, 60, 70, 140],
borderRadius: 8,
borderWidth: 1,
barPercentage: 1.15,
borderSkipped: false,
backgroundColor: ['#E8ECF1', '#E8ECF1', '#E8ECF1', '#1A4573', ],
borderColor: ['#E8ECF1', '#E8ECF1', '#E8ECF1', '#1A4573', ],
datalabels: {
color: ['#0B1D30', '#0B1D30', '#0B1D30', '#1A4573'],
anchor: 'end',
align: 'top',
font: {
size: '12px',
weight: '600',
family: 'Nohemi'
},
},
}]
},
plugins: [ChartDataLabels],
options: {
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
datalabels: {
display: false,
formatter: (value) => {
return value + 'hrs';
}
}
},
layout: {
padding: {
top: 30,
}
},
scales: {
y: {
display: false,
offset: true,
},
x: {
reverse: false,
grid: {
display: false
}
}
}
}
});

---

This code in JavaScript