Timeline - How to Control Width of Row Label.

Skip to first unread message


May 14, 2016, 2:56:15 PM5/14/16
to Google Visualization API
Questions regarding the row label text:

  1. How can I control the width of a row label in a Timeline chart?  
  2. How can I wrap the text?
  3. 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:

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['timeline'] });
        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' });

                               ['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)]
    <div id="timeline" style="height: 580px;"></div>

Any assistance very much appreciated.  


Jun 6, 2016, 2: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

Jun 21, 2017, 10:12:34 AM6/21/17
to Google Visualization API
Hola, encontraste alguna solución?


Jordan M

May 25, 2018, 9: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

Jun 22, 2018, 1:17:00 PM6/22/18
to Google Visualization API
Any update?

Ryan Beatty

Oct 4, 2018, 1:08:29 PM10/4/18
to Google Visualization API
Bump. Is there support for this, or has someone found a workaround?

Deepika Musini

Nov 6, 2018, 10: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

Jan 15, 2019, 3:01:38 PM1/15/19
to Google Visualization API
I am facing the same issue. Really need this feature.

Dominik Leszczyszyn

Mar 4, 2019, 5:25:16 AM3/4/19
to Google Visualization API
I have this same problem. did anyone find a solution?

Tzvi Berg

Jun 6, 2019, 2:25:28 AM6/6/19
to Google Visualization API
?Is there any solution for this problem

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

Ray Thomas

Jun 7, 2019, 12:53:42 PM6/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

Sep 20, 2021, 11: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

May 29, 2024, 8: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
0 new messages