Create your timeline online, in seconds, straight from your browser!
Tip: Vizzlo's timeline is completely interactive—just click on the elements to edit them. Besides, you always have the sidebar to use as a support. Right-click on the elements and the canvas to see a context menu with more options.
Timeline step by step
1) Document title
Click on the chart title to give it a name.
You can optionally enter it on the drop-down menu in the top menu bar. There, you can also choose to show/hide the title by clicking on the eye icon (a), and select a destination folder for your new document (b).
2) Explore the tab "APPEREANCE" of the sidebar
2.1) Set the document properties: choose the document size between different slide presets or enter your preferred dimensions, and choose a theme.
2.2) Set date format preferences
Click on the drop-down menu "Date" in the sidebar to choose the date format. You can pick your preferred date format from a large variety of display options in different languages/locale standards, selecting the order of the date components, the separators, or if it should be written in full.
2.3) Define how you want to position/arrange your milestones:
By default, when you create a new document, your milestones will be automatically arranged on the time axis according to their dates. We recommend this option to start.
However, there are two more possibilities:
1) you can opt for a "manual" positioning, to have full control and fine-tune the position of your milestones;
2) or choose "evenly distribute," if you would like to have the same distance between your events.
Tip: If you grab the milestones and slide them over the axis, your chart will automatically change to "manual."
2.4) Choose the date style
This is a layout option, and it will change not only how dates are displayed but also the design. In choosing different styles, you're adjusting the look of the milestones as well as how your events are shown on the axis, if as single dates, or grouped in weeks, months, quarters or years.
Tip: Choose "none" if you're creating a simple sequence of events without particular dates. While using this option, you can still enter details like time (hours, minutes) as part of the title or description of each milestone manually.
2.5) Choose if dates should be shown alongside the axis or above the milestones' titles
Sometimes, in order to facilitate reading or to avoid overlapping dates over the axis, it's interesting to change the position of the date. Compare the difference between the picture above—in which quarters and years are indicated alongside the axis—and the picture below—in which these are shown above the titles.
Click on the "Date position" drop-down menu to try these options and choose your favorite setting.
3) Enter your data (click on the tab "DATA" of the sidebar)
The milestones on this vizzard consist of three elements: title, date, and details. You can enter your data, using the spreadsheet (3.1), or directly clicking on the milestones (3.2).
3.1) Use the spreadsheet:
Click on the spreadsheet button to edit your data. Remember: you can paste your information from any spreadsheet software on Vizzlo's spreadsheet.
Tip: Click on the "wheel" icon in the "Date" column to make sure that the date format of the vizzard spreadsheet matches the one of your data set.
3.2) Click on the milestones to edit them directly (a), and use the cards in the sidebar to set details (b):
Hover your mouse over the sample milestones, click on them and change the given data.
- Use the date picker ("calendar" icon) for an interactive calendar view.
- Click on the "wheel" icon to choose the date language and display format (this will change your appearance settings).
- Click on the "paint bucket" to assign a different color to the selected milestone.
- Click on the "x" button on the milestone or the red "garbage bin" icon in the card to delete the selected milestone.
4) Add new milestones to your timeline
Hover your mouse over the time axis. You will see a "plus" icon. Click on it and choose "Add milestone" to add to this spot a new milestone.
Optionally, you can click on the button "+ ADD MILESTONE" in the "DATA" tab of the sidebar. If you use this option, new milestones will be added to the end of your timeline.
5) Add a scale break
Scale breaks can make your timeline more compact if you have a very long gap between your events.
To add a scale break, hover your mouse over the time axis. You will see a "plus" symbol. Click on it and choose "Add scale break" to add a scale break between two milestones.
Note: If the positioning of your milestones is set to "Automatic," you can grab and slide the scale break to optimize the distribution of the milestones as you wish. If the positioning of your milestones is set to "Manual," by dragging the scale break, you will reposition it within your timeline without changing the distribution of milestones.
6) Exporting and sharing your timeline
Click here to learn how to share your chart or export it into your presentation.
Create your timeline chart now!