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.
tsx
import {
ChartContainer,
BarChart,
BarChartDomain,
} from '@electricui/components-desktop-charts'
import { MessageDataSource } from '@electricui/core-timeseries'
 
const spectralDataSource = new MessageDataSource<number[]>('multispec')
tsx
<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.

tsx
<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.

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

Formatting

Columns

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

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

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

tsx
const barColors = [Colors.BLUE3, Colors.GREEN3, Colors.RED3, Colors.GRAY2]
tsx
<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
tsx
<BarChart dataSource={dataSource} columns={10} barWidth={2}/>
tsx
<BarChart dataSource={dataSource} columns={10} barWidth={4}/>
tsx
<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
tsx
<BarChart dataSource={dataSource} columns={10} barGap={0}/>
tsx
<BarChart dataSource={dataSource} columns={10} barGap={1}/>
tsx
<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
tsx
<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
tsx
<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[] | TypedArrayYes

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.

barGapnumberYes
barWidthnumberYes
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

)[]
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 opacity of the bars