Chartjs-plugin-datalabels: [Feature] Is it possible to use images on labels?

[ed1nh0]

In the following example I can see it's possible to use carets as font icons.

Source: https://chartjs-plugin-datalabels.netlify.com/samples/scriptable/data.html

Is it possible to use bitmap or SVG images also?

[simonbrunel]

@ed1nh0 sorry for the late reply: it's not possible to use image in labels and I don't plan to support this feature since it would add a lot more complexity (asynchronous image loading, resizing images, positioning images, etc.). As a workaround, you can use font icons (e.g. Font Awesome) (example) which IMO is the best way to integrates icons with this plugin, though it doesn't support multi-color icons.

[ed1nh0]

@simonbrunel that's ok. Thank you for your response, but I believe that not adding this functionality leaves the library somewhat ingrained. The library has a lot of great features, and that would be a great addition. Fontawesome does not have the kind of image I need, and although it looks similar, I can't rotate it exactly because it's not possible.
Please reconsider having this option.

[renanBritz]

Hello @simonbrunel !

Thank you for this great plugin!

I'm trying to add icons to labels to indicate weather conditions in a mobile app with ionic. For my use case, your suggestion of using font icons would work, but there is another issue: The icons are not displayed with the correct aspect ratio. You can check that out in your own example. When you hover the cursor on the graph, the icon aspect ratio will become normal.

The problem is even worse in mobile devices (the icons become very deformed).

If there's any workaround, please let me know.

Best Regards!

[simonbrunel]

@renanBritz icons look fine for me in Chrome / Firefox on Win10 and Chrome for Android. What browsers / platforms are you testing on?

[renanBritz]

Hello!

Here is a comparison image attempting to demonstrate. There are two screenshots. The one on top has the icon with the wrong aspect ratio. The one on the bottom has the correct aspect ratio (after I hover the graph with the cursor).

I'm using Windows 10, latest Chrome version.

Here is a screenshot of the ionic app running in android 6.0.1. I'm using Ionicons for the labels. If I touch the graph the label's aspect ratio normalizes.

Best regards!

[simonbrunel]

@renanBritz I can reproduce it, but don't know how to fix it.

Can you please create a new ticket with your previous messages describing this issue?

[rafaelbiten]

Hi! Do you know of a way to add some html to the labels?
On our case we have labels like: 2 ★ and we'd like to have the ★ in a different colour.

Ideally we'd have something like 2 <span style='color: red'>★</span> or something like that. We're using chartjs2 with react-chartjs-2 but apparently, there's no functionality for this. We're considering rendering the labels in a completely custom way below the chart to go around this limitation.

Thank you

[alexeigs]

@ed1nh0 sorry for the late reply: it's not possible to use image in labels and I don't plan to support this feature since it would add a lot more complexity (asynchronous image loading, resizing images, positioning images, etc.). As a workaround, you can use font icons (e.g. Font Awesome) (example) which IMO is the best way to integrates icons with this plugin, though it doesn't support multi-color icons.

@simonbrunel Is there a way to also use materialdesignicons aka mdi-v4 icons via formatter?

[jenildesai25]

Did anyone I find solution how to put any icon on data. I was trying to put up arrow using html but did not work. Any help would be appreciated. I am using react-chartjs-2

Thank you

[prasanth-git]

Is there any solution or workaround for the aforementioned feature?

Kindly help!