CODEWITHSUNDEEP
javascriptjqueryhighcharts
Snite
Snite

Reputation: 169

Highcharts : Disable top spacing from column graph

I get a problem with highchart, I want my graph to take the entire space according, but there is alway a space between the datas and the top of my div.

Here if my fiddle : http://jsfiddle.net/w2bz5/35/

Here is my javascript code : 

jQuery(function () {
    jQuery('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#3d3d3d',
                margin: [0, 0, 0, 0],
                width: 100,
                height: 100,
            },
            title: {
                text: null,
                margin: 0,
                floating: true,
                verticalAlign: 'bottom',
                x: 0,
                y: 0
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            yAxis: {
                title: {
                    text: null,
                    margin: 0
                },
                labels: {
                    enabled: false
                },
                gridLineWidth: 0,
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            },
            tooltip: {
                enabled: false
            },
            xAxis: {
                title: {
                    text: null
                },
                labels: {
                    enabled: false
                },
                gridLineWidth: 0,
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                data: [1298],
                color: '#00FF00',
                borderColor: null
            }, {
                data:[4302],
                color: '#FF0000',
                borderColor: null
            }]
        });
    });

Thanks in advance !

Snite

Upvotes: 0

Views: 2897

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can also set maxPadding nad spacingTop as 0, then set max value.

http://jsfiddle.net/sbochan/w2bz5/37/

Upvotes: 1

mcriecken
mcriecken

Reputation: 3297

You'll want to set stacking to percent, rather than normal. 

plotOptions: {
    column: {
       stacking: 'percent',
       dataLabels: {
          enabled: false
       }
    }
},

Documentation: High Charts Documentation

Normal stacking assumes there will be various values for each column, which would mean you would have different sizes of columns--that's why it leaves the space at the top. Setting it to percent would mean every column would be the same height regardless of the values it contains.

On a side note, the export button is going to be in the way of the graph if you intend on keeping them this small. You can remove it by adding this to your list of options.

exporting: {
    enabled: false  
}

Fiddle Link

Upvotes: 4

Related Questions