CODEWITHSUNDEEP
javascriptgoogle-visualizationtimeline
Jonathan Chiou
Jonathan Chiou

Reputation: 359

Google Charts: Disable the black outline around a bar that appears when the bar is clicked

Whenever I click on a bar in Google timeline, a black outline will appear around it. I'd like to disable this behavior, and possibly disable all click interaction for a specific bar(s). How would I go about doing so?

Sample timeline to play around with to see what I mean (click on a bar): https://jsfiddle.net/qy1kk0sb/

Code for sample:

  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: 'President'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'Start'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'End'
    });
    dataTable.addRows([
      ['potato1', new Date(2000, 1, 1), new Date(2017, 2, 3)],
      ['potato2', new Date(2003, 5, 5), new Date(2016, 12, 31)],
      ['potato3', new Date(2007, 4, 2), new Date(2019, 3, 14)]
    ]);

    chart.draw(dataTable);
  }

Upvotes: 2

Views: 875

Answers (1)

Josh
Josh

Reputation: 251

I would think you could modify this with the chart options (see Google Charts Timeline documentation for other examples) but I can't say for sure. While that would be the ideal method, you can remove this focus indicator with CSS:

rect {
  stroke-width: 0;
}

Upvotes: 1

Related Questions