HeatMap
X axis scrollbar - Y values Inverted chart
by amrutaJgtp
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<div id="container" style="max-height: 100px; max-width: 400px;"></div>JavaScript
$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
inverted: true,
scrollablePlotArea: {
minHeight: 200,
scrollPositionY: 1,
minWidth: 500,
scrollPositionX: 1
}
},
title: {
text: 'Heat map',
align: 'left'
},
xAxis: {
type: 'linear' //attribute not given in API
//has no effect when using CSV format
},
yAxis: {
title: {
text: null
},
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: -5
},
series: [{
borderWidth: 0,
data: [
[0, 0, 2.0],
[0, 1, -3.7],
[0, 2, 1.5],
[0, 3, -2.9],
[0, 4, 2.9],
[0, 5, 1.3],
[0, 6, 0.5],
[0, 7, -1.3],
[0, 8, 0.1],
[0, 9, 0.4],
[1, 0, -1.6],
[1, 1, 1.1],
[1, 2, -1.1],
[1, 3, 1.6],
[1, 4, 2.6],
[1, 5, 0.3],
[1, 6, -3.1],
[1, 7, 2.6],
[1, 8, 2.7],
[1, 9, -1.4],
[2, 0, -1.1],
[2, 1, 0.8],
[2, 2, 0.3],
[2, 3, 1.1],
[2, 4, 1.2],
[2, 5, 1.9],
[2, 6, 3.0],
[2, 7, 2.3],
[2, 8, -1.7],
[2, 9, 1.4],
[3, 0, -2.2],
[3, 1, 1.8],
[3, 2, -0.3],
[3, 3, 1.5],
[3, 4, 0.2],
[3, 5, 0.7],
[3, 6, -3.0],
[3, 7, 1.1],
[3, 8, 1.8],
[3, 9, -1.4],
[4, 0, 1.5],
[4, 1, 0.7],
[4, 2, 2.3],
[4, 3, 0.1],
[4, 4, 2.2],
[4, 5, 2.9],
[4, 6, -2.0],
[4, 7, 1.1],
[4, 8, 1.0],
[4, 9, -1.5],
[5, 0, 1.1],
[5, 1, 0.9],
[5, 2, -1.4],
[5, 3, 2.7],
[5, 4, 1.6],
[5, 5, -1.9],
[5, 6, 2.2],
[5, 7, 0.1],
[5, 8, -1.0],
[5, 9, 1.8],
[6, 0, -1.1],
[6,...