TimeChart

Time Chart

npm version GitHub Pages

An chart library specialized for large-scale time-series data, built on WebGL.

Flexable. Realtime monitor. High performance interaction.

Live Demo

Performance

Taking advantage of the newest WebGL technology, we can directly talk to GPU, pushing the limit of the performance of rendering chart in browser. This library can display almost unlimited data points, and handle user interactions (pan / zoom) at 60 fps.

We compare the performance of this library and some other popular libraries. See Performance

Usage

Installation

Basic

Display a basic line chart with axes.

<div id="chart" style="width: 100%; height: 640px;"></div>

const el = document.getElementById('chart');
const data = [];
for (let x = 0; x < 100; x++) {
    data.push({x, y: Math.random()});
}
const chart = new TimeChart(el, {
    series: [{ data }],
});

Live

Assemble Your Own Chart

New in v1.

TimeChart comes with a modular design. Almost all functions are implemented as plugins. You can pick the plugins you need, so that you don’t pay for functions you don’t use.

Offical plugins:

As an example, to assemble your own chart with all offical plugins added:

import TimeChart from 'timechart/core';
import { lineChart } from 'timechart/plugins/lineChart';
import { d3Axis } from 'timechart/plugins/d3Axis';
import { legend } from 'timechart/plugins/legend';
import { crosshair } from 'timechart/plugins/crosshair';
import { nearestPoint } from 'timechart/plugins/nearestPoint';
import { TimeChartZoomPlugin } from 'timechart/plugins/chartZoom';

const el = document.getElementById('chart');
const chart = new TimeChart(el, {
    data: {...},
    plugins: {
        lineChart,
        d3Axis,
        legend,
        crosshair,
        nearestPoint,
        zoom: new TimeChartZoomPlugin({...}),
        tooltip: new TimeChartTooltipPlugin({...}),
    }
});

This is almost equivalent to just import TimeChart from 'timechart';, except:

You can also write your own plugins. Read the guide.

For users who use HTML script tag to import TimeChart, use this instead:

<!-- D3 scripts -->
<script src="https://huww98.github.io/TimeChart/dist/timechart.min.js"></script>
<script>
    const el = document.getElementById('chart');
    const chart = new TimeChart.core(el, {
        data: {...},
        plugins: {
            lineChart: TimeChart.plugins.lineChart,
            ...
        }
    });
</script>

Demo

Dynamic Data

To add/remove data dynamically, just change the data array with conventional array prototype methods, then call chart.update().

Some restrictions to the data manipulations:

Global Options

Specify these options in top level option object. e.g. to specify lineWidth:

const chart = new TimeChart(el, {
    series: [{ data }],
    lineWidth: 10,
});

Series Options

Specify these options in series option object. e.g. to specify lineWidth:

const chart = new TimeChart(el, {
    series: [{
        data,
        lineWidth: 10,
    }],
});

Zoom Options

These options enable the builtin touch / mouse / trackpad interaction support. The x, y axis can be enabled separately.

Specify these options in zoom option object. e.g. to specify autoRange:

const chart = new TimeChart(el, {
    series: [{ data }],
    zoom: {
        x: {
            autoRange: true,
        },
        y: {
            autoRange: true,
        }
    }
});

New in v1. If you are using the plugins, pass these options to the TimeChartZoomPlugin plugin.

import TimeChart from 'timechart/core';
import { TimeChartZoomPlugin } from 'timechart/plugins/chartZoom';
const chart = new TimeChart(el, {
    series: [{ data }],
    plugins: {
        zoom: new TimeChartZoomPlugin({x: {autoRange: true}})
    },
});

Then old chart.options.chart is not available. Use chart.plugins.zoom.options instead.

Tooltip Options

const chart = new TimeChart({
    ...,
    tooltip: { enabled: true }
})

Or

import TimeChart from 'timechart/core';
import { TimeChartTooltipPlugin } from 'timechart/plugins/tooltip';
const chart = new TimeChart(el, {
    ...,
    plugins: {
        tooltip: new TimeChartTooltipPlugin({ enabled: true, xLabel: 'Time' })
    },
});

Methods

Interaction

With touch screen:

With mouse:

With trackpad:

Styling

The chart is in a shadow root so that most CSS in the main document can not affect it. But we do provide some styling interface.

For example, we can support dark theme easily:

<div id="chart" class="dark-theme"></div>

.dark-theme {
    color: white;
    background: black;
    --background-overlay: black;
}

Live

The --background-overlay CSS property is used in some non-transparent element on top on the chart.

The background of the chart is transparent by default. So it’s easy to change the background by setting the background of parent element.

All foreground elements will change color to match the color CSS property. However, chart is drawn in canvas and cannot respond to CSS property changes. You need to change the color manually if you want to change the color after initialiation.

Development

This site is open source. Improve this page.