Victory

Victory Primitives

Victory is built around a set of simple, stateless components. Along with VictoryContainer, VictoryClipContainer, and VictoryLabel, the following list represents every simple element a Victory component might render. These simple components are responsible for supplying props to primitive components. Victory maintains a small subset of primitive components with additional logic in place to prevent unnecessary rendering. Extracting every rendered element into its own component allows Victory to support both web and React Native applications with very little additional code, as only a few components need to be modified to render react-native-svg elements rather than SVG elements. These primitives are also exposed for users to wrap, extend or reference when creating their own custom rendered components.

Primitive Components

Each of these primitive components renders SVG elements. The following components are the only Victory components that render SVG elements with the exception of VictoryContainer and VictoryPortal. These elements are used by other simple components such as Bar and Area.

Circle

Used by Background, VictoryClipContainer, and Voronoi

const Circle = props => <circle vectorEffect="non-scaling-stroke" {...props} />;

ClipPath

Used by VictoryClipContainer and Voronoi

const ClipPath = props => (
  <defs>
    <clipPath id={props.clipId}>{props.children}</clipPath>
  </defs>
);

Line

Used by Axis, Candle, and ErrorBar

const Line = props => <line vectorEffect="non-scaling-stroke" {...props} />;

Path

Used by Arc, Area, Bar, Curve, Flyout, Point, Slice, and Voronoi

const Path = props => <path {...props} />;

Rect

Used by VictoryClipPath, Background, Border, and Candle

const Rect = props => <rect vectorEffect="non-scaling-stroke" {...props} />;

Text

Used by VictoryLabel

const Text = props => {
  const { children, title, desc, ...rest } = props;
  return (
    <text {...rest}>
      {title && <title>{title}</title>}
      {desc && <desc>{desc}</desc>}
      {children}
    </text>
  );
};

TSpan

Used by VictoryLabel

const TSpan = props => <tspan {...props} />;

Simple Components

Arc

VictoryPolarAxis uses the Arc primitive to draw circular axes and grid lines. Arc renders a <Path> element. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered path
  • closedPath boolean a flag signifying whether this arc is should render a closed path
  • cx number the x coordinate of the center of the arc path
  • cy number the y coordinate of the center of the arc path
  • datum any the data point or tick corresponding to this arc
  • endAngle number the end angle of the arc given in degrees
  • events object events to attach to the rendered element
  • groupComponent element the element used to group rendered elements default <g/>
  • id string or number an id to apply to the rendered component
  • pathComponent element the rendered path element default <Path/>
  • r number the radius of the arc
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • startAngle number the start angle of the arc given in degrees
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders

Area

VictoryArea uses Area to represent an entire dataset. Area renders a <Path/> element, or a group of paths if the stroke of the area should be rendered in a different style from the filled section of the area. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered path
  • data array the entire dataset used to define the area
  • events object events to attach to the rendered element
  • groupComponent element the element used to group rendered elements default <g/>
  • id string or number an id to apply to the rendered component
  • interpolation string or function the interpolation to use when calculating a path
  • origin object the svg coordinates of the center point of a polar chart
  • polar boolean a flag specifying whether the component is part of a polar chart
  • pathComponent element the rendered path element default <Path/>
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders

LineSegment

The LineSegment component renders straight lines. This component is used to render grids, ticks, and axis lines in VictoryAxis. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered element
  • data array the entire dataset
  • datum object the data point corresponding to this line
  • events object events to attach to the rendered element
  • id string or number an id to apply to the rendered component
  • index number the index of this line within the dataset
  • lineComponent element the rendered line element default <Line/>
  • role string the aria role to assign to the element
  • shapeRendering string the shape rendering attribute to apply to the rendered elements
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • x1 number the x coordinate of the beginning of the line
  • x2 number the x coordinate of the end of the line
  • y1 number the y coordinate of the beginning of the line
  • y2 number the y coordinate of the end of the line

Background

The Background component is used to render an SVG background on VictoryChart. Background will render a <Circle> for charts with polar={true} and a <Rect> element for all other charts. View the source

Props

  • className string the class name that will be applied to the rendered path
  • circleComponent element the rendered circle element default <Circle/>
  • events object events to attach to the rendered element
  • height number the height of the <rect/> element
  • id string or number an id to apply to the rendered component
  • origin object the svg coordinates of the center point of a polar chart
  • polar boolean a flag specifying whether the component is part of a polar chart
  • rectComponent element the rendered rect element default <Rect/>
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • style object the styles to apply to the rendered element
  • width number the width of the <rect/> element
  • x number the x coordinate of the upper-left corner of the background for non-polar charts and center of the background for polar charts
  • y number the y coordinate of the top of the background

Bar

VictoryBar uses Bar to represent a single data point as a bar extending horizontally or vertically from the independent axis. Bar renders a <Path> element. It is also used by VictoryHistogram to represent "bins" of data. View the source

