BarChart

BarCharts visually compare quantities, and will update interactively as new data arrives.

Screenshot of component BarChart basic

Charts rely on a DataSource to provide their data, most commonly this will be of the type MessageDataSource. We recommend reading the DataSource documentation first.

Usage

One common use of a BarChart is to represent sensor data in buckets, such as specific wavelengths from a spectrometer, or frequencies in a signal after FFT post-processing.

Screenshot of component BarChart spectrometer

To use a BarChart:

  • ChartContainer is required to provide a parent context,
  • MessageDataSource is required to catch and format the relevant inbound messages,
  • A BarChartDomain renders the chart when new data comes in.
import {
ChartContainer,
BarChart,
BarChartDomain,
} from '@electricui/components-desktop-charts'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const spectralDataSource = useMessageDataSource<number[]>('multispec')
<ChartContainer>
<BarChart dataSource={spectralDataSource} columns={14} />
<BarChartDomain />
</ChartContainer>

The format of the Event stream emitted by the DataSource is important.

BarChart expects an array of numeric values and plots starting with the first element and ending with either the last element or the value of the columns property, whichever comes first.

Axis Annotations

Axis frames help provide context to plotted data. Read the ChartAxis documentation for more detail and configuration.

Screenshot of component BarChart spectrometer-axis

At current time, BarChart assumes that the tick-values match the indexing of data provided by the Datasource.

As this spectral data is hardware formatted into buckets starting at index 0, the axis formatter draws the correct wavelengths.

<ChartContainer>
<BarChart dataSource={spectralDataSource} columns={13}/>
<BarChartDomain />
 
<VerticalAxis label="Absorbance" />
<HorizontalAxis
label="Wavelength (nm)"
tickValues={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
tickFormat={i => `${i * 25 + 300}`}
/>
</ChartContainer>

Histograms from Timeseries signals

To generate a histogram of timeseries sensor data, import the histogram function. This sits between the typical datasource and the BarChart.

import { histogram } from '@electricui/dataflow'
import { DataSource } from '@electricui/core-timeseries'
 
const dataSource = new DataSource(`force`)
const histo = histogram(dataSource, 0, 255, 10)
<BarChart columns={10} dataSource={histo}/>

Formatting

Columns

The columns property accepts a positive number of buckets/columns to display.

Screenshot of component BarChart columns
<BarChart dataSource={dataSource} columns={4}/>
<BarChart dataSource={dataSource} columns={10}/>
<BarChart dataSource={dataSource} columns={200}/>

Bar 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 BarChart color
import { Colors } from '@blueprintjs/core'
<BarChart dataSource={dataSource} columns={10} color={Colors.GREEN5}/>
<BarChart dataSource={dataSource} columns={10} color="#0066cc"/>

Passing an array will allow for per-bar color control.

const barColors = [Colors.BLUE3, Colors.GREEN3, Colors.RED3, Colors.GRAY2]
<BarChart dataSource={dataSource} columns={10} color={barColors}/>

Bar Width

The barWidth property accepts a positive number to customise the rendered width of each bar.

Screenshot of component BarChart width
<BarChart dataSource={dataSource} columns={10} barWidth={2}/>
<BarChart dataSource={dataSource} columns={10} barWidth={4}/>
<BarChart dataSource={dataSource} columns={10} barWidth={10}/>

Bar Gap

The barGap property accepts a positive number to control whitespace rendered between each bar.

The default gap is 1.

Screenshot of component BarChart gap
<BarChart dataSource={dataSource} columns={10} barGap={0}/>
<BarChart dataSource={dataSource} columns={10} barGap={1}/>
<BarChart dataSource={dataSource} columns={10} barGap={10}/>

Overdraw

Like all other components in ChartContainer, the render order of componentsx executes first-to-last.

While this is uncommon for normal LineChart use, BarChart are typically thicker boxes and will occlude layers rendered earlier.

Screenshot of component BarChart overlap
<ChartContainer>
<BarChart dataSource={data} columns={10} color={Colors.RED4} />
<BarChart dataSource={data} columns={5} color={Colors.BLUE4} />
<BarChart dataSource={data} columns={3} color={Colors.GREEN4} />
</ChartContainer>

This can be abused with a second datasource containing an area of importance for selective highlight behaviour.

Screenshot of component BarChart highlight
<ChartContainer>
<BarChart dataSource={data} columns={10} color={Colors.COBALT5} />
<BarChart dataSource={highlightData} columns={10} color={Colors.COBALT1} />
</ChartContainer>

Prop Reference

PropTypeDefaultOptionalDescription
accessor(data: T, time: number) => number[] | TypedArray | nullYes

An accessor on the Events data to produce the columns of data. If the event is produced by a MessageQueryable, the eventData argument will be the payload of the message. This function must return an array of numbers, the heights of each of the columns, the array can't contain more columns than the amount set in the props.

Send a null to hide the bar chart

alphaAccessor(data: T, time: number) => number | number[]Yes

An accessor on the Events data to produce the alpha of the columns.

barGapnumberYes
barWidthnumberYes
blankTriggerQueryable

Queryable

Queryable implementers

Yes

A Queryable that provides blanking information. Any event on this Queryable will blank the internal store at the Event's time.

colorColor

Color

| string | number | (number | string | Color

Color

)[]
Yes

The color of the bars, either a single colour or an array of colours, one for each column

colorAccessor(data: T, time: number) => number | string | Color

Color

| (number | string | Color

Color

)[]
Yes

An accessor on the Events data to produce the colours of the columns. If the event is produced by a MessageQueryable, the eventData argument will be the payload of the message. This function must return an array of colours, one for each column.

columnsnumberNo

How many columns will the bar chart have?

dataSourceQueryable

Queryable

Queryable implementers

<T>
No

A reference to a Queryable for event injestion.

opacitynumberYes

The global opacity of the graph. Multiplied by values from the opacitySource.

opacityAccessor(data: O, time: number) => numberYes

An optional accessor on the opacitySource queryable

opacitySourceQueryable

Queryable

Queryable implementers

<O>
Yes

The Queryable that provides opacity information. It is accessed in 'real-time', outside the time domain of the chart.

Assumed to be a Signal or a DataFlow of Signals.

visibilityAccessor(data: V, time: number) => booleanYes

An optional accessor on the visibilitySource queryable

visibilitySourceQueryable

Queryable

Queryable implementers

<V>
Yes

The Queryable that provides visibility information, primarily used for Legend interactions. It is accessed in 'real-time', outside the time domain of the chart.

The visibility of the graph does not unmount the chart, it will continue to contribute to axes calculations.