Fixed font colour for Bar Label in Timeline charts

29 views
Skip to first unread message

Sourav Dwivedi

unread,
Nov 17, 2022, 7:46:00 AM11/17/22
to Google Visualization API
I am trying to give default font color to bar labels for Timeline chart. 
But according to documentation it has only fontName & fontSize: 
barLabelStyle: { fontName: 'Garamond', fontSize: 14 } 


options={{
allowHtml: true,
tooltip: { isHtml: true },
timeline: {
colorByRowLabel: false,
bar: { groupWidth: '10px' },
barLabelStyle: { fontSize: 12, color: '#fff' },
showRowLabels: false
},
hAxis: {
format: 'h a'
}
}}

Can anyone provide suggestion for correct approach ? 

SJW

unread,
Nov 22, 2022, 12:06:41 AM11/22/22
to Google Visualization API
'colors' is the config option you need: an array of colours for each range

options={{
  allowHtml: true,
  colors: ['green','purple'],
  tooltip: { isHtml: true },
  timeline: {
    colorByRowLabel: false,
    bar: { groupWidth: '10px' },
    barLabelStyle: { fontSize: 12, color: '#fff' },
    showRowLabels: false
  },
  hAxis: {
    format: 'h a'
  }
}}

Or, you can apply colours in the actual chart dataset:

e.g.

var data = google.visualization.arrayToDataTable([ 
 ['Element', 'Density', { role: 'style' }],
 ['Copper', 8.94, '#b87333'], // RGB value
 ['Silver', 10.49, 'silver'], // English color name
 ['Gold', 19.30, 'gold'],
 ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration 
]);

Reply all
Reply to author
Forward
0 new messages