CODEWITHSUNDEEP
javascriptgoogle-apigoogle-visualization
Kuba Orlik
Kuba Orlik

Reputation: 3500

Google Chart Tools - overlapping labels

I'm using Google Chart Tools to display a simple line graph for unknown reason the labels overlap no matter how I set the "legend" parameters. In the screenshot below you can see the result for legend: {position: 'in', alignment:'center'}. How to work around this?The labels are overlapping

Upvotes: 6

Views: 5872

Answers (3)

Kiran Reddy
Kiran Reddy

Reputation: 764

I was rendering graphs on a popup, labels were overlapping. I tried executing the rendering in $(document).ready() as well as $(window).load() - nothing worked out.

On a click event, the popup will appear.

$(document).ready(function()
{
    $('.view_graphs').click(function(){
        setTimeout(function(){
            renderGraph();
        },500)
    })
})

function renderGraph() {
    google.charts.setOnLoadCallback(column_chart);
    function column_chart() {
        var data = new google.visualization.arrayToDataTable(<?php echo $visitlang_json_data ?>); 
        var chart = new google.visualization.ColumnChart(document.getElementById('visit_lang_chart'));
        var options = {'title':'Report based on language',
                         'width':600,
                         'height':500
                     };
        chart.draw(data,options);
    }
}

Rendering it on a setTimeout function on click event worked for me

Upvotes: 0

Mike Wright
Mike Wright

Reputation: 111

I had a chart loading near the bottom of a pretty complex page and this issue started. I decided to execute the creation of the chart after the page had loaded to give the parent div time to render. $(document).ready(function(){ makeChart(data); }) And the css for the parent div had a fixed height & width.

Hope this helps!

Upvotes: 1

clintgh
clintgh

Reputation: 2077

"..when people generally complain about labels overlapping, that's due to attempting to draw in an invisible container. We currently do not support this, so you need to make sure that your container is not display:none when you draw the chart." - Sergey

Link: https://groups.google.com/forum/#!topic/google-visualization-api/c-KpZk--8p0

Upvotes: 9

Related Questions