an interactive timeline component implemented in snabbdom

Usage no npm install needed!

<script type="module">
  import snabbdomTimeline from '';



an interactive timeline component implemented in snabbdom

alt text


  • can stack multiple graphs
  • single time or ranged time selectors
  • data oriented, functional design
  • tiny! (~ 400 lines of code)
  • renders with SVG or canvas


requires node >= v12.17 or a browser that supports the es module format.

via npm:

import html     from 'snabby'
import timeline from 'snabbdom-timeline'

via a pure es module (browser or deno):

import html     from ''
import timeline from ''

// contains all data needed to render a timeline component

const model = {
    container: document.createElement('div'),
    width: 0,
    renderer: 'svg', // canvas | svg
    graphs: [
            title: 'test title',
            label: 'title',
            type: 'scatterPlot',  // scatterPlot | linePlot
            timeRange: {
                start: 0,  // seconds
                end: 0     // seconds
            yRange: {
                start: 0,
                end: 100

            // optional: render a selection control
            selection: {
                type: 'range',
                start: 0,       // seconds | 0
                end: Infinity,  // seconds | Infinity
                dragging: false

            height: 40,              // pixels
            dataColor: 'dodgerblue', // color of data points on the graph
            renderTicks: false,
            renderValueLabel: false,

            // the data points to render
            data: [ ],

            // optional: settings for grid background lines
            gridLines: {
                vertical: {
                    majorColor: '#dedede',
                    minorColor: '#f3f3f3',
                    ticksPerMinor: 2.5,
                    ticksPerMajor: 10
                horizontal: {
                    color: '#eeeeee',
                    lineCount: 2


function update () {
    const oldVnode = model.container
    const newVnode = timeline(model, update)
    model.container = html.update(oldVnode, newVnode)

// pump test data into the graph
setInterval(function () {
    const value = model.graphs[0].yRange.start + Math.round(Math.random() * (model.graphs[0].yRange.end - model.graphs[0].yRange.start))
        t: / 1000,

}, 2000)


graph types

There are 2 available graph types:


alt text


alt text

You can also open example.html in a browser to see a more complicated example with 2 graphs linked together.

renderer option

by default, snabbdom-timeline will use svg to render these graphs. These are nice in that they are semantic elements, and are probably more accesible.

However, if you're rendering a lot of graphs with frequently updating data, you may find the svg based rendering performance is insufficient.

For example, in one of my projects I'm rendering 50 of these graphs, with new data coming in at 60 frames per second, and storing 1,000 data points per graph. Using virtual dom really bogs things down at this scale, so in that case I use the canvas renderer option which has much better performance, at the cost of blurrier text and less semantically friendly markup.