JSFiddle - React, Tailwind, and code Playground

by jeffgw

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
    },
    title: {
        text: 'Corrolation Matrix'
    },

    xAxis: {
        categories:['SPY', 'SVXY', 'UVXY', 'VXX']

    },

    yAxis: {
        categories:['SPY', 'SVXY', 'UVXY', 'VXX']
,
        title: null
    },
		plotOptions: {
            series: {
                events: {
                    click: function (event) {
                        var str = event.point.series.yAxis.categories[event.point.y] + ',' +
                            event.point.series.xAxis.categories[event.point.x]
                        alert(str);
                    }
                }
            }
        },

    colorAxis: {
        min: -1,
        max:1,
        stops: [
            [0, '#3060cf'],
            [0.5, '#ffffbc'],
            [0.9, '#c4463a']
        ]
    },
		credits:{
    	enabled:false
    },
    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },
    series: [{
        name: 'Corrolation Matrix',
        borderWidth: 1,
        data:[[0, 0, 1.0], [0, 1, 0.94], [0, 2, -0.94], [0, 3, -0.94], [1, 0, 0.94], [1, 1, 1.0], [1, 2, -1.0], [1, 3, -1.0], [2, 0, -0.94], [2, 1, -1.0], [2, 2, 1.0], [2, 3, 1.0], [3, 0, -0.94], [3, 1, -1.0], [3, 2, 1.0], [3, 3, 1.0]],
        dataLabels: {
                enabled:true,
                padding: 5,
                shadow: true,
                style: {
                    fontWeight: 'bold'
                }
            }
    }]

});