javascript - Google Charts Timeline - Move DateYear to the Top of the Chart? - Stack Overflow

Here is a sample of a Google Superbowl Timeline:

Is there a way to move the Date/Year to the top of the Timeline Chart?

Alternatively, are there any other Timeline Charts that would provide additional customization?

Here is a sample of a Google Superbowl Timeline:

https://developers.google./chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation

Is there a way to move the Date/Year to the top of the Timeline Chart?

Alternatively, are there any other Timeline Charts that would provide additional customization?

• javascript
• charts
• google-visualization

Share Improve this question Follow asked May 19, 2016 at 16:21 WayBehindWayBehind 1,69733 gold badges4141 silver badges6161 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I haven't find any Google option, but I did this with SVG transformation

https://jsfiddle/d1x5hyes/1/

function afterDraw() {
    var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
    document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
    document.getElementsByTagName("svg")[0].style.overflow = 'visible';
    var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
    g.setAttribute('transform','translate(0,-'+height+')');
    g = null;
}

Building on @shoggs answer, here is how to move the labels to the top on a Google Gantt chart, while preserving the formatting of the rows.

let labels = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1].getElementsByTagName("text")
document.getElementsByTagName("svg")[0].style.overflow = 'visible'
for (var i=0; i < labels.length; i++) {
    labels[i].setAttribute("y", -15)                                                                                                
}