heatmap.js | 🔥 JavaScript Library for HTML5 canvas based heatmaps | Data Visualization library

I'm using this Vue-Wrapper of heatmap.js and I don't know how I can call the heatmapInstance "h337" in my Vue-Component. I canuse the functionallity, but I can't call methods such as getValueAt, because I don't know the insatnce.

EDIT: Updated my post with some code. Here is my component where I want to call th methods and at some point (in mouseposition() function) I need to call the method "getValueAt" (named it heatmapInstance) and the heatmap-vue.js is imported in my main.js as webpack.

If you install the official npm package, it works.

But according to the official documentation and simply including import { Viewer } from "forge-dataviz-iot-react-components" (like in this example) in a empty new react project (using npx create-react-app) you will get this error:

I have multiple heatmaps in one container. I wanted to set the color axis so that the positive numbers fall in the green range and the negative numbers in the red range. So I set the colorAxis: minColor to #009933 and colorAxis: maxColor to #ff3300. This is not setting all the negatives to ranges of red and the positives to ranges of red. Can I do that using Highcharts?

Here is my code:

I am trying to add subcategories to my yaxis on the heatmap on highcharts but I am getting [object, object]

I am trying to add iphone and ipad as categories and google, bing and jeeves as the subcategories.

This is the method I saw in documentation to create the multi level categories:

I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?

All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :

But I want to display an image on top of the heatmap, so a foreground image instead of a background image.

I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.

To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:

So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:

All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html

Is there any easy way to do this using HTML/CSS/JavaScript?

I've encountered a slight problem where I've written some code where I've automated a script to track the users interactions with a UI, including mousemove & click events. If I didn't have to worry about making it responsive, then I could probably call it a day & ship the work that I've done already, however my brain is seeking some wizardry knowledge, I'm struggling to make it super responsive. Here's just a quick example of the kinda thing that I'm working on, it's nothing genius, if anything I it's mostly heatmap.js that's doing the heavy lifting. Currently I'm just seeing if I can do this as a proof of concept more than anything else...

So currently, I'm tracking the event.pageX & event.pageY values to store exactly where an event took place, I'm also storing the window.innerWidth & window.innerHeight values to try & work out some function that would allow me to offset the positions based on the size(s) of other devices.

E.g. If you look at the sample image above, that's perfect for a static page, but if I were to say make the page a little more narrow, you can see here that it's doesn't line up with the image above:

Anyway, without blabbering on too much, here's some sample code:

i have some issues with my code while using heatmap.js. I need to render mouse move heatmap using and then save it to csv. Chrome error now disappeared after changing heatmap to .heatmap but still rendering nothing. Div now has its fixed size.

i working on treemap with two different level. The color shades for each box should depend on some value not related to value assign for the size of box. and different parents group should have different color assign. I've created multiple color axis but have not been able to assign each color axis to different parents of each group. Like example in the picture,the 1st color axis (yellow) should belong to 'banana' group and 2nd color axis (gr[`