Hightcharts - Not showing column datalabels when c

2019-08-27 20:26发布

Below is the code fiddle to display highchart. It doesn't show datalabels when chart type is column. when it is 'bar' it shows datalabels.

http://jsfiddle.net/LuxRK/embedded/result/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Nominated', 'Approved','Rejected', 'Pending']

        },
        yAxis: {
            labels:
            {
                enabled:false
            }

        },

        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },


        series: [{
            name: 'Employment',
            data: [107, 31, 635, 203]
        }, {
            name: 'Internship',
            data: [973, 914, 4054, 732]
        }]
    });
});

Is there anything which I am missing?

标签: highcharts
1条回答
唯我独甜
2楼-- · 2019-08-27 21:11

yes when you change the type from 'bar' to 'column', the same has to be done in plotOptions also change 'bar' to 'column' as shown below

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Historic World Population by Region'
            },
            subtitle: {
                text: 'Source: Wikipedia.org'
            },
            xAxis: {
                categories: ['Nominated', 'Approved','Rejected', 'Pending']

            },
            yAxis: {
                labels:
                {
                    enabled:false
                }

            },

            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },


            series: [{
                name: 'Employment',
                data: [107, 31, 635, 203]
            }, {
                name: 'Internship',
                data: [973, 914, 4054, 732]
            }]
        });
    });

updated your fiddle at http://jsfiddle.net/LuxRK/1/

查看更多
登录 后发表回答