How to configure image label?

1

Hello,
Is there any solution for putting images instead of text in the X or Y Axes labels? I tried base64 but no didn’t work.

2

Hi @Emad,

This can be done with a custom Chart.js plugin, but it’s a little complicated and would require a Professional subscription.

There’s an experimental plugin provided by QuickChart called axisTickImages. Here’s an example usage (with Chart.js v3):

Chart.js axis tick label images
Chart.js axis tick label images1000×600 45.3 KB

Link to chart editor

3

That’s great. Definitely, if it works fine I’ll get the Professional subscription. But can you explain more about the complications?

4

Sorry I wasn’t clear. The axisTickImages plugin is an alternative to the custom Chart.js plugin. You are free to use it now, and it is not very complicated :smiley:

Here is the plugin signature:

axisTickImages: {
        offset: {
          x: -12,     // Pixel adjustment for image x position (optional)
          y: 30,      // Pixel adjustment for image y position (optional)
        },
        images: [
          {
            url: 'https://...',  // Image url (required)
            width: 25,           // Resize to width (optional)
            height: 25,          // Resize to height (optional)
          }