Template talk:Graphical timeline

Lower numbered years at the top?

Can anyone tell me how to make this work with the lower numbered years at the top? See Talk:John Vanbrugh. -- Ferma (talk) 19:23, 16 February 2012 (UTC)

I'd also like to put -140 above -30 or something like that. Ifly6 (talk) 22:27, 7 July 2026 (UTC)

 Done Fixed the code so that it can do this. — hike395 (talk) 01:27, 8 July 2026 (UTC)

Thanks. How can it be done? As in like do I pass some parameter? Ifly6 (talk) 16:35, 8 July 2026 (UTC)

@Ifly6: |from= will always be the value of the bottom of the timeline, |to= will always be the value on the top of the timeline. I forgot to update the documentation: will do so now. — hike395 (talk) 14:14, 20 July 2026 (UTC)

Proposal for a new feature for this template

I propose there be a graphical timeline feature that allows you to collapse a timeline if you want it hidden. I'm already working on it right now. This could allow long, unwieldy timelines to be collapsed into a more manageable size. Benniboi01 (talk) 18:58, 20 May 2020 (UTC)

 Done |collapsible= and |state= have been added to the Lua module. — hike395 (talk) 05:34, 11 May 2021 (UTC)

Various abnormalities and issues

I've noticed some abnormalities with Template:Triassic graphical timeline. Several of the links are not clickable when they are intended to be (for example, Jurassic and Mesozoic). Also if you look at the Triassic article, and other articles where the timeline is transcluded, the "arrow pointers" on the right side are mostly missing, and cause an overlap problem at the bottom of the template.

I am not sure how recent these problems are/how connected they are to the new module, but posting them here anyway. — Goszei (talk) 05:59, 8 May 2021 (UTC)

I found that these issues are affecting a majority of the geologic timelines, after looking into this further. — Goszei (talk) 06:14, 8 May 2021 (UTC)

Unrelated question: was this template always visible on mobile? I seem to remember it not being so, but I am not active in this area, and maybe my memory is wrong. — Goszei (talk) 06:04, 8 May 2021 (UTC)

On Template:Triassic graphical timeline, the #Container element has a computed width of 305px, while this edit only allows 300px. Changing it to 305px fixes the overflow issue on Triassic, but the last annotation is still not clickable and this seems like a hack. I haven't looked more carefully. — The Earwig (talk) 06:08, 8 May 2021 (UTC)

@Goszei: Partly done

• I fixed the issue of the arrows wrapping. The original template used divs to hold the content, and assumed that the layout would work like text. This went horribly wrong when you squeezed the template horizontally. I've fixed the arrow wrapping issue by doing the layout as a single table. There is still a remaining issue of a vertical line squirting out, so I can't yet remove the 300px/305px hack. Will look into this later today.
• When used in an infobox, the positioning of the annotations was messed up. Now fixed.
• Template visibility on mobile: {{Graphical timeline/regression}} is a comparison between the new module and the old template. When I look at it in mobile mode, the old template still displayed, so I suspect you may be misremembering. Looking at it in mobile mode reveals some positioning errors that I will look at later today.
• The last label on Triassic is clickable right now, although it's a little tricky, you have to hover on the lower half. I think I know how to fix that.

Keep up the bug reports! So far, everything seems quite fixable. — hike395 (talk) 16:20, 8 May 2021 (UTC)

User:Hike395 It looks like a new problem has emerged in mobile infoboxes. See Jurassic () and Triassic ) for examples, where a large blank space and a floating black line beneath the timeline has emerged.

Also: several links in both templates (like "Mesozoic") remain unclickable (which ones are unclickable remains consistent between mobile and desktop), but only in some of the set, so I think that might require tweaking at the local level to fix instead of a module change. — Goszei (talk) 05:29, 9 May 2021 (UTC)

@Goszei: Partly done Fundamentally, the old HTML/CSS was fragile: small changes would cause things to break. I've had to redo how most of the timeline is laid out (e.g., using Transform CSS)

• The blank space was due to old CSS in the title and navbox. Fixed
• The floating black line was because the vertical bar in the timeline was implemented in a fragile way. Now a border of a table cell. Fixed
• The positioning of the annotations are implemented in a more robust way, so the links in them are easy to click on Fixed
• The inability to click on labels in boxes is still puzzling. Like other problems, it's probably due to fragile old CSS. I'll work on that next. Later

— hike395 (talk) 15:57, 9 May 2021 (UTC)

Perhaps the VPT thread linked above in the section beginning with "Dead wikilinks" will help. — Goszei (talk) 21:56, 9 May 2021 (UTC)

Thanks! I fixed that div/span issue a few days ago, so I don't think it's that. I have a prototype version in the Template:Graphical timeline/sandbox which cleans up the CSS for the timeline boxes and seems to fix the clicking issue. Sadly, on Chrome, it has a funny overlap of the border that I haven't yet figured out. (see {{Triassic graphical timeline/sandbox}}). I don't want to make the code live to fix one problem and cause another, so I've held off. I hope I can figure it out in the next couple of days. — hike395 (talk) 05:26, 10 May 2021 (UTC)

 Done I believe that all reported bugs are now Fixed. @Goszei: if you see any further issues, please let me know here on the Talk page. Thanks for the feedback! — hike395 (talk) 03:52, 11 May 2021 (UTC)

Not clickable links (again)

Wikipedia:Village_pump_(technical)#Need_Template:Human_timeline_Help MarMi wiki (talk) 21:06, 4 June 2021 (UTC)

I think that making the containers not overlap and/or introduce some structure/order would solve this problem (for all the links) (, ). MarMi wiki (talk) 16:20, 5 June 2021 (UTC)

