Edit this page

Custom Components

Every element that a Victory component renders may be altered or completely replaced. Most components expose dataComponent, labelComponent, groupComponent, and 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 the primitive component instances.

            

Wrapping components

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 dataComponent or 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 Point in VictoryScatter.

            

Other Victory components may even be used in creating custom components, as in the example below.

            

Extending primitive components

It may be desireable to alter some portion of a primitive component while leaving most behaviors intact. Though usually not advised, in rare instances it might make sense to extend one of Victory's primitive components. This pattern is used to create react native compatible versions of Victory components. In the example code shown below, the react native compatible version of Point is created by extending Point and overriding the renderPoint method to render react-native-svg components rather than svg elements.

import React from "react";
import { Path } from "react-native-svg";
import { NativeHelpers } from "../../index";
import { Point } from "victory-core";

export default class extends Point {
  renderPoint(path, style, events) {
    const nativeStyle = NativeHelpers.getStyle(style);
    return <Path d={path} {...nativeStyle} {...events}/>;
  }
}

Extending components can be very problematic, and caution should be exercised. Extending primitive components requires deep, and up-to-date knowledge of the component code. Extending more complex Victory components is not advised.

The following example shows a custom GradientArea component that extends from Area. The renderArea method is completely overridden in order to render an area path with a custom gradient. This is a convenient shortcut, but it would be safer to write a GradientArea component from scratch.