CODEWITHSUNDEEP
javascriptgoogle-visualization
Gefferey Zhang
Gefferey Zhang

Reputation: 95

google bar/column chart set proper label width and chartarea width

i am using google chart to render charts, but sometimes the label is too long that the chart gets chopped, sometimes the chart is so long that the label gets cutting off, please check jsfiddle to see.

google.load('visualization', '1', {packages: ['corechart']});
var graphTitle = '', dataPoints = [];

function drawVisualization() {  
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Option', 'Percent'],
        ['More than 75%', 47],
        ['50% to 74%', 36],
        ['30% to 49%', 10],
        ['10% to 29%', 4],
        ['Less than 10%', 3]      
    ]);

    $('body').data('quickpoll_179', data);

    // Create and draw the visualization.
    new google.visualization.BarChart(document.getElementById('quickpollChart')).
    draw(data, {
        title:'',
        titleTextStyle: {color: '#000000'},
        width:640, height:340,
        legend: {position:'none'},
        vAxis: {title: ""},
        hAxis: {title: "",format:"#'%'"},
        colors: ['#74317D'],
        chartArea: {left:80.6,top:20, width:539.4,height:"340px"}
    });
}

google.setOnLoadCallback(drawVisualization);

my question is how can i calc the proper width so if the chart is large, i can increase the whole container size and stop chart and lable being cutting off. i know for this case, i can increase the chart area, but it may not be applicable in every curcumstances. so it is better that i know how much space the google chart will take so i can dymaically resize the width and height of the container

Upvotes: 2

Views: 5670

Answers (1)

Ashley Medway
Ashley Medway

Reputation: 7301

I would say just decrease the size of the font, This is the default behaviour for a Google chart you cannot work with everything, what if the label was 1000 characters long. Then you would want the ellipse, you can still hover over the label to see the full text.

See updated fiddle: http://jsfiddle.net/9J4sS/1/

I achieved this by lowering the size of the text.

vAxis: {
  title: "",
  textStyle: {
    fontSize:8
  }
}

Or alternatively display your labels inside your graph using. http://jsfiddle.net/9J4sS/2/

vAxis: {
  title: "",
  textPosition: "in"
}

Upvotes: 4

Related Questions