LineChart

Charts provide realtime graphing of numeric data.

Screenshot of component LineChart basic

Charts rely on a DataSource to provide their data, most commonly this will be of the type MessageDataSource. It is recommended to read the DataSource documentation first.

Usage

The most common use of a LineChart is to plot realtime streaming sensor data.

To use a LineChart:

  • ChartContainer is required to provide a parent context
  • MessageDataSource is required to catch and format the relevant inbound messages
  • A RealTimeDomain references the input data against time, and allows for window range control
Screenshot of component LineChart basic-sparkline
import {
ChartContainer,
LineChart,
RealTimeDomain,
} from '@electricui/components-desktop-charts'
import { MessageDataSource } from '@electricui/core-timeseries'
const signalDataSource = new MessageDataSource('speed')
  1. <ChartContainer>
  2. <LineChart dataSource={signalDataSource} />
  3. <RealTimeDomain window={10000} delay={50} />
  4. </ChartContainer>

A 50ms delay on the RealTimeDomain adds some latency to ensure that new events enter the chart 'smoothly' from the right hand side. When data streams in at higher rates, the gap between points is less noticable.


Most users commonly add axis frames to provide context to the data. Read the ChartAxis documentation for more detail and configuration.

Screenshot of component LineChart basic-axis
  1. <ChartContainer>
  2. <LineChart dataSource={signalDataSource} />
  3. <RealTimeDomain window={10000} delay={50} />
  4. <TimeAxis />
  5. <VerticalAxis />
  6. </ChartContainer>

Plotting multiple lines

Plot an arbitrary number of signals on the same Chart by adding more <LineChart> children.

Each LineChart represents a draw call to the GPU under the hood.

Screenshot of component LineChart multiple

To plot several different messages on the same Chart, you'll need to create a datasource per message ID.

  1. const engineDataSource = new MessageDataSource('engine_rpm')
  2. const gearboxDataSource = new MessageDataSource('drivetrain_rpm')
  3. const wheelDataSource = new MessageDataSource('wheel_rpm')
  1. <ChartContainer>
  2. <LineChart dataSource={engineDataSource} />
  3. <LineChart dataSource={gearboxDataSource} />
  4. <LineChart dataSource={wheelDataSource} />
  5. <RealTimeDomain window={10000} />
  6. <TimeAxis />
  7. <VerticalAxis />
  8. </ChartContainer>

For structured data where multiple plottable values are in the same packet, use the same datasource in each LineChart and provide an accessor function to select the desired member.

See the data source documentation for further information.

const tempDataSource = new MessageDataSource('temp')
  1. <ChartContainer>
  2. <LineChart
  3. dataSource={tempDataSource}
  4. accessor={event => event.temp.furnace}
  5. />
  6. <LineChart
  7. dataSource={tempDataSource}
  8. accessor={event => event.temp.exhaust}
  9. />
  10. <RealTimeDomain window={30000} />
  11. <TimeAxis />
  12. <VerticalAxis />
  13. </ChartContainer>

While LineChart uses normal accessor syntax to select the data to plot - this is a rare exception.

LineChart accessors are passed the datasource's event, not the global state.

Line Width

The lineWidth property accepts a positive number representing the thickness of the line in pixels. Larger values increase thickness.

The default thickness is 2. The thickness behaves as expected on high-dpi displays (Retina@2x).

Screenshot of component LineChart linewidth
  1. <LineChart lineWidth={1}/>
  2. <LineChart lineWidth={2}/>
  3. <LineChart lineWidth={4}/>
  4. <LineChart lineWidth={10}/>

Line Color

The color prop can be a string or number. Passing hex color="#0066cc locally is fine, but we recommend using centralised colors to maintain consistency.

Screenshot of component LineChart linecolor
import { Colors } from '@blueprintjs/core'
  1. <LineChart color={Colors.RED5} />
  2. <LineChart color={Colors.GREEN5} />
  3. <LineChart color={Colors.BLUE5} />
  4. <LineChart color={Colors.GOLD5} />
  5. <LineChart color={Colors.SEPIA5} />
  6. <LineChart color={Colors.VIOLET5} />
<LineChart color="#0066cc" />

Geometry Cache size

The LineChart component uses a statically declared internal buffer for geometry storage.

By default, this is internally managed, but can be overriden with the maxItems property to increase/reduce the potential RAM impact of the chart.

This is helpful when you know the incoming data stream is slow or only covers a short timespan, or if high bandwith data is being plotted (>10kps, >1M points).

Electric UI will internally allocate the internal ping-pong geometry buffers as deemed optimal for performance.

As such, the actual value may be some multiple of 4096 entries.

<LineChart dataSource={noiseDataSource} maxItems={6000} />

If maxItems isn't big enough to buffer for the selected RealTimeDomain, then users will see data dropping off the end of the line.

Prop Reference

PropTypeDefaultOptionalDescription
accessorEventDataAccessor

EventDataAccessor

Type: (eventData: any, time: number) => number

Yes

An accessor on the Events data to produce a column of data. If the event is produced by a MessageDataSource, the eventData argument will be the payload of the message. This function must return a number

colorColor

Color

| string | number
Yes

The color of the line

dataSourceDataSourceReference

DataSourceReference

DataSources may be transformed by the mutator functions, this specifies if the function expects the 'original' reference or the transformed final DataSource.

Type: DataSource<T>

<any>
No

A reference to a DataSource for event injestion.

lineWidthnumberYes

The thickness of the line

maxItemsnumberYes

The maximum number of events to store in the cache. Must be set statically. By default it is 10,000