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. Custom shouldComponentUpdate logic is added to improve performance. 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. Their render methods are shown so that users may easily override their behavior.

Circle

Used by VictoryClipContainer and Voronoi

render() {
  return (
    <circle
      cx={this.props.cx}
      cy={this.props.cy}
      r={this.props.r}
      className={this.props.className}
      clipPath={this.props.clipPath}
      transform={this.props.transform}
      style={this.props.style}
      role={this.props.role || "presentation"}
      shapeRendering={this.props.shapeRendering || "auto"}
      {...this.props.events}
    />
  );
}

ClipPath

Used by VictoryClipContainer and Voronoi

render() {
  return (
    <defs>
      <clipPath id={this.props.clipId}>
        {this.props.children}
      </clipPath>
    </defs>
  );
}

Line

Used by Axis, Candle, and ErrorBar

render() {
  return (
    <line
      x1={this.props.x1}
      x2={this.props.x2}
      y1={this.props.y1}
      y2={this.props.y2}
      className={this.props.className}
      clipPath={this.props.clipPath}
      transform={this.props.transform}
      style={this.props.style}
      role={this.props.role || "presentation"}
      shapeRendering={this.props.shapeRendering || "auto"}
      {...this.props.events}
    />
  );
}

Path

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

render() {
  return (
    <path
      d={this.props.d}
      transform={this.props.transform}
      className={this.props.className}
      clipPath={this.props.clipPath}
      style={this.props.style}
      role={this.props.role || "presentation"}
      shapeRendering={shapeRendering || "auto"}
      {...this.props.events}
    />
  );
}

Rect

Used by VictoryClipPath, Border, and Candle

render() {
  return (
    <rect
      x={this.props.x}
      y={this.props.y}
      rx={this.props.rx}
      ry={this.props.ry}
      width={this.props.width}
      height={this.props.height}
      className={this.props.className}
      clipPath={this.props.clipPath}
      style={this.props.style}
      transform={this.props.transform}
      role={this.props.role || "presentation"}
      shapeRendering={this.props.shapeRendering || "auto"}
      {...this.props.events}
    />
  );
}

Text

Used by VictoryLabel

render() {
  return (
    <text
      x={this.props.x}
      dx={this.props.dx}
      y={this.props.y}
      dy={this.props.dy}
      className={this.props.className}
      transform={this.props.transform}
      style={this.props.style}
      {...this.props.events}
    >
      {this.props.title && <title>{this.props.title}</title>}
      {this.props.desc && <desc>{this.props.desc}</desc>}
      {this.props.children}
    </text>
  );
}

TSpan

Used by VictoryLabel

render() {
  return (
    <tspan
      x={this.props.x}
      y={this.props.y}
      dx={this.props.dx}
      dy={this.props.dy}
      textAnchor={this.props.textAnchor}
      className={this.props.className}
      style={this.props.style}
      {...this.props.events}
    >
      {this.props.content}
    </tspan>
  );
}

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/>
  • 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

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/>
  • interpolation string 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

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
  • 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
  • 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

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. 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
  • 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
  • data array the entire dataset
  • datum object the data point corresponding to this bar
  • events object events to attach to the rendered element
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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/>
  • interpolation string 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

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/>
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 the size of the 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
  • 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
  • data array the entire dataset
  • datum object the data point corresponding to this slice
  • events object events to attach to the rendered element
  • index number the index of this slice within the dataset
  • pathComponent element the rendered path element default <Path/>
  • pathFunction function a function that calculates the path of a given 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
  • style object the styles to apply to the rendered element

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/>
  • 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
  • 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/>
  • 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