Axis

In REAVIZ, an axis is a fundamental component of a chart, providing a reference framework for plotting data points. Axes help in organizing and displaying data in a clear and structured manner, allowing for easy interpretation and analysis.

Types supported by reaviz:

Linear Axis - A linear axis is used in most charts to represent data along horizontal (x-axis) and vertical (y-axis) lines.
Radial Axis - A radial axis is used in radial charts to represent data in a circular format.

Where to use:

Linear Axes: Use linear axes for charts that require data to be displayed along straight lines, such as line charts, bar charts, and scatter plots.
Radial Axes: Use radial axes for charts that display data in a circular layout, such as radial bar charts and radial area charts.

Examples

Linear

Advanced Label Positioning

Radial

API

LinearAxis

Name	Type	Default
`height`	`number` Height of the axis. Set internally by the parent chart.
`width`	`number` Width of the axis. Set internally by the parent chart.
`domain`	`ChartDataTypes[]` Explicit domain to use for the axis.
`scaled`	`boolean` Whether the axis is already scaled.	`false`
`roundDomains`	`boolean` Whether to round the domain values.	`false`
`type`	`"value" \| "time" \| "category" \| "duration"` Type of the axis.
`position`	`"start" \| "end" \| "center"` Position of the axis relative to the chart area.
`tickSeries`	`ReactElement<LinearAxisTickSeriesProps, FC<Partial<LinearAxisTickSeriesProps>>>` The tick series component for the axis.
`axisLine`	`ReactElement<LinearAxisLineProps, FC<Partial<LinearAxisLineProps>>> \| null` The axis line component.	`<LinearAxisLine />`
`scale`	`any` D3 scale for the axis. Set internally by the parent chart.
`visibility`	`"visible" \| "hidden"` Visibility of the axis.	`'visible'`
`orientation`	`"horizontal" \| "vertical"` Orientation of the axis.
`onDimensionsChange`	`(event: LinearAxisDimensionChanged) => void` Fires when the axis dimensions change.

LinearAxisLine

Name	Type	Default
`height`	`number`
`width`	`number`
`strokeColor`	`string` Stroke color of the axis line.	`'#8F979F'`
`strokeWidth`	`number` Stroke width of the axis line.	`1`
`strokeGradient`	`ReactElement<GradientProps, FC<Partial<GradientProps>>> \| null` Optional gradient to apply to the axis line stroke.
`scale`	`any`
`orientation`	`"horizontal" \| "vertical"`
`className`	`string`

LinearAxisTickLabel

Name	Type	Default
`text`	`string` Text content (possibly ellipsized) for the label. Set internally by `LinearAxisTickSeries`.
`fullText`	`string` Original, unellipsized text for the label. Set internally by `LinearAxisTickSeries`.
`data`	`any` The raw data value for this tick (e.g., Date object, number, string).
`angle`	`number` Rotation angle of the label in degrees. Set internally by `LinearAxisTickSeries`.
`orientation`	`"horizontal" \| "vertical"` Orientation of the axis. Set internally by `LinearAxisTickSeries`.
`half`	`"start" \| "end" \| "center"` Which half of the axis this label belongs to. Set internally by `LinearAxisTickSeries`.
`line`	`ReactElement<LinearAxisTickLineProps, FC<Partial<LinearAxisTickLineProps>>>` The companion tick line element. Set internally by `LinearAxisTickSeries`.
`format`	`(v: any) => any` Custom formatter for the label value.
`formatTooltip`	`(value: any) => any` Format tooltip title on hover label.
`fill`	`string` Text fill color.	`'#8F979F'`
`fontSize`	`number` Font size of the label.	`11`
`fontFamily`	`string` Font family of the label.	`'sans-serif'`
`rotation`	`number \| boolean` Whether to rotate the label.	`true`
`padding`	`number \| { fromAxis: number; alongAxis: number; }` Padding between the axis and the label.	`5`
`textAnchor`	`"start" \| "end" \| "middle"` Optional override for the text anchor.
`position`	`"start" \| "end" \| "center"` Position of the label relative to the tick.
`align`	`"start" \| "end" \| "center" \| "inside" \| "outside"` Alignment of the label relative to the axis.	`'center'`
`className`	`string` CSS class to apply.
`onClick`	`(event: MouseEvent<SVGGElement, MouseEvent>, data: any) => void` Click handler for the label.

LinearAxisTickLine

Name	Type	Default
`height`	`number` Height of the axis. Set internally by the parent component.
`width`	`number` Width of the axis. Set internally by the parent component.
`orientation`	`"horizontal" \| "vertical"` Orientation of the axis. Set internally by the parent component.
`size`	`number` Size of the tick line.	`5`
`strokeColor`	`string` Stroke color of the tick line.	`'#8F979F'`
`strokeWidth`	`number` Stroke width of the tick line.	`1`
`position`	`"start" \| "end" \| "center"` Position of the tick line relative to the axis.
`className`	`string` CSS class to apply.

LinearAxisTickSeries

Name	Type	Default
`height`	`number` Height of the axis. Set internally by `LinearAxis`.
`width`	`number` Width of the axis. Set internally by `LinearAxis`.
`scale`	`any` D3 scale for the axis. Set internally by `LinearAxis`.
`interval`	`number \| TimeInterval` Optional interval used to override the tick count.
`tickSize`	`number` Size of each tick interval.	`30`
`tickValues`	`any[]` Explicit tick values. When provided, overrides automatic tick selection.
`orientation`	`"horizontal" \| "vertical"` Orientation of the axis. Set internally by `LinearAxis`.
`label`	`ReactElement<LinearAxisTickLabelProps, FC<Partial<LinearAxisTickLabelProps>>> \| null` The tick label component.	`<LinearAxisTickLabel />`
`line`	`ReactElement<LinearAxisTickLineProps, FC<Partial<LinearAxisTickLineProps>>> \| null` The tick line component.	`<LinearAxisTickLine height={10} width={10} orientation="horizontal" position="center" />`
`axis`	`LinearAxisProps` Parent axis props. Set internally by `LinearAxis`.
`ellipsisLength`	`number` The maximum length for ellipsizing tick labels.	`18`

