Chart Axis

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 be used independently or together, and both share the same configurable props.

  1. <ChartContainer>
  2. <LineChart accessor="speed" />
  3. <RealTimeDomain window={5000}>
  4. <TimeAxis/>
  5. <VerticalAxis/>
  6. </ChartContainer>

Labels

Configure axis labels by passing the label property a string.

Screenshot of component ChartAxis label
  1. <TimeAxis label="Time (s)" />
  2. <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
  1. <TimeAxis tickCount={2} />
  2. <VerticalAxis tickCount={8} />

Tick Values

Pass tickValues an array of numbers to manually specify the ticks being drawn.

This can be useful where varying densities of grid-lines and axis ticks are desired.

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 easily readable string 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.

  1. <VerticalAxis
  2. tickFormat={(tick: number, index: number, ticks: number[]) =>
  3. `${tick / 1000}k`
  4. }
  5. label="ADC Counts"
  6. />

Vertical Axis Prop Reference

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 Prop Reference

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 Prop Reference

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

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.