pwagner pwagner - 1 month ago 7
Javascript Question

How can I show specific years in Google Timeline Chart?

Using react-google-charts, I would like to specify which years should be displayed on the horizontal axis of a Google Timeline Chart. The screenshot shows an example that uses automatically generated values, based on the given time range of the rows.

The example uses the following data:

[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]

Timeline Chart Example with automatically generated years on horizontal axis

I already tried the following options with no joy:

hAxis: {
title: 'Year',
minValue: new Date(1785, 3, 15),
maxValue: new Date(1825, 3, 15),
ticks: [
{ v: new Date(1792, 3, 15), f: '1792' },
{ v: new Date(1818, 3, 15), f: '1818' },
{ v: new Date(1824, 3, 15), f: '1824' }

I would expect to have the x-Axis labelled with "Years" and showing 1792, 1818 and 1824 instead of 1790 and 1800.
The minValue and maxValue options seem to get ignored, too.

According to the readme it should be working.

Is the problem related to the value being date-objects instead of integers?

Edit: Added a jsfiddle:
It is not using react-google-charts, but the problem remains the same: ticks (and title) options still have no effect. Interestingly, the minValue and maxValue options are taken into account though.
Is it possible at all to adapt the jsfiddle, in order to show the specified years on the horizontal axis?


i've found if the configuration option, or other feature, isn't listed on the guide for that particular chart,
the chart doesn't support it.

except for options added in more recent releases,
in which the guide for that chart hasn't been updated.

as such, the only hAxis options available on a Timeline chart are minValue and maxValue

made available with the October 2, 2015 release

-- Durations are now localized.
-- Now supports minValue and maxValue for the horizontal axis.