Axis

Linear axis components for cartesian charts. Configurable tick formatting, label rotation, positioning, and axis line styling.

Import

import {
  LinearXAxis,
  LinearXAxisTickSeries,
  LinearXAxisTickLabel,
  LinearXAxisTickLine,
  LinearYAxis,
  LinearYAxisTickSeries,
  LinearYAxisTickLabel,
  LinearYAxisTickLine,
  LinearAxisLine
} from 'reaviz';

LinearXAxis / LinearYAxis Props

Tick Series Props

Tick Label Props

Tick Line Props

Axis Line Props

Custom Tick Formatting

import { LinearYAxis, LinearYAxisTickSeries, LinearYAxisTickLabel } from 'reaviz';

<AreaChart
  data={data}
  yAxis={
    <LinearYAxis
      type="value"
      tickSeries={
        <LinearYAxisTickSeries
          label={
            <LinearYAxisTickLabel
              format={(v) => `$${v.toLocaleString()}`}
            />
          }
        />
      }
    />
  }
/>

Hide Axis Labels (Keep Line)

<LinearXAxis
  type="time"
  tickSeries={<LinearXAxisTickSeries label={null} />}
/>

Hide Tick Lines (Keep Labels)

<LinearYAxis
  type="value"
  tickSeries={<LinearYAxisTickSeries line={null} />}
/>

Hide Entire Axis

<AreaChart
  data={data}
  xAxis={<LinearXAxis visibility="hidden" />}
/>

Remove Axis Line

<LinearYAxis type="value" axisLine={null} />

Fixed Label Rotation

<LinearXAxisTickLabel rotation={45} />

Category Axis

<LinearXAxis type="category" />

Time Axis with Custom Interval

import { timeMonth } from 'd3-time';

<LinearXAxis
  type="time"
  tickSeries={<LinearXAxisTickSeries interval={timeMonth.every(3)} />}
/>