VictoryAxisCommonProps
A set of props available to components that implement an Axis in Victory.
Props
axisComponent
The axisComponent prop takes a component instance which will be responsible for rendering an axis line. The new element created from the passed axisComponent will be provided with the following props calculated by VictoryAxis: 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, VictoryAxis will use its default LineSegment component.
axisComponent={<LineSegment events={{ onClick: handleClick }}/>}
axisLabelComponent
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.
axisLabelComponent={<VictoryLabel dy={20}/>}
axisValue
The axisValue prop may be used to position the dependent axis. This prop is useful when dependent axes should line up with values on the independent axis.
dependentAxis
The dependentAxis boolean prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing VictoryAxis with other components to form a chart.
<VictoryAxis dependentAxis />
gridComponent
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 VictoryAxis: 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, VictoryAxis will use its default LineSegment component.
gridComponent={<LineSegment events={{ onClick: handleClick }}/>}
invertAxis
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.
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 of these elements, such as tick, index, and text.
style?: {
parent?: VictoryStyleObject;
axis?: VictoryStyleObject;
axisLabel?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
grid?: VictoryStyleObject;
ticks?: VictoryTickStyleObject;
tickLabels?: VictoryLabelStyleObject | VictoryLabelStyleObject[];
};
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>.
custom angle and verticalAnchor properties may be included in labels styles.
<VictoryAxis label="Label" style={{ axis: { stroke: "#756f6a" }, axisLabel: { fontSize: 20, padding: 30, }, grid: { stroke: ({ tick }) => tick > 0.5 ? "red" : "grey", }, ticks: { stroke: "grey", size: 5 }, tickLabels: { fontSize: 15, padding: 5, }, }} />
tickComponent
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 VictoryAxis: 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, VictoryAxis will use its default LineSegment component.
tickComponent={<LineSegment events={{ onClick: handleClick }}/>}
tickCount
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.
tickFormat
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.
<VictoryAxis tickValues={[2.11, 3.9, 6.1, 8.05]} tickFormat={(t) => `${Math.round(t)}k` } />
tickLabelComponent
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, text, 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.
tickLabelComponent={<VictoryLabel dy={20}/>}
tickValues
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.
<VictoryAxis tickValues={[2, 4, 6, 8]} />