Props

  • active boolean a flag signifying whether the component is active
  • alignment *"start", "middle", or "end" specifies how a bar path should be aligned in relation to its data point
  • barRatio number a number between zero and one that will be used to calculate bar width when an explicit width is not given
  • barWidth number or function A prop defining the width of the bar. When this prop is given as a function, it will be called with the rest of the props supplied to Bar.
  • className string the class name that will be applied to the rendered path
  • cornerRadius number, function or object the number of pixels of corner radius to apply when calculating a bar path. When this prop is given as a function, it will be called with the rest of the props supplied to Bar. When given as an object, this prop may include values for top, bottom, topLeft, topRight, bottomLeft and bottomRight, with more specific values overriding less specific values
  • data array the entire dataset
  • datum object the data point corresponding to this bar
  • events object events to attach to the rendered element
  • id string or number an id to apply to the rendered component
  • index number the index of this bar within the dataset
  • origin object the svg coordinates of the center point of a polar chart
  • pathComponent element the rendered path element default <Path/>
  • polar boolean a flag specifying whether the component is part of a polar chart
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • width number the width of parent chart (used to calculate default bar width style.width is not supplied)
  • x number the x coordinate of the top of the bar
  • y0 number the y coordinate of the baseline of the bar
  • y number the y coordinate of the top of the bar

Box

VictoryLegend uses the Box component to draw a border around a legend area. Box renders a <Rect/> element. View the source Note Box also exported as Border

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered element
  • events object events to attach to the rendered element
  • height number the height of the <rect/> element
  • id string or number an id to apply to the rendered component
  • rectComponent element the rendered path element default <Rect/>
  • role string the aria role to assign to the element
  • shapeRendering string the shape rendering attribute to apply to the rendered element
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • width number the width of the <rect/> element
  • x number the x coordinate of the upper-left corner of the <rect/> element
  • y number the y coordinate of the upper-left corner of the <rect/> element

Candle

VictoryCandlestick uses Candle to represent a single data point as a candle. Candle renders a group with <Rect> and <Line> elements. View the source

Props

  • active boolean a flag signifying whether the component is active
  • candleRatio number a number between zero and one that will be used to calculate candle width when an explicit width is not given
  • candleWidth number or function A prop defining the width of the candle. When this prop is given as a function, it will be called with the rest of the props supplied to Candle.
  • className string the class name that will be applied to the rendered element
  • close number the y coordinate of the closing value
  • data array the entire dataset
  • datum object the data point corresponding to this candle
  • events object events to attach to the rendered element
  • groupComponent element the element used to group rendered elements default <g/>
  • high number the y coordinate of the high value
  • id string or number an id to apply to the rendered component
  • index number the index of this candle within the dataset
  • lineComponent element the rendered line element default <Line/>
  • low number the y coordinate of the low value
  • open number the y coordinate of the opening value
  • rectComponent element the rendered path element default <Rect/>
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered elements
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • width number the width of parent chart (used to calculate default candle width style.width is not supplied)
  • widthStrokeWidth number the stroke width of the candle wick. (style.strokeWidth will be used when this value is not given)
  • x number the x coordinate of the candle

Curve

VictoryLine uses Curve to represent an entire dataset as a line or curve. Curve renders a <Path> element. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered element
  • data array the entire dataset used to define the curve
  • events object events to attach to the rendered element
  • groupComponent element the element used to group rendered elements default <g/>
  • id string or number an id to apply to the rendered component
  • interpolation string or function the interpolation to use when calculating a path
  • origin object the svg coordinates of the center point of a polar chart
  • pathComponent element the rendered path element default <Path/>
  • polar boolean a flag specifying whether the component is part of a polar chart
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders

ErrorBar

VictoryErrorBar uses ErrorBar to render x and y error bars. ErrorBar renders a group of <Line> elements. View the source

Props

  • active boolean a flag signifying whether the component is active
  • borderWidth number the width of the cross-hairs on the end of each error bar default: 10
  • className string the class name that will be applied to the rendered element
  • data array the entire dataset
  • datum object the data point corresponding to this error bar
  • errorX number, array, or boolean errors in the x dimension.
  • errorY number, array, or boolean errors in the y dimension.
  • events object events to attach to the rendered element
  • groupComponent element the element used to group rendered elements default <g/>
  • id string or number an id to apply to the rendered component
  • index number the index of this error bar within the dataset
  • lineComponent element the rendered line element default <Line/>
  • origin object the svg coordinates of the center point of a polar chart
  • polar boolean a flag specifying whether the component is part of a polar chart
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered elements
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • x number the x coordinate of the center of the error bar
  • y number the y coordinate of the center of the error bar

Flyout

VictoryTooltip uses Flyout to render a flyout style path around text. Flyout renders <Path> element. View the source

