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)
          }
5

Hi @ian

Is there a way to add tick images for Y axis?

6

Hi @Maciej,

Yes, this is now possible by setting axis to y. Here’s an example

Chart.js axis label images on the y axis
Chart.js axis label images on the y axis1000×600 48.7 KB 

 axisTickImages: {
        axis: 'y',
        offset: {
          x: -60,
        },
        images: [
          {
            url: 'https://em-content.zobj.net/thumbs/120/apple/325/red-heart_2764-fe0f.png',
            width: 25,
            height: 25,
          },
          null,
          {
            url: 'https://em-content.zobj.net/thumbs/120/apple/325/fire_1f525.png',
            width: 25,
            height: 25,
          },
          null,
          {
            url: 'https://em-content.zobj.net/thumbs/120/apple/325/birthday-cake_1f382.png',
            width: 25,
            height: 25,
          },
          null,
          {
            url: 'https://em-content.zobj.net/thumbs/120/apple/325/waving-hand_1f44b.png',
            width: 25,
            height: 25,
          },
          null,
          {
            url: 'https://em-content.zobj.net/thumbs/120/apple/354/goat_1f410.png',
            width: 25,
            height: 25,
          },
        ],
      },
7

That’s the feature I needed! Thank you
I could not find any documentation of this plugin’s exact API tho.