Sparkline

Sparklines are essentially extremely simplified charts and thus can be used on a very small scale. A colored line chart visualizes trends and movements of the data. It uses the same data source loaders as Controller and also supports updating via realtime push.

Creating a Sparkline

Like the full charts, an empty DIV-Element has to be created and attached to the DOM in a browser environment. For a node environment, an arbitrary id can be used. To create a Sparkline just provide either the HTMLElement or its 'id' property to the constructor of Sparkline.

Creating a Sparkline via id:

import { Sparkline } from '@stock3/charting-bundle-chartbreaker';

const sparkline = new Sparkline({
    /* id of the element in the DOM */
    'id': 'charting'
});
Copy

Or via HTMLElement directly:

import { Sparkline } from '@stock3/charting-bundle-chartbreaker';

const sparkline = new Sparkline({
    /* HTMLElement */
    'element': div
});
Copy

The timeseries that should be displayed in the chart is selected via the timeseries property. This property and all others may also be passed directly to the constructor. A full list of configurations such as width, height, and colors are described at Sparkline.

sparkline.set({
    /* data to be displayed */
    'timeseries': 'Custom(arg1,arg2)'
    /* additional properties can be specified here */
});
Copy