Remove border from google timeline chart

Question

I need to remove the chart border from timeline google chart. The script is the following:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    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: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.4" style="height: 150px;"></div>

I need to change from: enter image description here to: enter image description here

Someone can help me? Many thanks!!!

Answer 1

no config option exists,
but we can manually change the chart's svg,
on the chart's 'ready' event.

here, we find the chart <rect> element,
and remove the stroke...

google.visualization.events.addListener(chart, 'ready', function () {
  var rects = container.getElementsByTagName('rect');
  Array.prototype.forEach.call(rects, function(rect) {
    // find chart <rect> element
    if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
      // remove stroke from last <rect> element
      rect.setAttribute('stroke', 'none');
      rect.setAttribute('stroke-width', '0');
    }
  });
});

see following working snippet...

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

function drawChart() {
  var container = document.getElementById('example5.4');
  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: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
    [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

  var options = {
    backgroundColor: {
      //fill: 'red',
      stroke: 'red'
    },
    colors: ['#cbb69d', '#603913', '#c69c6e'],
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect) {
      // find chart <rect> element
      if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
        // remove stroke from last <rect> element
        rect.setAttribute('stroke', 'none');
        rect.setAttribute('stroke-width', '0');
      }
    });
  });

  chart.draw(dataTable, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.4"></div>