Skip to main content

Timeline

A timeline is a chart that depicts how a set of resources are used over time. If you're managing a software project and want to illustrate who is doing what and when, or if you're organizing a conference and need to schedule meeting rooms, a timeline is often a reasonable visualization choice. One popular type of timeline is the Gantt chart.

Usage

Install the package

npm i react-google-charts

Create your chart

return (
<Chart
chartType="Timeline"
data={[
[
"President",
"George Washington",
new Date(1789, 3, 30),
new Date(1797, 2, 4),
],
["President", "John Adams", new Date(1797, 2, 4), new Date(1801, 2, 4)],
[
"President",
"Thomas Jefferson",
new Date(1801, 2, 4),
new Date(1809, 2, 4),
],
[
"Vice President",
"John Adams",
new Date(1789, 3, 21),
new Date(1797, 2, 4),
],
]}
width="100%"
height="400px"
/>
);

Simple Example

An Advanced Example

Controlling The Colors

Overlapping GridLines

Labeling the bars

Putting bars on one row

Customizing Tooltips

Read More