CODEWITHSUNDEEP
chartsgoogle-visualization
memodba
memodba

Reputation: 66

google charts timeline : labels with return line

I use a google timeline charts to present some informations.
I want to have a line break in the label.
How can i do this?

in my example i have tried...

\n
<br>

without success...

code pen: https://codepen.io/zenitram2/pen/ExyraMB

And the detail:

  <h2> Timeline</h2>

<div id="timeline" class="th"></div>
    

  <script src='https://www.google.com/jsapi'></script>
  
      <script id="rendered-js" >
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: 'Room' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
  ['Magnolia \nRoom', 'CSS \nFundamentals', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 14, 0, 0)],
  ['Magnolia \nRoom', 'Intro <br>JavaScript', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
  ['Magnolia \nRoom', 'Advanced JavaScript', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 19, 0, 0)],
  ['Gladiolus Room', 'Intermediate Perl', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
  ['Gladiolus Room', 'Advanced Perl', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
  ['Gladiolus Room', 'Applied Perl', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
  ['Petunia Room', 'Google Charts', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
  ['Petunia Room', 'Closure', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
  ['Petunia Room', 'App Engine', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 30, 0)]]);

  var options = {
    timeline: { colorByRowLabel: true },
    backgroundColor: '#ffd',
    tooltip: { isHtml: 'true' } };


  chart.draw(dataTable, options);
}

    </script>

Upvotes: 3

Views: 369

Answers (1)

user3906878
user3906878

Reputation: 146

I'm able to make the tooltip show multiple lines by using the below css. Using \n and not <br> in the label.

.google-visualization-tooltip-item span {
    white-space: pre;
}

white-space: pre preserves newlines which is what you are wanting.

For the label on the row I've not been able to get this to work yet.

Upvotes: 0

Related Questions