victory-polar-axis
Advanced tools
victory-polar-axis@^30.0.0 exports VictoryPolarAxis
View these docs at https://formidable.com/open-source/victory/docs/victory-polar-axis to see live examples.
VictoryPolarAxis renders a single axis which can be used on its own or composed with VictoryChart.
<svg width={400} height={400}>
<VictoryPolarAxis
width={400}
height={400}
theme={VictoryTheme.material}
standalone={false}
/>
<VictoryPolarAxis dependentAxis
width={400}
height={400}
domain={[0, 10]}
theme={VictoryTheme.material}
standalone={false}
/>
</svg>
type: boolean || object
VictoryPolarAxis uses the standard animate prop. Read about it here
See the Animations Guide for more detail on animations
animate={{
duration: 2000,
easing: "bounce"
}}
type: number
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.
default: axisAngle={0}
<VictoryPolarAxis dependentAxis
theme={VictoryTheme.material}
axisAngle={45}
/>
type: element
The axisComponent prop takes a component instance which will be responsible for rendering an axis line for the dependent axis. The independent axis renders a circularAxisComponent. The new element created from the passed axisComponent will be provided with the following props calculated by VictoryPolarAxis: x1, y1, x2, y2, 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 an axisComponent is not provided, VictoryPolarAxis will use its default Line component.
default: axisComponent={<Line type={"axis"}/>}
axisComponent={<Line events={{ onClick: handleClick }}/>}
type: element
The axisLabelComponent prop takes a component instance which will be used to render the axis label. The new element created from the passed axisLabelComponent will be supplied with the following props: x, y, verticalAnchor, textAnchor, angle, transform, 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 axisLabelComponent is omitted, a new VictoryLabel will be created with props described above.
Note: Axis labels are only rendered with the dependent axis in polar charts.
default: axisLabelComponent={<VictoryLabel/>}
axisLabelComponent={<VictoryLabel dy={20}/>}
type: number
The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.
<VictoryChart polar
theme={VictoryTheme.material}
>
{
["intelligence", "strength", "speed", "stealth", "charisma"].map((d, i) => {
return (
<VictoryPolarAxis dependentAxis
key={i}
label={d}
labelPlacement="perpendicular"
style={{ tickLabels: { fill: "none" } }}
axisValue={i}
/>
);
})
}
<VictoryBar
style={{ data: { fill: "tomato", width: 25 } }}
data={[
{ x: 0, y: 10 },
{ x: 1, y: 25 },
{ x: 2, y: 40 },
{ x: 3, y: 50 },
{ x: 4, y: 50 }
]}
/>
</VictoryChart>
type: element
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.
default: circularAxisComponent={<Arc type={"axis"}/>}
circularAxisComponent={<Arc r={300}/>}
type: element
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.
default: circularGridComponent={<Arc type={"grid"}/>}
circularGridComponent={<Arc r={300}/>}
type: element
VictoryPolarAxis uses the standard containerComponent prop. Read about it here
The following victory containers work with polar charts:
VictoryContainer, VictorySelectionContainer, VictoryVoronoiContainer and VictoryZoomContainer
containerComponent={<VictoryVoronoiContainer/>}
type: boolean
The dependentAxis boolean prop specifies whether the axis corresponds to the dependent variable (usually y, or the radial dimension on a polar chart). This prop is useful when composing VictoryPolarAxis with other components to form a chart.
default: dependentAxis={false}
<div style={{ display: "flex" }}>
<VictoryPolarAxis dependentAxis theme={VictoryTheme.material} />
<VictoryPolarAxis theme={VictoryTheme.material} />
</div>
type: array[low, high] || { x: [low, high], y: [low, high] }
VictoryPolarAxis uses the standard domain prop. Read about it here
domain={{x: [0, 100], y: [0, 1]}}
type: number || array[left, right] || { x: [left, right], y: [bottom, top] }
VictoryPolarAxis uses the standard domainPadding prop. Read about it here
domainPadding={{x: [10, -10], y: 5}}
type: number
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.
default: endAngle={360}
<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>
type: array[objects]
VictoryPolarAxis uses the standard events prop. Read about it here
See the Events Guide []for more information on defining events.
note: 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".
type: array[object]
VictoryPolarAxis uses the standard externalEventMutations prop. Read about it in detail
type: element
The gridComponent prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed gridComponent 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 gridComponent is not provided, VictoryPolarAxis will use its default Line component.
default: gridComponent={<Line type={"grid"}/>}
gridComponent={<Line events={{ onClick: handleClick }}/>}
type: element
VictoryPolarAxis uses the standard groupComponent prop. Read about it here
default: <g/>
groupComponent={<g transform="translate(10, 10)" />}
type: number
VictoryPolarAxis uses the standard height prop. Read about it here
default (provided by default theme): height={300}
height={400}
type: number
When the innerRadius prop is set, polar axes will be hollow rather than circular.
<VictoryPolarAxis theme={VictoryTheme.material} innerRadius={50}/>
type: boolean
The invertAxis boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation.
default: invertAxis={false}
type: string
The label prop defines the label that will appear with a dependent axis. Labels will not appear with independent polar axes. This prop should be given as a string.
<VictoryPolarAxis dependentAxis
theme={VictoryTheme.material}
label="wind speed"
labelPlacement="perpendicular"
/>
type: "parallel" || "perpendicular" || "vertical"
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".
default: labelPlacement="parallel"
<VictoryPolarAxis
labelPlacement="perpendicular"
theme={VictoryTheme.material}
/>
type: number || { x: number, y: number }
VictoryPolarAxis uses the standard maxDomain prop. Read about it in detail
<VictoryPolarAxis
dependentAxis
tickValues={[1, 2, 3]}
maxDomain={5}
/>
type: number || { x: number, y: number }
VictoryPolarAxis uses the standard minDomain prop. Read about it in detail
<VictoryPolarAxis
dependentAxis
tickValues={[2, 3, 4, 5]}
minDomain={0}
/>
type: string
VictoryPolarAxis uses the standard name prop. Read about it here
name="series-1"
type: { x: number, y: number }
The origin prop is only used by polar charts, and is usually controlled by VictoryChart. It will not typically be necessary to set an origin prop manually
Read about the origin prop in detail
type: number || { top: number, bottom: number, left: number, right: number }
VictoryPolarAxis uses the standard padding prop. Read about it here
default (provided by default theme): padding={50}
padding={{ top: 20, bottom: 60 }}
type: array[low, high] || { x: [low, high], y: [low, high] }
The range prop is usually controlled by VictoryChart. It will not typically be necessary to set a range prop manually
Read about the range prop in detail
type: scale || { x: scale, y: scale }
VictoryPolarAxis uses the standard scale prop. Read about it here
Options for scale include "linear", "time", "log", "sqrt" and the d3-scale functions that correspond to these options.
note: Though VictoryPolarAxis can take a scale prop with scales defined for both x and y, only the scale that corresponds the given axis will be used.
default: scale="linear"
scale={{x: "linear", y: "log"}}
The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
type: boolean || { x: boolean, y: boolean }
VictoryPolarAxis uses the standard singleQuadrantDomainPadding prop. Read about it here
type: boolean
VictoryPolarAxis uses the standard standalone prop. Read about it here
note: When VictoryPolarAxis is nested within a component like VictoryChart, this prop will be set to false
default: standalone={true}
<svg width={350} height={350}>
<VictoryPolarAxis
theme={VictoryTheme.material}
standalone={false}
/>
<VictoryPolarAxis dependentAxis
axisAngle={45}
labelPlacement="vertical"
theme={VictoryTheme.material}
standalone={false}
/>
</svg>
type: number
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.
default: startAngle={0}
<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>
type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }
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 each tick.
note: When a component is rendered as a child of another Victory component, or within a custom <svg> element with standalone={false} parent styles will be applied to the enclosing <g> tag. Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>.
note: custom angle and verticalAnchor properties may be included in labels styles.
default (provided by default theme): See grayscale theme for more detail
<VictoryPolarAxis
style={{
axis: {stroke: "black"},
grid: {stroke: (t) => t > 0.5 ? "red" : "blue"},
tickLabels: {fontSize: 15, padding: 15}
}}
/>
type: object
VictoryPolarAxis uses the standard theme prop. Read about it here
See the Themes Guide for information about creating custom themes.
default: theme={VictoryTheme.grayscale}
Note: Use the dependentAxis and independentAxis namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the axis namespace.
theme={VictoryTheme.material}
type: element
The tickComponent prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed tickComponent 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 tickComponent is not provided, VictoryPolarAxis will use its default Line component.
default: tickComponent={<Line type={"tick"}/>}
tickComponent={<Line events={{ onClick: handleClick }}/>}
type: number
The tickCount prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in tickValues or tickFormat, the tickCount prop will be used to downsample the provided array to the specified length. If tickValues are not explicitly provided, this value is used by d3Scale to calculate an approximate number of ticks. d3Scale prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer.
type: array || function
The tickFormat prop specifies how tick values should be labeled. The tickFormat prop can be given as an array of values to display for each tick, or as a function to be applied to every tickValue. When given as a function, tickFormat will be called with the following arguments: tick - the individual tick value, index - the index of the tick in the array, and ticks - the entire array of ticks.
<VictoryPolarAxis
tickValues={[2.11, 3.9, 6.1, 8.05]}
labelPlacement="vertical"
tickFormat={(t) => `${Math.round(t)}k`}
/>
type: element
The tickLabelComponent prop takes a component instance which will be used to render the axis label. The new element created from the passed tickLabelComponent will be supplied with the following props: x, y, tick, verticalAnchor, textAnchor, angle, transform, 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 tickLabelComponent is omitted, a new VictoryLabel will be created with props described above.
default: tickLabelComponent={<VictoryLabel/>}
tickLabelComponent={<VictoryLabel dy={20}/>}
type: array
The tickValues prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (i.e., all numbers). The tickValues prop is used to specify the values of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the tickFormat prop to specify how ticks should be labeled. Note: tickValues should be given as a unique array.
<VictoryPolarAxis
labelPlacement="vertical"
tickValues={[2, 4, 6, 8]}
/>
type: number
VictoryPolarAxis uses the standard width prop. Read about it here
default (provided by default theme): width={450}
width={400}
30.3.0 (2018-08-24)
VictoryVoronoiContainer label function. Thanks @evsheinoFAQs
Polar Axis Component for Victory
The npm package victory-polar-axis receives a total of 147,375 weekly downloads. As such, victory-polar-axis popularity was classified as popular.
We found that victory-polar-axis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.