'Highchart yaxis categories crowded

I have a highchart heatmap with categories. Since there are numerous categories the map looks crowded. Even though I enabled y-axis scrolling the pixel per category is too less and the map is practically un-usable. Could someone please tell me how to scale the y-axis so that each category gets a definite height and is properly visible ?

https://jsfiddle.net/Lxw7gtas/

Highcharts.chart('container', {

    data: {
        rows: [["Sun, 07 Nov 2010 00:00:00 GMT", 0.0, 0],...],
        seriesMapping: [{x: 0, value: 1, y: 2}]
    },

    chart: {
        type: 'heatmap'
    },
    title: {
        text: null
    },
    navigator: {
        enabled: true
    },
    rangeSelector: {
        enabled: true
    },
    boost: {
        useGPUTranslations: true
    },

    xAxis: {
        type: 'datetime',
        labels: {
            align: 'left',
            x: 5,
            y: 14,
            format: '{value:%B}' // long month
        },
        showLastLabel: false,
        tickLength: 16
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            
        },
        type: 'category',
        categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
        scrollbar: {
            enabled: true
        },

       
        tickInterval: 1,
        tickPixelInterval: 100,
     
    legend: {
        align: 'center',
        layout: 'horizontal',
        margin: 0,
        verticalAlign: 'top',
        floating: true,
        /* y: 25, */
        /* symbolHeight: 280 */
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a'],
            [1, '#c4463a']
        ],
     
        labels: {
            format: '{value}'
        }
    },

    series: [{
        boostThreshold: 100,
        borderWidth: 10,
        nullColor: '#EFEFEF',
      
        
        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
    }],
    plotOptions: {
        series: {
            dataLabels: {
                overflow: 'none',
                crop: true,
            }
        }
    }

}});

Please see the picture enter image description here

I want to increase spacing between categories enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source