Labels on bar chart missing

吃可爱长大的小学妹 提交于 2019-12-25 07:00:57

问题


How do I go about ensuring that all of the labels for the bars are visible? This chart is showing every other label. Notice as well, that the numeric labels are missing on every other bar as well. Is this a font size issue, or something else?

http://jsfiddle.net/brookssh/a0xdsc3q/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "chartContainer",
        defaultSeriesType: 'bar',
        height: 595
    },
    title: {
        text: '18 York Street Consumption (RankIt)',
        style: {
            color: '#484a4a',
            fontSize: '22px',
            fontFamily: 'Arial, Helvetica, sans-serif',
            fontWeight: 'bold'
        }
    },
    subtitle: {
        text: 'Saturday, August 15 2015 through Sunday, August 16 2015'
    },
    credits: {
        enabled: false
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: "Test",
            style: {
                color: '#0063A2',
                fontFamily: 'Arial, Helvetica, sans-serif',
                fontWeight: 'bold'
            }
        },
        plotLines: [{
            color: 'red', // Color value                            
            value: null, // Value of where the line will appear
            width: 2 // Width of the line    
        }],
        min: 0
    },
    xAxis: [{
        categories: ['9th Floor Total kWh', '9th Floor', '8th Floor Lighting Total kWh', '8th Floor', '7th Floor Lighting Total kWh', '7th Floor', '6th Floor Total kWh', '5th Floor Total kWh', '5th Floor', '4th Floor Total kWh', '4th Floor', '3rd Floor Total kWh', '3rd Floor', '26th Floor Total kWh', '26th Floor', '25th Floor Total kWh', '25th Floor', '24th Floor Total kWh', '24th Floor', '23rd Floor Total kWh', '23rd Floor', '22nd Floor Total kWh', '22nd Floor', '21st Floor Total kWh', '21st Floor', '20th Floor Total kWh', '20th Floor', '19th Floor Total kWh', '19th Floor', '18th Floor Total kWh', '18th Floor', '17th Floor Total kWh', '17th Floor', '16th Floor Total kWh', '16th Floor', '15th Floor Total kWh', '15th Floor', '14th Floor Total kWh', '14th Floor', '13th Floor Total kWh', '13th Floor', '12th Floor Total kWh', '12th Floor', '11th Floor Total kWh', '11th Floor', '10th Floor Total kWh', '10th Floor'],
        title: {

        },
        type: 'category',
        plotBands: [{
            color: '#DDECFF',
            from: 1439571600000,
            to: 1439744400000
        }],
        plotLines: [{
            color: 'grey', // Color value                            
            dashStyle: "dash",
            value: null, // Value of where the line will appear
            width: 0 // Width of the line    
        }],
    }, {
        labels: {
            rotation: -45,
            enabled: false
        },
        lineWidth: 0,
    }],
    exporting: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            colorByPoint: true
        },
        spline: {
            enableMouseTracking: true,
            animation: {
                duration: 1500
            },
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 5,
                        lineWidth: 1
                    }
                }
            }
        }

    },
    tooltip: {
        yDecimals: 2,
        formatter: function () {
            return tooltipFormat(this.x, null, this.y, yAxisTitle);
        }
    },
    series: [{
        data: [157, 169, 159, 173, 194, 203, 178, 144, 155, 411, 421, 275, 288, 266, 400, 214, 225, 142, 158, 112, 124, 114, 130, 112, 127, 134, 150, 107, 124, 143, 158, 85, 103, 99, 123, 174, 191, 327, 365, 221, 237, 241, 255, 310, 370, 133, 145],
        dataLabels: {
            enabled: true,
            color: '#000',
            style: {
                fontSize: '10px',
                verticalAlign: 'middle'
            }
        }
    }]

});

回答1:


You can use allowOverlap attribute of plotOptions.series.dataLabels to force the display of each labels :

 plotOptions: {
          series: {
              colorByPoint: true,
              dataLabels: {
                  allowOverlap: true
              }
          },
          /* ... */
}

See your working JSFiddle here.



来源:https://stackoverflow.com/questions/32181870/labels-on-bar-chart-missing

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!