Y Axis and Legend not displayed when conatiner DIV element style has display non and then changed to block.

17 views

Skip to first unread message

Tim Hogan

unread,

Feb 20, 2019, 12:58:28 PM2/20/19

to Google Visualization API

I have found a small problem with a line chart and the container DIV.

Originally the code would change the display style of the chart container DIV to ‘none’, so not to display, then get the data, plot the chart and change the style display back to ‘block’.

If the container div style is set to display ‘none’ when the chart is drawn it misses data on the legend and y axis labels.

I have fixed this by changing the style display to block before the chart has drawn.

So just curious on why when the chart is drawn with whilst container display is set to ‘none’ why this might occur.

The following test code exhibits this problem:

<!DOCTYPE html>

<html>

<head>

<title>Test chart</title>

google.charts.load('current', {'packages':['corechart']});

function drawChart() {

var d = [["X", "Y"], [0, 10], [1, 20], [2, 25]];

var data = google.visualization.arrayToDataTable(d);

var options = {

title: 'Test chart',

curveType: 'function',

height: 600,

width: 1100,

legend: { position: 'bottom', textStyle: { color: '#202020', fontSize: 12} }

};

var chart = new google.visualization.LineChart(document.getElementById('chart'));

chart.draw(data, options);

document.getElementById('chart').style.display = 'block';

}

</script>

<style>

body {margin: 10px;}

#chart {display: none;}

</style>

</head>

</body>

</html>

Reply all

Reply to author

Forward

0 new messages