Advice - Ranked Heatmap in R or Python or Highcharts

Question

So this is a bit of a open question and any feedback would be appreciated. Essentially, I want to create the below chart (possibly in highcharts, highcharter, python or just R). What is the name of this specific chart (ranked heatmap)

The issue I keep running into on each of my attempts is that there is no fixed y-axis. As the chart above shows, each year is ranked from best performing asset to worst with each asset having a specific colour.

I have tried to create a heatmap but due to the y-axis still being fixed, the ranked aspect does not work. Below is a draft version of what I tried to create in highcharter.

JS fiddle reference: https://www.highcharts.com/demo/heatmap

So pretty much, if someone can point me in the right direction or share their thoughts ito creating a chart like the first one that would be usefull

Thank you in advance.

Answer 1

You can simply calculate y value based on your data. Assuming that you have similar data format as below:

const columnsData = [{
    year: '2001',
    data: [{
        name: 'A',
        value: 55
    }, {
        name: 'B',
        value: 45
    }, ...]
}, {
    year: '2002',
    data: [...]
}, {
    year: '2003',
    data: [...]
}];

You can loop through data and build data structure required by Highcharts:

columnsData.forEach(column => {
    column.data.sort((a, b) => a.value - b.value);
    column.data.forEach((dataEl, index) => {
        processedData.push({
            name: column.year,
            y: index,
            value: dataEl.value,
            dataLabels: {
                format: dataEl.name + ': ' + dataEl.value
            }
        });
    });
});


Highcharts.chart('container', {
    ...,
    series: [{
        data: processedData,
        ...
    }]
});

---

Live demo: https://jsfiddle.net/BlackLabel/jkzsbv4c/

API Reference: https://api.highcharts.com/highcharts/series.heatmap.data