Highcharts columns are thin when 10+ series displa

2019-08-23 04:50发布

问题:

I faced an issue very similar to this one, but with categorized axis. The problem is that if I add too many series on the plot (more than 10 series) the columns become too thin and almost invisible even though there is enough place for them. Here is how the chart looks like when I have 12 series(11 for bars + 1 for line): The same behaviour appears when I have 11 or 10 series, but when I reduce number of series to 9 (8 for bars + 1 for line) the chart looks absolutely normal:

However when I try recreating this bug with jsfiddle and the same highcharts version (5.0.8) I get absolutely correct behavior no matter how many series I use.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
    endOnTick: false,
                startOnTick: false,
    title: {
                    text: 'xAxisLabel'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                },
        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","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69"],
                type: 'category'
    },
    yAxis: [                {
                    title: {
                        text: 'SOme'
                    },
                    gridLineWidth: 0
                },
                {
                    title: {
                        text: 'text2'
                    },
                    opposite: true,
                    min: 0,
                    gridLineWidth: 0
                }],
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            stacking: 'normal',
//turboThreshold: 5000,
grouping: false,
                    groupPadding: 0,
                    pointPadding: 0,
                    borderWidth: 0,
                    shadow: false,
                    stickyTracking: false,
                    pointPlacement: 'on',
                    marker: {
                        enabled: false
                    }
        }
    },
    series:[{"name":"Brain Ischemia","data":[[32,1]],"color":"#CC6677","events":{}},{"name":"Cerebral Ischemia","data":[[6,1],[10,1]],"color":"#332288","events":{}},{"name":"Cerebrovascular Ischemia","data":[[32,1]],"color":"#999933","events":{}},{"name":"Focal Brain Ischemia","data":[[16,1]],"color":"#882255","events":{}},{"name":"Ischemia","data":[[8,1]],"color":"#44AA99","events":{}},{"name":"Non-ST Elevation Myocardial Infarction (NSTEMI)","data":[[1,1],[10,1]],"color":"#DDCC77","events":{}},{"name":"Not Confirmed","data":[[5,1]],"color":"#6699CC","events":{}},{"name":"Other","data":[[2,1],[6,1],[69,1]],"color":"#AA4499","events":{}},{"name":"ST Elevation Myocardial Infarction (STEMI)","data":[[1,2]],"color":"#4477AA","events":{}},{"name":"Stable Angina","data":[[0,3],[1,1],[4,1],[8,1],[14,1],[16,1],[28,1],[32,1],[36,1]],"color":"#88CCEE","events":{}},{"name":"Unstable Angina","data":[[1,2],[2,2],[5,1],[11,1],[12,1]],"color":"#117733","events":{}},{"name":"SUBJECTS","data":[[0,124],[1,124],[2,122],[3,122],[4,121],[5,121],[6,120],[7,118],[8,117],[9,116],[10,115],[11,114],[12,111],[13,110],[14,108],[15,106],[16,103],[17,102],[18,102],[19,100],[20,98],[21,98],[22,97],[23,96],[24,96],[25,96],[26,95],[27,95],[28,95],[29,93],[30,93],[31,93],[32,92],[33,91],[34,90],[35,89],[36,87],[37,86],[38,85],[39,84],[40,82],[41,81],[42,80],[43,80],[44,80],[45,80],[46,79],[47,77],[48,77],[49,77],[50,77],[51,77],[52,75],[53,73],[54,73],[55,71],[56,69],[57,69],[58,68],[59,67],[60,67],[61,67],[62,67],[63,67],[64,67],[65,67],[66,67],[67,66],[68,66],[69,66]],"color":"#000000","type":"line","yAxis":1,"dashStyle":"ShortDot","marker":{"enabled":false},"lineWidth":1,"pointPlacement":null,"stickyTracking":false}]
});
<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>
<script src="https://code.highcharts.com/5.0.8/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

回答1:

It is caused by boost module, more specifically by boost.seriesThreshold property. It tells when the boost should kick in globally (see the source, https://code.highcharts.com/modules/boost.src.js). So, it has nothing to do with the version, simply before (until v5.0.12) seriesThreshold property was set to 10 by default (now it is 50).

Example:
http://jsfiddle.net/p6afwkb3/



回答2:

Already answered similar question here, so this one should be fairly similar. Stupid problem - an outdated highcharts library.

The problem didn't reproduced in jsfiddle, because I didn't included all modules that I have locally of particular version.