Timeline - How to Control Width of Row Label.

WebFOCUS Guy

unread,

May 14, 2016, 1:56:15 PM5/14/16

to Google Visualization API

Questions regarding the row label text:

How can I control the width of a row label in a Timeline chart?
How can I wrap the text?
How can I insert line breaks?

In the image below you see the API cuts off the row label, and inserts an '...', for a very long label. The tool tip is able to display the label without the cutoff.

I do not want the 'auto' cutoff feature, as my requirement is to show the entire label.

Here is the code:

<html>

<head>

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var container = document.getElementById('timeline');

var chart = new google.visualization.Timeline(container);

var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'Key' });

dataTable.addColumn({ type: 'date', id: 'Start' });

dataTable.addColumn({ type: 'date', id: 'End' });

dataTable.addRows([

['A very very very very very very very very very very very long row label', new Date(2003, 2, 4), new Date(2016, 04, 30)]

]);

chart.draw(dataTable);

}

</script>

</head>

<body>

</body>

</html>

Any assistance very much appreciated.

WebFOCUS Guy

unread,

Jun 6, 2016, 1:30:44 PM6/6/16

to Google Visualization API

Thought I'd 'bump' this thread.

I realize that a user request for a 'long label' is unreasonable, except in those cases where it isn't. :-)

Carlos Rolando Jordán Ramos

unread,

Jun 21, 2017, 9:12:34 AM6/21/17

to Google Visualization API

Hola, encontraste alguna solución?

Saludos

Jordan M

unread,

May 25, 2018, 8:37:59 AM5/25/18

to Google Visualization API

Bumping for visibility - Same issue here. My row labels only fit 2-3 letters of the end of the label, but will sometimes display the whole label. Seems completely random.

Andres Soto

unread,

Jun 22, 2018, 12:17:00 PM6/22/18

to Google Visualization API

Any update?

Ryan Beatty

unread,

Oct 4, 2018, 12:08:29 PM10/4/18

to Google Visualization API

Bump. Is there support for this, or has someone found a workaround?

Deepika Musini

unread,

Nov 6, 2018, 9:09:10 AM11/6/18

to Google Visualization API

ciao my name is deepika even i am facing the same situation in my webpage . the row label is cutoff on the webpage . can you give me any solutions for this problem

Tammy Osborn

unread,

Jan 15, 2019, 2:01:38 PM1/15/19

to Google Visualization API

I am facing the same issue. Really need this feature.

Dominik Leszczyszyn

unread,

Mar 4, 2019, 4:25:16 AM3/4/19

to Google Visualization API

I have this same problem. did anyone find a solution?

Tzvi Berg

unread,

Jun 6, 2019, 1:25:28 AM6/6/19

to Google Visualization API

Hi

?Is there any solution for this problem

בתאריך יום שבת, 14 במאי 2016 בשעה 21:56:15 UTC+3, מאת WebFOCUS Guy:

Ray Thomas

unread,

Jun 7, 2019, 11:53:42 AM6/7/19

to Google Visualization API

I don't think there is. The column is "dumb" in that everything, HTML, escape codes, character codes and so on, are all treated as text, so there's no way to control it.

Requests to change this behavior have been made for years before this thread was started, for example on GitHub - https://github.com/google/google-visualization-issues/issues/690 but it must have a very low priority.

Until the behavior is changed it might be the best workaround is to do what the original poster hinted at; use some sort of shortened text for the row label and use the tooltip to hold the full text. The tooltips are fully formattable and can contain hundreds of characters.

Probably not the answer you're looking for and someone else might know a lot more about formatting the row labels than I've been able to find.

Jasmine Rajan

unread,

Sep 20, 2021, 10:29:35 AM9/20/21

to Google Visualization API

Hi I'm facing the same problem too, Is there a way to add a tooltip to the row label ?

Simon Kimbrell

unread,

May 29, 2024, 7:56:59 AMMay 29

to Google Visualization API

I'm still looking how to left align the labels which doesnt seem to be straightforward either - the only way i've found to work around it is to play with font sizes:

var options = {
tooltip: {isHtml: true},
timeline: {rowLabelStyle: {fontSize: 11},
barLabelStyle: {fontSize: 11} },
};

This works for 99% of my labels

Reply all

Reply to author

Forward