Remove bold tick labels in Google Timeline chart

Question

In the following image:

12 AM / 12 PM / 12 AM is bold for the horizontal label. How do I make all of the labels non-bold? I didn't see an option in their documentation: https://developers.google.com/chart/interactive/docs/gallery/timeline.

Here is an example of it in jsfiddle: https://jsfiddle.net/0f86vLrg/:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>
  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 Room', 'Google Charts', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
      ['Magnolia Room', 'App Engine', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 16, 0, 0)]
    ]);

    var options = {
      timeline: {
        showRowLabels: false
      },
      avoidOverlappingGridLines: false
    };

    chart.draw(dataTable, options);
  }

This works for me: #timeline svg g text { font-weight: normal !important } — Chris G
@ChrisG ha -- what a great simple answer. That works fine, you can add it as an answer and I'll accept it. — David542

WhiteHat WhiteHat · Accepted Answer · 2018-09-26T22:08:16

as you've found, there are no timeline options for styling the x-axis labels.
but you can change them manually, on the chart's 'ready' event.

google.visualization.events.addListener(chart, 'ready', function () {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    label.setAttribute('font-weight', 'normal');
  });
});

see following working snippet...

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 Room', 'Google Charts', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
    ['Magnolia Room', 'App Engine', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 16, 0, 0)]
  ]);

  var options = {
    timeline: {
      showRowLabels: false
    },
    avoidOverlappingGridLines: false
  };

  google.visualization.events.addListener(chart, 'ready', function() {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      label.setAttribute('font-weight', 'normal');
    });
  });

  chart.draw(dataTable, options);
}

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

Remove bold tick labels in Google Timeline chart

1 Answers