Props

  • active boolean a flag signifying whether the component is active
  • center object the center coordinates of the flyout
  • className string the class name that will be applied to the rendered element
  • cornerRadius number the corner radius of the flyout
  • data array the entire dataset if applicable
  • datum object the data point corresponding to this flyout if applicable
  • dx number offset in the x dimension.
  • dy number offset in the y dimension.
  • events object events to attach to the rendered element
  • height number the height of the flyout
  • id string or number an id to apply to the rendered component
  • index number the index of this flyout within the dataset
  • orientation "top", "bottom", "left", "right"
  • origin object the svg coordinates of the center point of a polar chart
  • pathComponent element the rendered path element default <Path/>
  • pointerLength number the length of the triangular pointer
  • pointerWidth number the width of the base of the triangular pointer
  • polar boolean a flag specifying whether the component is part of a polar chart
  • role string the aria role to assign to the element
  • shapeRendering string the shape rendering attribute to apply to the rendered elements
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • width number the width of the flyout
  • x number the x coordinate of data point associated with this flyout
  • y number the y coordinate of data point associated with this flyout

Point

VictoryScatter uses Point to render each point in a scatter plot. Point renders a <Path> element. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered element
  • data array the entire dataset
  • datum object the data point corresponding to this point
  • events object events to attach to the rendered element
  • getPath function a function of x, y, and size that returns a path string. When this optional function is provided, it will be used to calculate a path, rather than one of the path functions corresponding to the symbols supported by Point.
  • id string or number an id to apply to the rendered component
  • index number the index of this point within the dataset
  • origin object the svg coordinates of the center point of a polar chart
  • pathComponent element the rendered path element default <Path/>
  • polar boolean a flag specifying whether the component is part of a polar chart
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • size number or function the size of the point. When this prop is given as a function, it will be called with the rest of the props supplied to Point.
  • style object the styles to apply to the rendered element
  • symbol "circle", "diamond", "plus", "minus", "square", "star", "triangleDown", "triangleUp" which symbol the point should render. This prop may also be given as a function that returns one of the above options. When this prop is given as a function, it will be called with the rest of the props supplied to Point.
  • transform string a transform that will be supplied to elements this component renders
  • x number the x coordinate of the center of the point
  • y number the y coordinate of the center of the point

Slice

VictoryPie uses Slice to render each slice in a pie chart. Slice renders a <Path> element. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered element
  • cornerRadius number or function the corner radius to apply to this slice. When this prop is given as a function it will be called with the rest of the props supplied to Slice.
  • data array the entire dataset
  • datum object the data point corresponding to this slice
  • events object events to attach to the rendered element
  • id string or number an id to apply to the rendered component
  • index number the index of this slice within the dataset
  • innerRadius number or function the inner radius of the slice. When this prop is given as a function it will be called with datum and active.
  • padAngle number or function the angular padding to add to the slice. When this prop is given as a function it will be called with the rest of the props supplied to Slice.
  • pathComponent element the rendered path element default <Path/>
  • pathFunction function a function that calculates the path of a given slice. When given, this prop will be called with the slice object
  • radius number or function the outer radius of the slice. When this prop is given as a function it will be called with the rest of the props supplied to Slice.
  • role string the aria role to assign to the element
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • slice object an object specifying the startAngle, endAngle, padAngle, and data of the slice
  • sliceEndAngle number or function the end angle the slice. When this prop is given as a function it will be called with the rest of the props supplied to Slice.
  • sliceStartAngle number or function the start angle the slice. When this prop is given as a function it will be called with the rest of the props supplied to Slice.
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders

Voronoi

VictoryVoronoi uses Voronoi to render voronoi polygons. Voronoi renders either a <Path> element corresponding to a voronoi polygon, or a <Circle/> clipped with a <ClipPath> defined by the path of the polygon. View the source

Props

  • active boolean a flag signifying whether the component is active
  • circleComponent element the rendered circle element default <Circle/>
  • className string the class name that will be applied to the rendered element
  • clipPathComponent element the rendered clipPath element default <ClipPath/>
  • data array the entire dataset
  • datum object the data point corresponding to this voronoi polygon
  • events object events to attach to the rendered element
  • groupComponent element the rendered group element default <g/>
  • id string or number an id to apply to the rendered component
  • index number the index of this voronoi polygon within the dataset
  • origin object the svg coordinates of the center point of a polar chart
  • pathComponent element the rendered path element default <Path/>
  • polar boolean a flag specifying whether the component is part of a polar chart
  • polygon array an array of points defining the polygon
  • role string the aria role to assign to the element
  • shapeRendering string the shape rendering attribute to apply to the rendered path
  • size number the maximum size of the voronoi polygon
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders.
  • x number the x coordinate of the data point
  • y number the y coordinate of the data point

Whisker

VictoryBoxPlot uses the Whisker component to draw whiskers for the minimum and maximum values in a box plot. Whisker renders a group of <Line/> elements. View the source

Props

  • active boolean a flag signifying whether the component is active
  • className string the class name that will be applied to the rendered element
  • events object events to attach to the rendered element
  • groupComponent element the rendered group element default <g/>
  • id string or number an id to apply to the rendered component
  • lineComponent element the rendered line element default <Line/>
  • majorWhisker object an object with values x1, x2, y1, y2 describing the major whisker line
  • minorWhisker object an object with values x1, x2, y1, y2 describing the minor whisker line
  • role string the aria role to assign to the element
  • shapeRendering string the shape rendering attribute to apply to the rendered element
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders.