An chart library specialized for large-scale time-series data, built on WebGL.
An chart library specialized for large-scale time-series data, built on WebGL.
Flexable. Realtime monitor. High performance interaction.
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
npm install timechart
This library depends on D3 to draw axes and something else. It needs to be included seperatedly.
Display a basic line chart with axes.
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 }], });
To add data dynamically, just push new data points to the data array, then call
chart.update().
Some restrictions to the provided data: * You can only add new data. Once you call
update, you can not edit or delete existing data. * The x value of each data point must be monotonically increasing. * Due to the limitation of single-precision floating-point numbers, if the absolute value of x is large (e.g.
Date.now()), you may need to use
baseTimeoption (see below) to make the chart render properly.
Specify these options in top level option object. e.g. to specify
lineWidth:
JavaScript const chart = new TimeChart(el, { series: [{ data }], lineWidth: 10, });
default: 1
default: 'transparent'
default: 10 / 10 / 45 / 20
'auto'to calculate these range from data automatically. Data points outside these range will be drawn in padding area, to display as much data as possible to user.
default: 'auto'
default: false
new Date(0). Every x in data are relative to this. Set this option and keep the absolute value of x small for higher floating point precision.
default: 0
scaleTime,
scaleUtc,
scaleLinearfrom d3-scale are known to work.
default: d3.scaleTime
default: false
Specify these options in series option object. e.g. to specify
lineWidth:
JavaScript const chart = new TimeChart(el, { series: [{ data, lineWidth: 10, }], });
data ({x: number, y: number}[]): Array of data points to be drawn.
xis the time elapsed in millisecond since
baseTime
lineWidth (number or undefined): If undefined, use global option.
default: undefined
default: ''
default:
colorCSS property value at initialization.
default: true
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:
JavaScript const chart = new TimeChart(el, { series: [{ data }], zoom: { x: { autoRange: true, }, y: { autoRange: true, } } });
default: false
default: Infinity / -Infinity
max - minin xRange / yRange
default: Infinity / 0
chart.update(): Request update after some options have been changed. You can call this as many times as needed. The actual update will only happen once per frame.
chart.dispose(): Dispose all the resources used by this chart instance. Note: We use shadow root to protect the chart from unintended style conflict. However, there is no easy way to remove the shadow root after dispose. But you can reuse the same HTML element to create another TimeChart. Example
chart.onResize(): Calculate size after layout changes. This method is automatically called when window size changed. However, if there are some layout changes that TimeChart is unaware of, you need to call this method manually.
With touch screen: * 1 finger to pan * 2 or more finger to pan and zoom
With mouse: * Left button drag to pan * wheel scroll translate X axis * Alt + wheel scroll to translate Y axis * Ctrl + wheel scroll to zoom X axis * Ctrl + Alt + wheel scroll to zoom Y axis * Hold Shift key to speed up translate or zoom 5 times
With trackpad: * Pan X or Y direction to translate X axis * Alt + Pan X/Y direction to translate X/Y axis * Pinch to zoom X axis * Alt + pinch to zoom Y axis * Hold Shift key to speed up translate or zoom 5 times
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:
.dark-theme { color: white; background: black; --background-overlay: black; }
The
--background-overlayCSS 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
colorCSS 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
colorafter initialiation.
npm installto install dependencies
npm startto automatically build changes
npm run demothen open http://127.0.0.1:8080/demo/index.html to test changes
npm testto run automatic tests