How can I show specific years in Google Timeline Chart?

Question

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) ]
]

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: http://jsfiddle.net/s4zg7mxt/ 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?

Are you sure? It doesn't explicitly say so in the docs (developers.google.com/chart/interactive/docs/customizing_axes). Also, it's strange that minValue and maxValue will not work with react-google-charts, but it is working in the jsfiddle example. — pwagner

WhiteHat WhiteHat · Accepted Answer · 2016-09-04T19:04:23

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

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

How can I show specific years in Google Timeline Chart?

2 Answers