Remove borders and gridlines around google chart timeline

Question

I need to remove the border and the gridlines from the google charts timetable (see documentation)

Right now it looks like this: with borders
It should look like this: without borders

I made a stackblitz for it: https://stackblitz.com/edit/js-ozv5hr?file=index.html

It seems like the config options that you can use for example with line charts do not work with timelines.

Answer 1

there are no config options available for removing the borders,
but we can remove them manually on the chart's 'ready' event.

see following working snippet...

google.charts.load("current", {
  packages: ["timeline"]
}).then(function () {
  var container = document.getElementById("timeline");
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: "string", id: "Label" });
  dataTable.addColumn({ type: "string", id: "Type" });
  dataTable.addColumn({ type: "date", id: "Start" });
  dataTable.addColumn({ type: "date", id: "End" });
  dataTable.addRows([
    ["A", "A", new Date(2021, 0, 0, 0), new Date(2021, 0, 0, 1)],
    ["A", "B", new Date(2021, 0, 0, 1), new Date(2021, 0, 0, 2)],
    ["A", "C", new Date(2021, 0, 0, 2), new Date(2021, 0, 0, 3)]
  ]);

  var options = {
    timeline: {
      groupByRowLabel: true,
      showRowLabels: false,
      showBarLabels: false
    },
    avoidOverlappingGridLines: false,
    hAxis: {
      format: "HH:mm"
    },
    gridlines: {
      color: "none"
    }
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    // find <rect> elements
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect) {
      if (rect.getAttribute('stroke') === '#9a9a9a') {
        // remove border
        rect.setAttribute('stroke-width', '0');
      }
    });

    // find <path> elements
    var paths = container.getElementsByTagName('path');
    Array.prototype.forEach.call(paths, function(path) {
      if ((path.getAttribute('stroke') === '#ffffff') || (path.getAttribute('stroke') === '#e6e6e6')) {
        // remove border
        path.setAttribute('stroke-width', '0');
      }
    });
  });

  chart.draw(dataTable, options);
});

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