RadialAxis

Name	Type	Default
`height`	`number` Height of the axis.
`width`	`number` Width of the axis.
`xScale`	`any` Scale to use for the axis.
`innerRadius`	`number` Inner radius of the axis.	`10`
`type`	`"value" \| "time" \| "category"` Type of the axis.	`'value'`
`arcs`	`ReactElement<RadialAxisArcSeriesProps, FC<Partial<RadialAxisArcSeriesProps>>> \| null` Arc element to render.	`<RadialAxisArcSeries />`
`ticks`	`ReactElement<RadialAxisTickSeriesProps, FC<Partial<RadialAxisTickSeriesProps>>> \| null` Tick element to render.	`<RadialAxisTickSeries />`
`startAngle`	`number` Start angle for the first value.	`0`
`endAngle`	`number` End angle for the last value.	`2 * Math.PI`

RadialAxisTick

Name	Type	Default
`scale`	`any` Scale to use for the tick.
`outerRadius`	`number` Outer radius of the arc.
`innerRadius`	`number` Inner radius of the arc.
`padding`	`number` Padding between the tick and the label.	`0`
`data`	`any` Data to render.
`index`	`number` Index of the tick.
`line`	`ReactElement<RadialAxisTickLineProps, FC<Partial<RadialAxisTickLineProps>>> \| null` Line element to render.	`<RadialAxisTickLine />`
`label`	`ReactElement<RadialAxisTickLabelProps, FC<Partial<RadialAxisTickLabelProps>>> \| null` Label element to render.	`<RadialAxisTickLabel />`
`startAngle`	`number` Start angle for the first value.
`endAngle`	`number` End angle for the last value.

RadialAxisTickLabel

Name	Type	Default
`data`	`any` Data to render.
`lineSize`	`number` Size of the line.
`fill`	`string` Color of the text.	`'#71808d'`
`fontSize`	`number` Font size of the text.	`11`
`rotation`	`number` Rotation of the text.
`fontFamily`	`string` Font family of the text.	`'sans-serif'`
`index`	`number` Index of the tick.
`padding`	`number` Padding of the tick.	`15`
`point`	`any` Point of the tick.
`autoRotate`	`boolean` Auto rotate the text.	`true`
`format`	`(value: any, index: number) => any` Format of the label.
`formatTooltip`	`(value: any, index: number) => any` Format tooltip title on hover label.
`onClick`	`(event: MouseEvent<SVGGElement, MouseEvent>, value: any) => void` Click handler for the label.

RadialAxisTickLine

Name	Type	Default
`size`	`number` Size of the tick line.	`10`
`stroke`	`string` Stroke color of the tick line.	`'rgba(113, 128, 141, .5)'`
`innerRadius`	`number` Inner radius of the arc.
`outerRadius`	`number` Outer radius of the arc.
`position`	`"inside" \| "outside"` Position of the tick line.	`'inside'`

RadialAxisTickSeries

Name	Type	Default
`scale`	`any` Scale to use for the tick.
`count`	`number` Number of ticks to render.	`12`
`interval`	`number \| TimeInterval` Interval between ticks.
`tickValues`	`any[]` Tick values to render.
`outerRadius`	`number` Outer radius of the arc.
`type`	`"value" \| "category" \| "time" \| "duration"` Type of the axis.	`'time'`
`innerRadius`	`number` Inner radius of the arc.
`tick`	`((tick: TickCallback) => ReactElement<RadialAxisTickProps, FC<Partial<RadialAxisTickProps>>>) \| ReactElement<...>` Tick element to render.	`<RadialAxisTick />`
`startAngle`	`number` Start angle for the first value.	`0`
`endAngle`	`number` End angle for the last value.	`2 * Math.PI`

RadialAxisArc

Name	Type	Default
`index`	`number` Index of the arc.
`scale`	`any` Scale to use for the arc.
`stroke`	`string \| ((index: number) => string)` Stroke color of the arc.	`'#71808d'`
`strokeDasharray`	`string \| ((index: number) => string)` Stroke dash array of the arc.	`'1,4'`
`startAngle`	`number` Start angle for the first value.	`0`
`endAngle`	`number` End angle for the last value.	`2 * Math.PI`

RadialAxisArcLine

Name	Type	Default
`stroke`	`string \| ((index: number) => string)` Stroke color of the arc.	`'#71808d'`
`data`	`{ x: number; y: number; }[]` Data to render the line.
`index`	`number` Index of the arc.

RadialAxisArcSeries

Name	Type	Default
`arc`	`ReactElement<RadialAxisArcProps, FC<Partial<RadialAxisArcProps>>>` Arc element to render.	`<RadialAxisArc />`
`line`	`ReactElement<RadialAxisArcLineProps, FC<Partial<RadialAxisArcLineProps>>>` Line element to render.
`count`	`number` Number of arcs to render.	`12`
`innerRadius`	`number` Inner radius of the arc.
`outerRadius`	`number` Outer radius of the arc.
`tickValues`	`any[]` Calculated tick values by the Radial Axis.
`startAngle`	`number` Start angle for the first value.	`0`
`endAngle`	`number` End angle for the last value.	`2 * Math.PI`

Last updated on June 10, 2026

Word Cloud 🆕Brush