Every element that a Victory component renders may be altered or completely replaced. Most components expose
containerComponent props. The primitive components that Victory components render by default are simple, stateless components with a consistent set of props whenever possible. These primitive components are exported for users to alter, wrap, extend and reference when creating custom components.
Altering default components
Victory components set props on their primitive components, but these may be overridden or augmented by setting props directly on the primitive component instances.
Victory components may be wrapped to customize or change behavior. Wrapper components should apply any props they receive from other Victory components to the components they render.
Creating new components
Any component that renders valid svg elements (or elements wrapped in
<foreignObject>) may be used as a
labelComponent in Victory components. Custom components will be provided with the same props as default components. In the following example, a custom
CatPoint component is used in place of
More complex components may be supplied as direct children of
VictoryChart. These components will have access to shared chart props such as
scale. In the example below, the custom
Polygon components draws a polygon based on a collection of points. The scale provided by
VictoryChart is used to correctly position the points within the chart.
Other Victory components may even be used in creating custom components, as in the example below.
Since any custom SVG element can be used as a Victory component, any styling system can be used to style custom components, including styled components, CSS modules, or inline styles.
Here's an example using SVG + styled components.