VictoryCommonThemeProps
Common props for all Victory components that use themes. Some components override these props with specific implementations. See the specific component's API documentation for more information.
Props
animate
The animate prop specifies props for VictoryAnimation and VictoryTransition to use. The animate prop may be used to specify the duration, delay, and easing of an animation as well as the behavior of onEnter and onExit and onLoad transitions. Each Victory component defines its own default transitions, but these may be modified, or overwritten with the animate prop. An animationWhitelist may also be specified on the animate prop. When given, only props specified in the whitelist will animate.
See the Animations Guide for more detail on animations and transitions
function App(props) { const [state, setState] = React.useState({ data: getData(), size: getSize(), }); React.useEffect(() => { const setStateInterval = window.setInterval(() => { setState({ data: getData(), size: getSize(), }); }, 3000); return () => { window.clearInterval( setStateInterval, ); }; }, []); return ( <VictoryChart domain={{ y: [0, 1] }} animate={{ duration: 2000 }} theme={VictoryTheme.clean} > <VictoryScatter size={state.size} data={state.data} style={{ data: { opacity: ({ datum }) => datum.opacity || 1, }, }} animate={{ animationWhitelist: [ "style", "data", "size", ], // Try removing "size" onExit: { duration: 500, before: () => ({ opacity: 0.3, _y: 0, }), }, onEnter: { duration: 500, before: () => ({ opacity: 0.3, _y: 0, }), after: (datum) => ({ opacity: 1, _y: datum._y, }), }, }} /> </VictoryChart> ); } function getData() { const num = Math.floor( 10 * Math.random() + 5, ); const points = new Array(num).fill(1); return points.map((point, index) => { return { x: index + 1, y: Math.random(), }; }); } function getSize() { return Math.random() * 10; } render(<App />);
containerComponent
The containerComponent prop takes a component instance which will be used to create a container element for standalone charts. If a containerComponent is not provided, the default VictoryContainer component will be used. Other Victory container components include:
- VictoryBrushContainer
- VictoryCursorContainer
- VictorySelectionContainer
- VictoryVoronoiContainer
- VictoryZoomContainer
- hybrid containers may be created using the createContainer helper
Victory container components all support title and desc props, which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. These props may be set by passing them directly to the supplied component. By default, all Victory container components render responsive svg elements using the viewBox attribute. To render a static container, set responsive={false} directly on the container instance supplied via the containerComponent prop. All Victory container components also render a Portal element that may be used in conjunction with VictoryPortal to force components to render above other children.
Container components are supplied with the following props:
domainheighthorizontalorigin(for polar charts)paddingpolarscalestandalonestylethemewidth
<VictoryScatter containerComponent={ <VictoryCursorContainer cursorLabel={({ datum }) => `${datum.x.toPrecision( 2, )}, ${datum.y.toPrecision(2)}` } /> } />
disableInlineStyles
Allows Victory components to work better with CSS classes or styled-components. By default, Victory provides inline styles to chart components, which will override any conflicting CSS styles. This flag will remove the inline styles, making it easier to provide custom styling for components via CSS.
If this prop is passed to a chart type (e.g. VictoryBar), it will apply to all data and label components for that chart.
domainPadding
The domainPadding prop specifies a number of pixels of padding to add to the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. When given as a single number, domainPadding will be applied to the upper and lower bound of both the x and y domains. This prop may also be given as an object with numbers or two-element arrays specified for x and y. When specifying arrays for domainPadding, the first element of the array will specify the padding to be applied to domain minimum, and the second element will specify padding the be applied to domain maximum.
The x value supplied to the domainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.
Common Usage
domainPadding={20}domainPadding={{ x: [20, 0] }}
Values supplied for domainPadding will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, domainPadding will be coerced so that the resulted padded domain will not include negative values.
<VictoryChart domainPadding={{ x: 100 }} theme={VictoryTheme.clean} > <VictoryBar data={sampleData} /> </VictoryChart>
externalEventMutations
Occasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the externalEventMutation prop to specify a set of mutations to apply to a given chart.
type EventCallbackInterface<T, U> = {
target: T;
eventKey: U;
childName?: StringOrNumberOrList;
mutation: (props: any) => any;
callback?: () => void;
};
type externalEventMutations =
EventCallbackInterface<
string | string[],
StringOrNumberOrList
>[];
The target, eventKey, and childName (when applicable) must always be specified. The mutation function will be called with the current props of the element specified by the target, eventKey and childName provided. The mutation function should return a mutation object for that element. The callback prop should be used to clear the externalEventMutations prop once the mutation has been applied. Clearing externalEventMutations is crucial for charts that animate.
function App() { const [state, setState] = React.useState({ externalMutations: undefined, }); function removeMutation() { setState({ externalMutations: undefined, }); } function clearClicks() { setState({ externalMutations: [ { childName: "Bar-1", target: ["data"], eventKey: "all", mutation: () => ({ style: undefined, }), callback: removeMutation, }, ], }); } const buttonStyle = { backgroundColor: "black", color: "white", padding: "10px", marginTop: "10px", }; return ( <div> <button onClick={clearClicks} style={buttonStyle} > Reset </button> <VictoryChart domain={{ x: [0, 5] }} externalEventMutations={ state.externalMutations } events={[ { target: "data", childName: "Bar-1", eventHandlers: { onClick: () => ({ target: "data", mutation: () => ({ style: { fill: "orange", }, }), }), }, }, ]} theme={VictoryTheme.clean} > <VictoryBar name="Bar-1" style={{ data: { fill: "grey" }, }} labels={() => "click me!"} data={[ { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 1 }, { x: 4, y: 5 }, ]} /> </VictoryChart> </div> ); } render(<App />);
External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.
groupComponent
The groupComponent prop takes a component instance which will be used to create group elements for use within container elements. For most components, this prop defaults to a <g> tag. Continuous data components like VictoryLine and VictoryArea use VictoryClipContainer a component which renders a <g> tag with a clipPath def. This allows continuous data components to transition smoothly when new data points enter and exit. VictoryClipContainer may also be used with components like VictoryScatter to prevent data from overflowing the chart area.
<VictoryChart theme={VictoryTheme.clean} > <VictoryScatter data={sampleData} size={20} groupComponent={ <VictoryClipContainer /> } /> </VictoryChart>
height
The height prop determines the height of the containing <svg>. By default Victory components render responsive containers with the viewBox attribute set to viewBox="0, 0, width, height" and width="100%", height="auto". In responsive containers, the width and height props affect the aspect ratio of the rendered component, while the absolute width and height are determined by the container. To render a static container, pass responsive={false} to the containerComponent like containerComponent={<VictoryContainer responsive={false}/>}, or set standalone={false} and render the resulting <g> tag in your own <svg> container. When a component is nested within VictoryChart, VictoryStack, or VictoryGroup setting the height prop on the child component will have no effect.
<div> <VictoryBar height={500} /> <VictoryBar height={500} containerComponent={ <VictoryContainer responsive={false} /> } /> </div>
horizontal
The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.
<VictoryChart theme={VictoryTheme.clean} domainPadding={{ x: 10 }} > <VictoryBar horizontal data={sampleData} /> </VictoryChart>
maxDomain
The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used.
The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.
Common Usage
maxDomain={0}maxDomain={{ y: 0 }}
<VictoryChart maxDomain={{ y: 0 }} theme={VictoryTheme.clean} > <VictoryLine data={[ { x: 1, y: -2 }, { x: 2, y: 1 }, { x: 3, y: -1 }, { x: 4, y: -3 }, ]} /> </VictoryChart>
minDomain
The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used.
The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.
Common Usage
minDomain={0}minDomain={{ y: 0 }}
<VictoryChart minDomain={{ y: 0 }} theme={VictoryTheme.clean} > <VictoryLine data={[ { x: 1, y: 2 }, { x: 2, y: -1 }, { x: 3, y: 1 }, { x: 4, y: 3 }, ]} /> </VictoryChart>
name
The name prop is used to reference a component instance when defining shared events.
origin
The origin prop is used to define the center point in svg coordinates for polar charts. All children within a polar chart must share the same origin, so setting this prop on children nested within VictoryChart, VictoryStack, or VictoryGroup will have no effect. When this prop is not set, it will be calculated based on the width, height and padding of the chart.
This prop is typically not set by external consumers.
padding
The padding prop specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right. As with width and height, the absolute padding will depend on whether the component is rendered in a responsive container. When a component is nested within VictoryChart, VictoryStack, or VictoryGroup setting padding on the child component will have no effect.
Common Usage
padding={{top: 20, bottom: 60}}padding={40}
<VictoryChart padding={{ top: 40, bottom: 80, left: 40, right: 80, }} theme={VictoryTheme.clean} > <VictoryLine data={sampleData} /> </VictoryChart>
polar
Specifies whether a chart should be plotted on a polar coordinate system. All components in a given chart must share the same coordinate system, so setting this prop on children nested within VictoryChart, VictoryStack, or VictoryGroup will have no effect.
<div> <VictoryBar polar data={sampleData} labels={(d) => d.x.toFixed(0)} width={400} height={400} domain={{ x: [0, 7], y: [0, 7] }} style={{ data: { fill: "#c43a31", stroke: "black", strokeWidth: 2, }, }} theme={VictoryTheme.clean} /> <VictoryBar data={sampleData} labels={(d) => d.x.toFixed(0)} width={400} height={400} domain={{ x: [0, 7], y: [0, 7] }} style={{ data: { fill: "#c43a31", stroke: "black", strokeWidth: 2, }, }} theme={VictoryTheme.clean} /> </div>
range
Describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within VictoryChart, VictoryStack, or VictoryGroup will have no effect.
Common Usage
- Cartesian:
range={{ x: [50, 250], y: [50, 250] }} - Polar:
range={{ x: [0, 360], y: [0, 250] }}
This prop is typically not set by external consumers.
scale
The scale prop determines which scales your chart should use. In this case, "scale" refers to the d3 scale that is used inside Victory to determine the placement of data, ticks, and labels. A scale type can be either a string ("linear", "time", "log", "sqrt"), or a custom d3 scale function. This prop can be passed as a single scale, or as an object with scales specified for x and y. For "time" scales, data points should be Date objects or getTime() instances.
This prop should be set at the top-level of the chart in order to avoid being overwritten by the default value. In other words, unless an individual chart component is being used as a standalone component (without a VictoryChart wrapper), this prop should be added to the VictoryChart component.
The x value supplied to the scale prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will correspond to the y axis.
On categorical axis domains (such as bar chart), the only valid scale is "linear".
examples:
scale="time"scale={{x: "linear", y: "log"}}
<VictoryChart scale={{ x: "linear", y: "log" }} theme={VictoryTheme.clean} > <VictoryLine style={{ data: { stroke: "red" } }} domain={{ x: [0, 5] }} y={(d) => Math.pow(1 - d.x, 10)} /> </VictoryChart>
In this example, a discontinous scale plugin from d3fc can be used to create a custom scale function to skip weekends along the x-axis.
The data set has already been filtered to only include weekdays.
function App() { const data = [ { x: new Date(2021, 5, 1), y: 8 }, { x: new Date(2021, 5, 2), y: 10 }, { x: new Date(2021, 5, 3), y: 7 }, { x: new Date(2021, 5, 4), y: 4 }, { x: new Date(2021, 5, 7), y: 6 }, { x: new Date(2021, 5, 8), y: 3 }, { x: new Date(2021, 5, 9), y: 7 }, { x: new Date(2021, 5, 10), y: 9 }, { x: new Date(2021, 5, 11), y: 6 }, ]; const discontinuousScale = scaleDiscontinuous( d3Scale.scaleTime(), ).discontinuityProvider( discontinuitySkipWeekends(), ); return ( <VictoryChart scale={{ x: discontinuousScale }} theme={VictoryTheme.clean} > <VictoryArea data={data} style={{ data: { fill: "lightblue", stroke: "teal", }, }} /> </VictoryChart> ); } render(<App />);
sharedEvents
Used to coordinate events between Victory components using VictorySharedEvents.
This prop should not be set manually.
singleQuadrantDomainPadding
By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants.
The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.
Common Usage
singleQuadrantDomainPadding={false}singleQuadrantDomainPadding={{ x: false }}
<VictoryChart singleQuadrantDomainPadding={{ x: false, }} domainPadding={100} theme={VictoryTheme.clean} > <VictoryBar data={sampleData} /> <VictoryAxis crossAxis={false} /> </VictoryChart>
standalone
Specifies whether the component should be rendered in an independent <svg> element or in a <g> tag. This prop defaults to true, and renders an svg. Wrapper components like VictoryChart, VictoryStack, and VictoryGroup force children to use standalone={false}.
<svg width={300} height={300}> <circle cx={150} cy={150} r={150} fill="#c43a31" /> <VictoryArea standalone={false} width={300} height={300} padding={0} data={sampleData} /> </svg>
width
The width prop determines the width of the containing <svg>. By default Victory components render responsive containers with the viewBox attribute set to viewBox="0, 0, width, height" and width="100%", height="auto". In responsive containers, the width and height props affect the aspect ratio of the rendered component, while the absolute width and height are determined by the container. To render a static container, pass responsive={false} to the containerComponent like containerComponent={<VictoryContainer responsive={false}/>}, or set standalone={false} and render the resulting <g> tag in your own <svg> container. When a component is nested within VictoryChart, VictoryStack, or VictoryGroup setting width prop on the child component will have no effect.
<div> <VictoryBar width={1200} /> <VictoryBar width={1200} containerComponent={ <VictoryContainer responsive={false} /> } /> </div>