javascriptcsschartsgoogle-visualization

Google Charts Timeline - change hAxis text color

I am trying to customize the hAxis text color on a Timeline chart but I can't find the right parameter. Or if this is feasible with CSS, I'd be happy too.

I have tried textStyle: { color: 'white' } but this has no effect. Any idea?

body {
  background-color: #555;
}
<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('example');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
      type: 'string',
      id: 'Resource'
    });
    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([
      ['R1', 'Event 1', 'red', new Date('April 8, 2024 08:30:00'), new Date('April 8, 2024 09:30:00')],
      ['R1', 'Event 2', 'red', new Date('April 8, 2024 09:45:00'), new Date('April 8, 2024 10:15:00')]
    ]);

    chart.draw(dataTable, {
      hAxis: {
        textStyle: {
          color: 'white' // Does not work
        },
        format: 'HH:mm',
        minValue: new Date('April 8, 2024 07:30:00'),
        maxValue: new Date('April 8, 2024 18:30:00')
      }
    });
  }
</script>

<div id="example"></div>

Solution

  • you can use the following css selector
    note the use of fill for svg elements

    #example text[text-anchor="middle"] {
  fill: #ffffff;
}

    see following snippet...

    body {
  background-color: #555;
}

#example text[text-anchor="middle"] {
  fill: #ffffff;
}
    <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('example');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
      type: 'string',
      id: 'Resource'
    });
    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([
      ['R1', 'Event 1', 'red', new Date('April 8, 2024 08:30:00'), new Date('April 8, 2024 09:30:00')],
      ['R1', 'Event 2', 'red', new Date('April 8, 2024 09:45:00'), new Date('April 8, 2024 10:15:00')]
    ]);

    chart.draw(dataTable, {
      hAxis: {
        format: 'HH:mm',
        minValue: new Date('April 8, 2024 07:30:00'),
        maxValue: new Date('April 8, 2024 18:30:00')
      }
    });
  }
</script>

<div id="example"></div>