Iis possible to set a fill image in heatmap?s

[timogoosen]

Codepen

I wanted to know if it is possible to have a cell filled with an image in a heatmap.

So for example a standard heatmap would look like this:
https://codepen.io/apexcharts/pen/ZmgNoP

So instead of the standard heatmap I'd fill some of the cells with an image, here was my attempt at doing it:

https://codepen.io/timogoosen/pen/XWJbNQr

I just added:

    fill: {
    
    type: "image",
    opacity: 0.85,
    image: {
      src: ["https://i.ibb.co/xhMYYRD/Screen-Shot-2019-03-04-at-4-45-20-PM.png"],
      width: 30,
      height: 30
    }
  }

I also tried:(with none of the optional parameters set like in the docs)

  fill: {
  type: 'image',
  image: {
    src: ['https://i.ibb.co/xhMYYRD/Screen-Shot-2019-03-04-at-4-45-20-PM.png'],
    width: undefined,  
    height: undefined  
  }
}

I'm actually using apexcharts with vue, but the examples I did was just vanilla javascript.
I also tried with apexcharts with VueJs.

If I can fill an cell with an image I also wanted to know if it is possible to set a color and have an image filled in the cell. So for example you make a cell filled black and have the image of soccerball(that I used in the example) also shown in the cell.

If this is possible could I fill a cell with an image regardless of what color the cell is filled with?

Basically what I would like to do is to be able to show an icon like the soccerball on certain cells under certain conditions and then still show a color on a cell in a heatmap seperately of whether there is an image of the soccerball filling the cell.

I've thought maybe I'm trying to use the wrong tool to solve this problem, perhaps I am? If I am using the wrong tool to solve the problem, could you possibly suggest an other tool I could use than apexchart?

Thanks for all your help. Apexchart is very well documented and easy to work with.

Explanation

• What is the behavior you expect?
• What is happening instead?
• What error message are you getting?

[junedchhipa]

This doesn't work with the latest version 3.11.0.

I have just pushed a new commit which will enable it in the next versions. I will also add examples on the website to illustrate the usage.

[mika76]

This sounds great but can't find any example in the docs? Is there one?

[junedchhipa]

Here's the example in samples folder - https://github.com/apexcharts/apexcharts.js/blob/master/samples/vanilla-js/heatmap/image-fill.html

I will add an example on the website too.

[mika76]

nice - put your sample in a fiddle: https://jsfiddle.net/vgpmLexd/

[N-Kumbhare]

hey @junedchhipa

I want to add image in some box only then how can i do that?