Dates axis

Could this module parse dates, not just numbers? — Guarapiranga ☎ 01:32, 25 April 2022 (UTC)

When embedded, top part of chronology chart is cut of

See for example the timeline in the infobox in Pleistocene. Below the heading Chronology, only a small bottom part of ↓Holocene is visible.  --Lambiam 10:22, 7 August 2022 (UTC)

Missing documentation for a few parameters?

Is there a reason that scale-increment, scaling, and label-freq are not mentioned in the list of general parameters? Scale-increment is at least shown to exist in the example, but I would not have known about the other two if I had not looked at the module code. - Wikkiwonkk (talk) 10:39, 25 July 2024 (UTC)

Not visible on mobile app

For some reason, many of the templates used through this template (e.g., the Abiogenesis and Life timelines, and the one I'm developing for Protist#Fossil record) are not visible on the mobile app, and require a browser set to desktop mode to be seen. Why is that? How can I make them visible? — Snoteleks (talk) 16:53, 23 January 2025 (UTC)

Halkierids in context timeline

The halkierids page has a graphical timeline giving the chronological context for halkierids. It has first trilobites and echinoderms as two lines of text at 530mya. These two lines of text are overprinted. I can bodge this by changing the dates to -529 and -531, but it looks as if it is intended that the lines are displaced using the nudge up and down parameters. Changing the value of the parameters had no effect. Nor did adding |disable-box-align=1. Lavateraguy (talk) 10:34, 3 March 2025 (UTC)

I think you want to set |disable-arrow-align=1. — hike395 (talk) 14:04, 3 March 2025 (UTC)

That did the trick. I had read the documentation specifying |disable-box-align=1 for various nudge parameters, and hadn't read far enough to discover that note-nudge-... was different.

Is there a way of locating pages using the template with the note-nudge... (and not |disable-arrow-align) parameters? (I'm wondering if there are more pages with the same issue.) Lavateraguy (talk) 15:34, 3 March 2025 (UTC)

Fixing overlapping containers breaking link interactability

Currently on templates that use this, such as Template:Human timeline, some containers will overlap each other due to nudging and being very close to each other (EG: "Modern Humans" and "Earliest Clothes"). This is because the container contains both the "←" arrow AND the text, so the bounding box is determined by the arrow and text, which if overlapped, even if the background is transparent, will still block interactability between elements it covers, in the case of the Human timeline template, "Earliest Humans". A fix for this is as simple as making it so the container has no pointer-events, while setting the text which can contain wikitext to have the initial pointer events. Initial as opposed to all to ensure proper browser behaviors. Here is my proposed change:

--- Module:Graphical_timeline.lua       2025-02-17 16:24:37
+++ Module:Graphical_timeline_fix.lua   2025-03-23 17:44:35
@@ -607,4 +607,9 @@ 
        args.nudgeright = (tonumber(args.nudgeright) or 0)-(tonumber(args.nudgeleft) or 0) 
        args.nudgedown = (tonumber(args.nudgedown) or 0)-(tonumber(args.nudgeup) or 0) 
+ 
+       -- Container should have no pointer events, only the text should. 
+       -- This prevents issues with containers overlapping and blocking pointer events on links. 
+       container:css("pointer-events", "none") 
+ 
        -- Two cases: no arrow, and arrow 
        --   For no arrow case, use previous CSS which works well to position text 
@@ -639,4 +644,6 @@ 
                text:css("line-height","105%") 
                text:css("bottom","0") 
+               -- Ensure that the text can be interacted with: 
+               text:css("pointer-events","initial") 
                text:wikitext(ignoreBlank(args.text)) 
        else 
@@ -687,4 +694,6 @@ 
                text:css("line-height","105%") --- don't crunch multiple lines of text 
                text:css("bottom","0") 
+               -- Ensure that the text can be interacted with: 
+               text:css("pointer-events","initial") 
                text:wikitext(ignoreBlank(args.text)) 
        end

Giving the large number of pages this would cascade to, I'd like opinions before I make this change. From my understanding, only the text field can be customized, as such the arrows can't be customized to point to links, so this shouldn't break anything. — Félix Wolf (talk | contribs) 17:58, 23 March 2025 (UTC)

This looks plausible to me, but I am certainly not enough of a CSS expert to tell definitively. You could apply it and then try going to various crowded timelines and try clicking on text? — hike395 (talk) 23:37, 23 March 2025 (UTC)

I've applied it. It appears to be work (I did test it with the template preview tool). I'm not seeing any issues any issues with it. If it does, please let me know and I'll re-evaluate the fix! — Félix Wolf (talk | contribs) 01:32, 24 March 2025 (UTC)

I'll go poke at some of the more crowded timelines. — hike395 (talk) 01:35, 24 March 2025 (UTC)

Parsing dates (or converting them to fractions of a year)

Per User:Guarapiranga's request 4 years ago, it would be useful if the template could interpret dates for each bar's from= and to= parameters rather than having to manually convert a date to a fraction of a year. For example, accepting 2 April 2026 and handling it internally as 2026.25. Particularly considering use of this timeline for Template:FIFA_World_Ranking_leaders, but don't want to convert all current dates and future dates to fractions.

Is this feasible? CompassNNE (talk) 13:03, 20 July 2026 (UTC)

I would recommend using {{Year decimal}} to convert all of the dates before they are passed to the timeline. I believe that solves your problem. — hike395 (talk) 14:23, 20 July 2026 (UTC)

Thanks, that's exactly what I was looking for! See Template:FIFA World Ranking leaders CompassNNE (talk) 14:32, 21 July 2026 (UTC)