Multiple colour axis for table heatmap

plotly.js
1

I’m trying to recreate something like this:

1ckNbs.png1718×726 103 KB

In other words I need to make a heatmap with independent X axis, each one with it’s own heatmap colour schema (i.e some the higher the number the greener the backroung) others the opposite.

I know this is not possible with High-Charts. I was wondering if it would be possible with plot.ly. Is it? is there an example I can have a look at?

Thanks

2

You can try something like: https://codepen.io/etpinard/pen/mmaNgN?editors=0010

3

Hi Etienne! This is great, thank you sooo much!

I’ve tried to make it work and everything seems fine however my text
doesn’t load correctly even though I have a litterarily identical heat map
where the text loads just fine. Do you know why this happens? Is it due to
this double axis setting?

This is the “broken” chart: http://jsfiddle.net/u27r8gq5/1/
While this is the one that loads the data fine but it’s not divided in two
colours: http://jsfiddle.net/7f8bhptm/

Thanks again for the help!

4

Your annotations have categorical x coordinates whereas your heatmap’s are numerical.

5

Hi, I’m really sorry for bothering, but I really can’t seem to get it to
work…
I edited the chart, now I have all categorical axis. (see
http://jsfiddle.net/4918jpxa/)

However it still doesn’t render properly.

Thanks A LOT for the help, I really do appreciate it.

6

Ok, I figured that the X axis needs to have the same lenght of the Y axis. Now things are slightly better but I’m still missing something http://jsfiddle.net/4918jpxa/1/

7

It’s probably best to use a numerical x axis and ticktext and tickvals to avoid duplication which may lead to possible bugs for data like you have.

Here’s what I came up with: http://jsfiddle.net/4918jpxa/2/