Attached is an image of the problem I'm currently having.

Attached is an example of the issue manually created with JSFiddle

https://jsfiddle.net/ekjrLsz2/

My goal is to have each of the blocks be next to each other without all the space in-between like the default demos for the heatmap show.

I can get it to work correctly if the data is going 1 by 1, for example; 1,2,3,4,5,6

But if the data is going 5,10,15,20, etc... then you get what you see in my attached image.

So to be more clear the X direction is going 1 by 1 in my demo image and shows without spacing, the Y direction however has the large spacing since the data does not have numbers 21,22,23,24 or the space inbetween every 5 so to speak.

Below is the code I use to generate the chart.

Highcharts.setOptions({
                lang: {
                    decimalPoint: '.',
                    thousandsSep: ','
                }
            });

            Highcharts.chart('heatmap-container', {
    
                chart: {
                    type: 'heatmap',
                    marginTop: 40,
                    marginBottom: 80,
                    plotBorderWidth: 1
                },
            
            
                title: {
                    text: 'Report Data'
                },
            
                xAxis: {
                    //categories: ['1%', '2%', '3%', '4%', '5%', '6%', '7%', '8%', '9%', '10%'],
                    title: {text:$('#x-values').val()},
                    //showEmpty:true,
                },
            
                yAxis: {
                    categories: ['5', '10', '15', '20', '25'],
                    title: {text:$('#y-values').val()},
                    reversed: false,
                    //visible: true,
                    //showEmpty:true,
                },
            
                 colorAxis: {
                  max: goodColorVal,
                  min: badColorVal,
                  reversed: false,
                  tickInterval: 1,
                    //min: -150,
                    //minColor: '#FFFFFF',
                    //maxColor: '#00FF00',//Highcharts.getOptions().colors[4]
                    stops: [
                      [0.0,'#FF0000'],
                      [0.5,'#FFFFFF'],
                      [1.0,"#00FF00"]]
                }, 
                legend: {
                    align: 'right',
                    layout: 'vertical',
                    margin: 0,
                    verticalAlign: 'top',
                    y: 25,
                    symbolHeight: 280,
                    reversed:true
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: `<b style="text-transform:capitalize;">${$("#x-values option:selected").text()}</b>:{point.x:,.2f} - <b style="text-transform:capitalize;">${$("#y-values option:selected").text()}</b>:{point.y:,.2f} - <b style="text-transform:capitalize;">${$("#z-values option:selected").text()}</b>:{point.value:,.2f}`
                    // formatter: function () {
                    //     return '<b>'   getPointCategoryName(this.point, 'x')   '</b> sold <br><b>'  
                    //         this.point.value   '</b> items on <br><b>'   getPointCategoryName(this.point, 'y')   '</b>';
                    // }
                },
                series: [{
                    name: 'Report Data For Input 1',
                    borderWidth: 1,
                    //data: [[0, 0, 10], [0, 1, 19], [0, 2, 9], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
                    data: arraydata, //[[0,0,-87],[1,0,22],[2,0,33],[3,0,55]],
                    dataLabels: {
                        enabled: false,
                        color: '#000000'
                    }
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            yAxis: {
                                labels: {
                                    formatter: function () {
                                        return this.value.charAt(0);
                                    }
                                }
                            }
                        }
                    }]
                }
            
            });

I have tried pointInterval and tickInterval with no luck so far.

CodePudding user response：

The simplest way to have your points next to each other (without any spaces) is to give them x attributes without skipping any number, e.g 1,2,3,4... Why don't you try to do it this way?

Demo:

https://jsfiddle.net/BlackLabel/39vx468s/

To skip the empty spaces between points you can use breaks functionality.

API references:

https://api.highcharts.com/highcharts/xAxis.breaks

Demo:

https://jsfiddle.net/BlackLabel/et4kryvz/

xAxis: {
 breaks: [{
  from: 0.5,
  to: 1.5,
  breakSize: 0
 }]
}