Highchart reduce gap size in heatmap and data missing - heatmap

Question

Somehow the gap is not reduced, as shown in the picture below:
I am using a Highcharts Heatmap. Please help me to reduce the gap between the intervals and the line should be closer. When we increase the data, some data is not showing on the graph and they are skipped. The data seems to be missing somewhere.
Highcharts
.stockChart(
'container',
{
chart : {
type : 'heatmap',
marginTop : 40,
height : 500,
width : 900,
panning : true,
followTouchMove : true,
pinchType : 0,
followPointer : true,
inverted : true,
},
data : {
csv : data,
},
navigator : {
top : 40,
},
rangeSelector : {
buttons : [ {
count : 1,
type : 'minute',
text : '1M'
}, {
count : 5,
type : 'minute',
text : '5M'
}, {
type : 'all',
text : 'All'
} ],
inputEnabled : false,
enabled : false,
selected : 0
},
title : {
text : 'Live random data'
},
exporting : {
enabled : true,
buttons : {
contextButton : {
menuItems : [
{
textKey : 'viewData',
onclick : function() {
this.viewData();
$('#pausereset')
.toggleClass(
'optionsettable');
}
},
{
separator : true
},
{
textKey : 'downloadPNG',
onclick : function() {
var title = this.title.textStr;
this.exportChart({
type : 'image/png',
filename : title
});
}
},
{
textKey : 'downloadJPEG',
onclick : function() {
var title = this.title.textStr;
this
.exportChart({
type : 'image/jpeg',
filename : title
});
}
},
{
textKey : 'downloadPDF',
onclick : function() {
var title = this.title.textStr;
this
.exportChart({
type : 'application/pdf',
filename : title
});
}
},
{
textKey : 'downloadSVG',
onclick : function() {
var title = this.title.textStr;
this
.exportChart({
type : 'image/svg+xml',
filename : title
});
}
} ]
}
}
},
yAxis : {
scrollbar : {
enabled : true,
showFull : true
},
title : {
text : null
},
labels : {
format : '{value}:00'
},
/* minPadding : 50,
maxPadding : 20, */
/* tickPositions : [ 0, 6, 12, 18, 24 ], */
tickWidth : 0.5,
/* min : 0,
max : 33 */
},
xAxis : {
reversed : true,
scrollbar : {
enabled : true,
showFull : true
},
tickPixelInterval : 0.5,
},
plotOptions : {
dataLabels : {
enabled : true
},
heatmap : {
allowPointSelect : true
},
series : {
pointPadding : 0,
groupPadding : 0.1,
}
},
colorAxis : {
stops : [ [ 0, '#84D984' ], [ 0.5, '#127B12' ],
[ 0.9, '#005500' ] ],
min : -5
},
series : [ {
type : 'heatmap',
name : 'Random data',
borderWidth : 0,
showInNavigator : true,
turboThreshold : 0,
cropThreshold : 300,
/* colsize : 0.1 * 36e5, */
pointPadding : 0,
colsize : 0.1 * 36e5,
rowsize : 1,
tooltip : {
headerFormat : 'Temperature<br/>',
pointFormat : '{point.x: %H}:{point.x: %m} - {point.y}:00: <b>{point.value} ℃</b>'
},
} ]
});
Here is the jsfiddle link

Answer 1

You just need to increase the series.colsize value. In this case, you can set it equal to one hour interval, just like that:
series: [{
type:'heatmap',
borderWidth: 0,
pointWidth: '100%',
colsize: 36e5, // one hour
tooltip: {
headerFormat: 'Temperature<br/>',
pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
}
}]
Live example: http://jsfiddle.net/zpvdweab/1/