Highcharts.js column chart labels and data not displaying properly after 60 columns

I recently integrated a highcharts column chart, it was working well until my data reached about 60 columns, when I reached 60 columns most of the labels and bars disappear. When I remove the scroll ability from the chart all labels and data show again.

Please see https://jsfiddle.net/essensebryant/bnh2z6k7/15/ for an illustration of the problem.

I’ve looked all over the documentation but could not find an easy fix.

var data = [];
for(let i = 0; i < 60; i++){


data.push({
    name: "name"+i,
    y: Math.floor(Math.random() * 100) + 1,
  });
}


Highcharts.chart("container", {
        chart: { 
            type: 'column', 
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format:'{point.y}',             },
            },
        },
        tooltip:{ enabled:false, },
        xAxis: {
        type: 'category',
        min: 0,
        max: 9,
        scrollbar: { 
          enabled: true,
        },
        },
        series: [{
            name: 'Data',
            colorByPoint: true,
            data: data,
        }],
         responsive: {
           rules: [
                { 
                    condition: {  
                        maxWidth: 1000,
                    },  
                    chartOptions: {
                        xAxis: {
                            min: 0,
                            max: 4,
                        },
                    },
                },
                { 
                    condition: {  
                        maxWidth: 600,
                    },  
                    chartOptions: {
                        xAxis: {
                            min: 0,
                            max: 2,
                        },
                    },
                },
                { 
                    condition: {  
                        maxWidth: 400,
                    },  
                    chartOptions: {
                        xAxis: {
                            min: 0,
                            max: 1,
                        },
                    },
                },
            ]
        }
    });

Answer

You have set xAxis type as category but categories are not defined in your config. Remove

 type: 'category'

from your config and it should work.

Advertisement

Answer