The data is not completely displayed in the stack bar Highcharts

107 views Asked by At

I have a problem with highcharts, The data is not completely displayed in the stack bar

    $(function () {

    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'percent',
                dataLabels: {

                        format : '{point.percentage:.2f}%',
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black'
                        }
                    }
            }
        },
        series: [{"name":"Noc Siklus 5","data":[0]},{"name":"Noc Siklus 4","data":[4503]},{"name":"Noc Siklus 3","data":[44114]},{"name":"Noc Siklus 2","data":[208034]},{"name":"Noc Siklus 1","data":[483951]}]
    });
});

I have created the jsfiddle :http://jsfiddle.net/RobbyWH/zr03ku76/6/

Please help me to solve this problem

Thank you very much

1

There are 1 answers

6
Jyoti Puri On BEST ANSWER

Check this fiddle: http://jsfiddle.net/vwmcuvwd/1/

Combination of these 3 properties can help you:

                    crop: false,
                    overflow: 'none',
                    allowOverlap: 'true'