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 activeclassName
string the class name that will be applied to the rendered pathclosedPath
boolean a flag signifying whether this arc is should render a closed pathcx
number the x coordinate of the center of the arc pathcy
number the y coordinate of the center of the arc pathdatum
any the data point or tick corresponding to this arcendAngle
number the end angle of the arc given in degreesevents
object events to attach to the rendered elementgroupComponent
element the element used to group rendered elements default<g/>
pathComponent
element the rendered path element default<Path/>
r
number the radius of the arcrole
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered pathstartAngle
number the start angle of the arc given in degreesstyle
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 activeclassName
string the class name that will be applied to the rendered pathdata
array the entire dataset used to define the areaevents
object events to attach to the rendered elementgroupComponent
element the element used to group rendered elements default<g/>
interpolation
string the interpolation to use when calculating a pathorigin
object the svg coordinates of the center point of a polar chartpolar
boolean a flag specifying whether the component is part of a polar chartpathComponent
element the rendered path element default<Path/>
role
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered pathstyle
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 activeclassName
string the class name that will be applied to the rendered elementdata
array the entire datasetdatum
object the data point corresponding to this lineevents
object events to attach to the rendered elementindex
number the index of this line within the datasetlineComponent
element the rendered line element default<Line/>
role
string the aria role to assign to the elementshapeRendering
string the shape rendering attribute to apply to the rendered elementsstyle
object the styles to apply to the rendered elementx1
number the x coordinate of the beginning of the linex2
number the x coordinate of the end of the liney1
number the y coordinate of the beginning of the liney2
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 activealignment
*“start”, “middle”, or “end” specifies how a bar path should be aligned in relation to its data pointbarRatio
number a number between zero and one that will be used to calculate bar width when an explicit width is not givenbarWidth
number or function A prop defining the width of the barclassName
string the class name that will be applied to the rendered pathcornerRadius
number, function or object the number of pixels of corner radius to apply when calculating a bar pathdata
array the entire datasetdatum
object the data point corresponding to this barevents
object events to attach to the rendered elementindex
number the index of this bar within the datasetorigin
object the svg coordinates of the center point of a polar chartpathComponent
element the rendered path element default<Path/>
polar
boolean a flag specifying whether the component is part of a polar chartrole
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered pathstyle
object the styles to apply to the rendered elementwidth
number the width of parent chart (used to calculate default bar widthstyle.width
is not supplied)x
number the x coordinate of the top of the bary0
number the y coordinate of the baseline of the bary
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 activeclassName
string the class name that will be applied to the rendered elementevents
object events to attach to the rendered elementheight
number the height of the<rect/>
elementrectComponent
element the rendered path element default<Rect/>
role
string the aria role to assign to the elementshapeRendering
string the shape rendering attribute to apply to the rendered elementstyle
object the styles to apply to the rendered elementwidth
number the width of the<rect/>
elementx
number the x coordinate of the upper-left corner of the<rect/>
elementy
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 activecandleRatio
number a number between zero and one that will be used to calculate candle width when an explicit width is not givencandleWidth
number or function A prop defining the width of the candleclassName
string the class name that will be applied to the rendered elementclose
number the y coordinate of the closing valuedata
array the entire datasetdatum
object the data point corresponding to this candleevents
object events to attach to the rendered elementgroupComponent
element the element used to group rendered elements default<g/>
high
number the y coordinate of the high valueindex
number the index of this candle within the datasetlineComponent
element the rendered line element default<Line/>
low
number the y coordinate of the low valueopen
number the y coordinate of the opening valuerectComponent
element the rendered path element default<Rect/>
role
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered elementsstyle
object the styles to apply to the rendered elementwidth
number the width of parent chart (used to calculate default candle widthstyle.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 activeclassName
string the class name that will be applied to the rendered elementdata
array the entire dataset used to define the curveevents
object events to attach to the rendered elementgroupComponent
element the element used to group rendered elements default<g/>
interpolation
string the interpolation to use when calculating a pathorigin
object the svg coordinates of the center point of a polar chartpathComponent
element the rendered path element default<Path/>
polar
boolean a flag specifying whether the component is part of a polar chartrole
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered pathstyle
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 activeborderWidth
number the width of the cross-hairs on the end of each error bar default: 10className
string the class name that will be applied to the rendered elementdata
array the entire datasetdatum
object the data point corresponding to this error barerrorX
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 elementgroupComponent
element the element used to group rendered elements default<g/>
index
number the index of this error bar within the datasetlineComponent
element the rendered line element default<Line/>
origin
object the svg coordinates of the center point of a polar chartpolar
boolean a flag specifying whether the component is part of a polar chartrole
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered elementsstyle
object the styles to apply to the rendered elementx
number the x coordinate of the center of the error bary
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 activeclassName
string the class name that will be applied to the rendered elementcornerRadius
number the corner radius of the flyoutdata
array the entire dataset if applicabledatum
object the data point corresponding to this flyout if applicabledx
number offset in the x dimension.dy
number offset in the y dimension.events
object events to attach to the rendered elementheight
number the height of the flyoutindex
number the index of this flyout within the datasetorientation
“top”, “bottom”, “left”, “right”origin
object the svg coordinates of the center point of a polar chartpathComponent
element the rendered path element default<Path/>
pointerLength
number the length of the triangular pointerpointerWidth
number the width of the base of the triangular pointerpolar
boolean a flag specifying whether the component is part of a polar chartrole
string the aria role to assign to the elementshapeRendering
string the shape rendering attribute to apply to the rendered elementsstyle
object the styles to apply to the rendered elementwidth
number the width of the flyoutx
number the x coordinate of data point associated with this flyouty
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 activeclassName
string the class name that will be applied to the rendered elementdata
array the entire datasetdatum
object the data point corresponding to this pointevents
object events to attach to the rendered elementindex
number the index of this point within the datasetorigin
object the svg coordinates of the center point of a polar chartpathComponent
element the rendered path element default<Path/>
polar
boolean a flag specifying whether the component is part of a polar chartrole
string the aria role to assign to the elementscale
object the x and y scale of the parent chart withdomain
andrange
appliedshapeRendering
string the shape rendering attribute to apply to the rendered pathsize
number the size of the pointstyle
object the styles to apply to the rendered elementsymbol
“circle”, “diamond”, “plus”, “minus”, “square”, “star”, “triangleDown”, “triangleUp” which symbol the point should renderx
number the x coordinate of the center of the pointy
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 activeclassName
string the class name that will be applied to the rendered elementdata
array the entire datasetdatum
object the data point corresponding to this sliceevents
object events to attach to the rendered elementindex
number the index of this slice within the datasetpathComponent
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 elementshapeRendering
string the shape rendering attribute to apply to the rendered pathslice
object an object specifying the startAngle, endAngle, padAngle, and data of the slicestyle
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 activecircleComponent
element the rendered circle element default<Circle/>
className
string the class name that will be applied to the rendered elementclipPathComponent
element the rendered clipPath element default<ClipPath/>
data
array the entire datasetdatum
object the data point corresponding to this voronoi polygonevents
object events to attach to the rendered elementgroupComponent
element the rendered group element default<g/>
index
number the index of this voronoi polygon within the datasetorigin
object the svg coordinates of the center point of a polar chartpathComponent
element the rendered path element default<Path/>
polar
boolean a flag specifying whether the component is part of a polar chartpolygon
array an array of points defining the polygonrole
string the aria role to assign to the elementshapeRendering
string the shape rendering attribute to apply to the rendered pathsize
number the maximum size of the voronoi polygonstyle
object the styles to apply to the rendered elementx
number the x coordinate of the data pointy
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 activeclassName
string the class name that will be applied to the rendered elementevents
object events to attach to the rendered elementgroupComponent
element the rendered group element default<g/>
lineComponent
element the rendered line element default<Line/>
majorWhisker
object an object with valuesx1
,x2
,y1
,y2
describing the major whisker lineminorWhisker
object an object with valuesx1
,x2
,y1
,y2
describing the minor whisker linerole
string the aria role to assign to the elementshapeRendering
string the shape rendering attribute to apply to the rendered elementstyle
object the styles to apply to the rendered element