CODEWITHSUNDEEP
phpjavascriptchartsgoogle-visualization
Technoh
Technoh

Reputation: 1600

Remove blank space above and below Google Charts horizontal column chart

I am show graphs from Google Charts, using a horizontal column chart. I want to remove the blank space above and below the graph.

Here is the code called (some info removed due to NDA):

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        [null, "...","...","...","...","...","...","...","...","Total Average"],
        [null, 100,100,100,100,100,88.89,100,100,98.70]
    ]);

    var options = {
        height: 540,
        title: 'Title here',
        vAxis: { textPosition: 'none', viewWindowMode: 'maximized' },
        colors:["#0B0842","#ADAEAE","#BE3351","#498101","#0D80CA","#A3C116","#91A96B","#E8F72B","#424242"],
        hAxis: { textPosition: 'none', minValue: 0, maxValue: 100 },
        chartArea: { left: 0, width: "78%" },
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Sample graph

Upvotes: 1

Views: 2628

Answers (2)

Simon T Norris
Simon T Norris

Reputation: 11

Try this, it worked for me:

    var chart_height = data.getNumberOfRows() * 40;
    var options = {
        chartArea: {
            top: 0,
            left: '30%',
            width: '70%',
            bottom: 0
        },
        height: chart_height
    };

Upvotes: 0

asgallant
asgallant

Reputation: 26340

The space above and below the bars is normally there to separate bar groups when you have multiple rows of data. If you don't want that space, then you can set the bar.groupWidth option in your chart to a larger percentage (up to 100%; default is the golden ratio, roughly 61.8%):

var options = {
    height: 540,
    title: 'Title here',
    vAxis: { textPosition: 'none', viewWindowMode: 'maximized' },
    colors:["#0B0842","#ADAEAE","#BE3351","#498101","#0D80CA","#A3C116","#91A96B","#E8F72B","#424242"],
    hAxis: { textPosition: 'none', minValue: 0, maxValue: 100 },
    chartArea: { left: 0, width: "78%" },
    bar: {groupWidth: '100%'}
};

Upvotes: 2

Related Questions