Chartjs-plugin-datalabels: Font Awesome icons not rendering

[ericsvendsen]

I'm trying to show font awesome (4.7) icons as data labels, which seems like it should work because other unicode characters in other font families seem to work ok. Is there something else I should be doing besides the following?

this.options = {
    plugins: {
        datalabels: {
            color: 'white',
            display: context => {
                return context.dataset.data[context.dataIndex] > 15;
            },
            font: {
                weight: 'bold',
                family: 'FontAwesome',
                style: 'normal'
            },
            formatter: (value, context) => {
                return `\\u${context.dataset.icon_code}`;
            }
        }
    },
    ...
}

[simonbrunel]

Looks like this should work, can you build a jsfiddle that demonstrate the issue?

[simonbrunel]

It works for me: https://jsfiddle.net/simonbrunel/y1ry2cvb/, I'm not sure you can actually build unicode dynamically so it might come from your formatter.

[ericsvendsen]

Ok, there must be other issues going on in my code then because as you showed it obviously should work just fine. My apologies, and thank you for a wonderful plugin!

[ericsvendsen]

@simonbrunel you were exactly right about trying to generate unicode in my formatter. For anyone else who may be interested, this is what I had to do to get that working:

formatter: (value, context) => {
  return String.fromCharCode(parseInt(context.dataset.icon_code, 16));
}

Now I have icons in my bars :)

[simonbrunel]

Thanks @ericsvendsen for the follow-up and the snippet, I may try to add a sample about using Font Awesome with that plugin. Though, wouldn't be easier to directly define dataset.icon_code: '\uf0e7' as I did in my fiddle?

[ericsvendsen]

Yes, however for this app the datasets are being dynamically generated, and for various reasons the associated icon codes are only stored in the db as f0c3 (for example). As a result I need to build the unicode values at runtime.

[anihow]

Yes, Even for me the font object is not working for me in my code . Though i can see the font is applicable for other objects but not working for data labels plugin font object . I can see it is working in fiddle and i see few people facing issues regarding the font object . Any help please?

[simonbrunel]

@anihow can you share your code, ideally in a runnable fiddle?

[anihow]

@simonbrunel Below is the file where my code exists and i am new to fiddle and i dont know how to use ity hence sending my file

and also i am placing the JSON file in the same directory

and my JSON looks something like this

{
"Details":[
{
"Day" : "Sunday",
"Country": "India",
"Cost":"200"
},
.........

]
}

Test.txt

Please look into this and let me know if you can help me.

[simonbrunel]

font should be under datalabels, in your file it's under plugins and font.size should be a number, not a string (same for lineHeight).

[anihow]

@simonbrunel Thanks!!! it worked for me. I know it is silly mistake but thanks for the prompt response .

Simon, i am trying to achieve two things in the above code and facing challenges

1.Is there any way to have bars in barchart look like progress bar types . Please find below image for reference.

Please let me know if there is any attribute needed or anything to be done to change.

1. I am trying to push the $ symbol along with the values to show the data labels like "$125" on right end top of the bar in the above image but getting error when trying to insert "$".

Please let me know if any package or some import statement needs to be added.

[simonbrunel]

1. I don't know and this question is out of the scope of this plugin. You will have better results asking StackOverflow. I'm also pretty sure that it has already been asked in the Chart.js project, but can't remember the ticket(s).
2. See the documentation and #39

[anihow]

@simonbrunel Thanks Simon!!! for your support.

[anihow]

@simonbrunel As Shown in the below image, As of now both my labels and data labels are mixed.. I want my data labels($95,$90) to be moved right side to the labels(sun,mon) dynamically according to the users wish on top of the bar(what i mean is to move data labels like few pixels away from labels according to user wish). Is there any attribute to do that? Please let me know.

[anihow]

@simonbrunel For the above image i am able to place it end or starting or middle but i want datalabel somewhere between start and center on top of the bar. Please suggest.