Changing bar color/stroke in Google Visualization Timeline

Question

I'm trying to change the border of each bar so that it visible. I'm using { type: 'string', id: 'style', role: 'style' } to customize the style of each bar.

I have been able to update the bar color (ex: color: lightyellow;) but can't sort out how to change the border/stroke. I tried adding this into the style but it doesn't work, stroke: rgb(0, 0, 0);)

Does anyone know how I can update the border?

Thanks as always!

  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', "color: lightyellow; stroke: rgb(0, 0, 0);", new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', "color: lightgreen; stroke: rgb(0, 0, 0);", new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', "color: lightblue; stroke: rgb(0, 0, 0);", new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.6" style="height: 150px;"></div>

Answer 1

use stroke-color

"color: lightyellow; stroke-color: rgb(0, 0, 0);"

you can find the available properties on the column roles reference page...

google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', "color: lightyellow; stroke-color: rgb(0, 0, 0);", new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', "color: lightgreen; stroke-color: rgb(0, 0, 0);", new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', "color: lightblue; stroke-color: rgb(0, 0, 0);", new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.6" style="height: 150px;"></div>