VictoryPolarAxis
Renders a circular axis which can be used on its own or composed with VictoryChart.
For examples of VictoryPolarAxis in action, visit the Chart Axis guide.
Example
<svg width={400} height={400}> <VictoryPolarAxis width={400} height={400} theme={VictoryTheme.clean} standalone={false} /> <VictoryPolarAxis dependentAxis width={400} height={400} domain={[0, 10]} theme={VictoryTheme.clean} standalone={false} /> </svg>
Inherited Props
VictoryAxisCommonProps
VictorySingleLabelableProps
Component Props
axisAngle
The axisAngle prop is used to position the dependent axis. This prop should be given in degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. This prop only affects the dependent axis.
<VictoryPolarAxis dependentAxis theme={VictoryTheme.clean} axisAngle={45} />
circularAxisComponent
The circularAxisComponent prop takes a component instance which will be responsible for rendering an axis arc for the independent axis. The dependent axis renders an axisComponent. The new element created from the passed circularAxisComponent will be provided with the following props calculated by VictoryPolarAxis: style, events,
cx, cy, r, startAngle, and endAngle. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a circularAxisComponent is not provided, VictoryPolarAxis will use its default [Arc component][].
circularAxisComponent={<Arc r={300}/>}
circularGridComponent
The circularGridComponent prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed circularGridComponent will be provided with the following props calculated by VictoryPolarAxis: x1, y1, x2, y2, tick, style and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a circularGridComponent is not provided, VictoryPolarAxis will use its default [Arc component][].
circularGridComponent={<Arc r={300}/>}
endAngle
The endAngle props defines the overall end angle of the axis in degrees. This prop is used in conjunction with startAngle to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.
<div style={{ display: "flex" }}> <VictoryPolarAxis startAngle={90} endAngle={450} tickValues={[0, 90, 180, 270]} labelPlacement="vertical" /> <VictoryPolarAxis startAngle={0} endAngle={180} tickValues={[0, 45, 90, 135, 180]} /> </div>
events
VictoryPolarAxis uses the standard events prop.
See the Events Guide for more information on defining events.
Valid event targets for VictoryPolarAxis are "axis", "axisLabel", "grid", "ticks", and "tickLabels".
Targets that correspond to only one element ("axis" and "axisLabel") should use the special eventKey "all".
innerRadius
When the innerRadius prop is set, polar axes will be hollow rather than circular.
<VictoryPolarAxis theme={VictoryTheme.clean} />
labelPlacement
The labelPlacement prop specifies how tick labels should be placed relative to the angular tick values. Options for this prop are "vertical", "parallel", and "perpendicular".
<VictoryPolarAxis labelPlacement="perpendicular" theme={VictoryTheme.clean} />
startAngle
The startAngle props defines the overall end angle of the axis in degrees. This prop is used in conjunction with endAngle to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.
<div style={{ display: "flex" }}> <VictoryPolarAxis startAngle={90} endAngle={450} tickValues={[0, 90, 180, 270]} labelPlacement="vertical" /> <VictoryPolarAxis startAngle={0} endAngle={180} tickValues={[0, 45, 90, 135, 180]} /> </div>
style
The style prop defines the style of the component. The style prop should be given as an object with styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for grid, tick, and tickLabel style properties, and they will be evaluated with the props corresponding to each axis element, such as tick and index.
<VictoryPolarAxis style={{ axis: { stroke: "black" }, grid: { stroke: ({ tick }) => tick > 0.5 ? "red" : "blue", }, tickLabels: { fontSize: 15, padding: 15, }, }} />