All geek questions in one place

Google Chart cannot iron horizontal axis (hAxis)

Somehow I was not able to color the text of my horizontal axis. This is what I set for the parameters:

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 issue

Full 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);
+5
source share
2 answers

There is a really dirty hack that can be used to paint the X axis.

The svg timeline contains several <text> elements. These include numbers on the X axis.

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

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

assuming you want to color the white x axis.

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

+1
source

It looks like you can't customize the style on the timeline charts ... which is very strange.

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

If you compare with these chart parameters, you will see how there is not enough support for a good axis: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

You may be able to modify JS to support what you want to do, but there may be more problems than its value.

Did you try to configure it using css? Quick fix

+1
source

Source: https://habr.com/ru/post/1233348/

More articles:


All Articles