CODEWITHSUNDEEP
javascripthtmlcssgoogle-visualization
Bart Burg
Bart Burg

Reputation: 4924

Google Chart cannot color horizontal axis (hAxis)

Somehow I haven't been able to color the text of my horizontal axis. This is what I have set for options:

var options = {
    colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
    timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
            barLabelStyle: {  fontSize: 9 }  }
    hAxis: {
        textStyle:{color: '#FFF'}
    }
};

Screenshot:

Screenshot problem

Complete code:

var container = document.getElementById('timetracking_Dennis');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ '#5700', 'Vernieuwing wifi-netwerk', new Date(0,0,0,10,16,0), new Date(0,0,0,10,17,0) ],
    [ '#5704', 'Account Mike Hees', new Date(0,0,0,10,23,0), new Date(0,0,0,10,28,0) ],
    [ '#5798', 'Laptop Bas van der Beer traag', new Date(0,0,0,10,15,0), new Date(0,0,0,11,14,0) ],
    [ '#5832', 'Problemen iMac', new Date(0,0,0,11,24,0), new Date(0,0,0,11,25,0) ],
    [ '#5832', 'Problemen iMac', new Date(0,0,0,11,34,0), new Date(0,0,0,11,35,0) ],
    [ '#5856', 'Problemen iMac', new Date(0,0,0,17,28,0), new Date(0,0,0,18,0,0) ],
    [ '#5856', 'Internet Broekseweg', new Date(0,0,0,9,14,0), new Date(0,0,0,9,15,0) ],
    [ '#5856', 'Internet Broekseweg', new Date(0,0,0,9,0,0), new Date(0,0,0,10,0,0) ],
    [ '#5856', 'Internet Broekhovenseweg', new Date(0,0,0,16,2,0), new Date(0,0,0,16,12,0) ],
    [ '#5857', 'gebruiker Abdel issues met opstarten', new Date(0,0,0,11,37,0), new Date(0,0,0,11,38,0) ],
    [ '#5895', 'Printer uit flexplek halen', new Date(0,0,0,11,9,0), new Date(0,0,0,11,17,0) ]    
  ]);

    var options = {
        colors: ['#B20054', '#993D69', '#BD00FF', '#FFFE40', '#CCB814', '#998F3D', '#40B2FF'],
        timeline: { colorByRowLabel: true, rowLabelStyle: { fontSize: 9, color: '#603913' },
                barLabelStyle: {  fontSize: 9 }  }
      };

  chart.draw(dataTable, options);

Upvotes: 5

Views: 774

Answers (2)

Bart van Nierop
Bart van Nierop

Reputation: 4350

There is a really dirty hack you can use to color the X-axis.

The timeline's svg contains a number of <text> elements. These include the numbers on the X-axis.

If you find the <svg> element of the chart, and assign that to a variable called svg, you can do the following hack:

svg.find('[font-size="13"]').attr('fill', '#ffffff');

assuming you want to color the X-axis white.

This only works in your particular case because you have changed the rowLabelStyle. By default, the row labels also have font-size="13".

Upvotes: 1

Action_Turtle
Action_Turtle

Reputation: 180

Looks like you cannot style that the axis on Timeline charts... which is very odd.

This has all your options: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline

If you compare to this charts options, you can see how its lacking good axis support: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

You might be able to change the JS to support what you want to do, but could be more trouble than its worth.

Have you tried targeting it via css? Might be a quick fix

Upvotes: 1

Related Questions