ChartAxis

Render axis frames, ticks and labels on a ChartContainer.

Screenshot of component ChartAxis topofdoc

Usage

Import the component and include it inside a ChartContainer to enable the axis frame and gridlines with automatic tick settings.

Screenshot of component ChartAxis basic

HorizontalAxis represents the x-axis of the chart, or for streaming line charts using RealTimeDomain we use TimeAxis. VerticalAxis is the y-axis.

The two axis components can operate standalone or together, and both share the same configuration properties.

import {
ChartContainer,
LineChart,
RealTimeDomain,
TimeAxis,
VerticalAxis,
} from '@electricui/components-desktop-charts'
import { useMessageDataSource } from '@electricui/core-timeseries'
 
const OverviewPage = () => {
const signalDataSource = useMessageDataSource('speed')
 
return (
<React.Fragment>
<ChartContainer>
<LineChart dataSource={signalDataSource} />
<RealTimeDomain window={10000} />
<TimeAxis />
<VerticalAxis />
</ChartContainer>
</React.Fragment>
)
}

Labels

Configure axis labels by passing the label property a string.

Screenshot of component ChartAxis label
<TimeAxis label="Time (s)" />
<VerticalAxis label="Speed (RPM)" />

The labelPadding property is available on both axis, specifying the spacing between the labels and the chart.

Screenshot of component ChartAxis labelpadding
<TimeAxis label="Time (s)" labelPadding={30} />

Tick Quantity

Pass tickCount a positive number to override the number of ticks drawn on the axis frame.

This value is approximate - it prioritises evenly spaced and 'round' numbered ticks over strict adherence to the count.

Screenshot of component ChartAxis tickcount
<TimeAxis tickCount={2} />
<VerticalAxis tickCount={8} />

Tick Values

Pass tickValues an array of numbers to manually specify the tick render behaviour.

This can be useful where varying densities of grid-lines and axis ticks improve readability.

Screenshot of component ChartAxis tickvalues
<VerticalAxis tickValues={[0, 300, 500, 700, 1000]} />

tickValues is not available on the TimeAxis component.

Custom Tick Formatting

Format ticks by passing a the tickFormat prop a styling function.

Commonly used for adding symbols like degrees °, or changing the text from the raw value 10000 to a more readable string such as 10k.

Screenshot of component ChartAxis tickformat

It passes the current tick, the index of the tick, and the entire array of ticks as arguments and expects a string or number as a return value.

<VerticalAxis
tickFormat={(tick: number, index: number, ticks: number[]) =>
`${tick / 1000}k`
}
label="ADC Counts"
/>

Specifying data ranges

By default, the chart will autoscale the y-axis based on the range of visible data. To constrain the bounds, use the yMin and yMax properties of the domain component of the chart. While the axis component provides the visual tick marks, the domain component controls the actual bounds of data.

Prop Reference

Vertical Axis Props

PropTypeDefaultOptionalDescription
labelstringYes

The vertical label.

labelPaddingnumberYes

How much padding the label should have from the ticks.

tickCountnumberYes

Specify an explicit amount of ticks. If tickValues is set, it is used to downsample the provided array to the specified length.

tickFormat(tick: number, index: number, ticks: number[]) => string | numberYes

Format the ticks

tickValuesnumber[]Yes

Specify an explicit set of tick values to display

Horizontal Axis Props

PropTypeDefaultOptionalDescription
labelstringYes

The horizontal label.

labelPaddingnumberYes

How much padding the label should have from the ticks.

tickCountnumberYes

Specify an explicit amount of ticks. If tickValues is set, it is used to downsample the provided array to the specified length.

tickFormat(tick: number, index: number, ticks: number[]) => string | numberYes

Format the ticks

tickValuesnumber[]Yes

Specify an explicit set of tick values to display.

Time Axis Props

PropTypeDefaultOptionalDescription
labelstringYes

The vertical label.

labelPaddingnumberYes

How much padding the label should have from the ticks.

tickCountnumberYes

Specify an explicit amount of ticks.

tickFormat(tick: number, index: number, ticks: number[]) => string | numberYes

Format the ticks

tickFormatAbsolute(tick: number, index: number, ticks: number[]) => string | numberYes

Format the ticks when absolute time is used, for example when zoomed

tickValuesnumber[]Yes

Specify an explicit set of tick values to display. They are denoted as negative values from 0ms, which is positioned on the right hand side. Order them from left to right, biggest negative number to 0.