VictoryLine
VictoryLine renders a dataset as a single line. VictoryLine can be composed with VictoryChart
to create line charts.
animate
type: boolean || object
VictoryLine
uses the standard animate
prop. Read about it here
See the Animations Guide for more detail on animations and transitions
animate={{
duration: 2000,
onLoad: { duration: 1000 }
}}
categories
type: array[string] || { x: array[string], y: array[string] }
VictoryLine
uses the standard categories
prop. Read about it here
categories={{ x: ["dogs", "cats", "mice"] }}
containerComponent
type: element
VictoryLine
uses the standard containerComponent
prop. Read about it here
containerComponent={<VictoryVoronoiContainer/>}
data
type: array[object]
VictoryLine
uses the standard data
prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
dataComponent
type: element
VictoryLine
uses the standard dataComponent
prop. Read about it here
VictoryLine
supplies the following props to its dataComponent
: data
, events
, groupComponent
, interpolation
, origin
(for polar charts), polar
, scale
, style
See the Custom Components Guide for more detail on creating your own dataComponents
default: <Curve/>
dataComponent={<Curve events={{ onClick: handleClick }}/>}
domain
type: array[low, high] || { x: [low, high], y: [low, high] }
VictoryLine
uses the standard domain
prop. Read about it here
domain={{x: [0, 100], y: [0, 1]}}
domainPadding
type: number || array[left, right] || { x: [left, right], y: [bottom, top] }
VictoryLine
uses the standard domainPadding
prop. Read about it here
domainPadding={{x: [10, -10], y: 5}}
eventKey
type: string || integer || array[string] || function
VictoryLine
uses the standard eventKey
prop. This prop is not commonly used. Read about the eventKey
prop in more detail here
note: VictoryLine
only renders one element per dataset, so only one event key will be generated.
eventKey = "x";
events
type: array[object]
VictoryLine
uses the standard events
prop. Read about it here
See the Events Guide for more information on defining events.
note: VictoryLine
will use the special eventKey
"all" rather than referring to data by index, as it renders only one element for an entire dataset
externalEventMutations
type: array[object]
VictoryLine
uses the standard externalEventMutations
prop. Read about it in detail
groupComponent
type: element
VictoryLine
uses the standard groupComponent
prop. Read about it here
note: VictoryLine
uses VictoryClipContainer
as its default groupComponent
VictoryClipContainer
renders a <g>
tag with a clipPath
def
. This allows continuous data components to transition smoothly when new data points enter and exit. Supplying a completely custom groupComponent
to VictoryLine
may result in broken animations.
default: <VictoryClipContainer/>
height
type: number
VictoryLine
uses the standard height
prop. Read about it here
default (provided by default theme): height={300}
height={400}
horizontal
type: boolean
VictoryLine
uses the standard horizontal
prop. Read about it in detail
interpolation
type: options || function
The interpolation
prop determines how data points should be connected when creating a path. Victory uses d3-shape for interpolating curves.
Polar line charts may use the following interpolation options: "basis", "cardinal", "catmullRom", "linear"
Cartesian line charts may use the following interpolation options: "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore"
You can also provide a function if you need to adjust parameters for d3-shape curves or to use a custom curve function.
Explore all the interpolation options.
default: "linear"
labelComponent
type: element
VictoryLine
uses the standard labelComponent
prop. Read about it here
default: <VictoryLabel renderInPortal/>
labels
type: array || function
VictoryLine
uses the standard labels
prop. Read about it here
maxDomain
type: number || { x: number, y: number }
VictoryLine
uses the standard maxDomain
prop. Read about it in detail
minDomain
type: number || { x: number, y: number }
VictoryLine
uses the standard minDomain
prop. Read about it in detail
name
type: string
The name
prop is used to reference a component instance when defining shared events.
name = "series-1";
origin
type: { x: number, y: number }
The origin
prop is only used by polar charts, and is usually controlled by VictoryChart
. It will not typically be necessary to set an origin
prop manually
Read about the origin
prop in detail
padding
type: number || { top: number, bottom: number, left: number, right: number }
VictoryLine
uses the standard padding
prop. Read about it here
default (provided by default theme): padding={50}
padding={{ top: 20, bottom: 60 }}
polar
type: boolean
VictoryLine
uses the standard polar
prop. Read about it here
range
type: array[low, high] || { x: [low, high], y: [low, high] }
The range
prop is usually controlled by VictoryChart
. It will not typically be necessary to set a range
prop manually
Read about the range
prop in detail
samples
type: number
VictoryLine
uses the standard samples
prop. Read about it here
default: samples={50}
scale
type: scale || { x: scale, y: scale }
VictoryLine
uses the standard scale
prop. Read about it here
Options for scale include "linear", "time", "log", "sqrt" and the d3-scale
functions that correspond to these options.
default: scale="linear"
scale={{x: "linear", y: "log"}}
sharedEvents
The sharedEvents
prop is used internally to coordinate events between components. It should not be set manually.
singleQuadrantDomainPadding
type: boolean || { x: boolean, y: boolean }
VictoryLine
uses the standard singleQuadrantDomainPadding
prop. Read about it here
sortKey
type: string || integer || array[string] || function
VictoryLine
uses the standard sortKey
prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
sortOrder
type: "ascending" || "descending"
The sortOrder
prop specifies whether sorted data should be returned in ascending or descending order.
default: sortOrder="ascending"
standalone
type: boolean
VictoryLine
uses the standard standalone
prop. Read about it here
note: When VictoryLine
is nested within a component like VictoryChart
, this prop will be set to false
default: standalone={true}
style
type: { parent: object, data: object, labels: object }
VictoryLine
uses the standard style
prop. Read about it here
default (provided by default theme): See grayscale theme for more detail
theme
type: object
VictoryLine
uses the standard theme
prop. Read about it here
See the Themes Guide for information about creating custom themes.
default: theme={VictoryTheme.grayscale}
theme={VictoryTheme.material}
width
type: number
VictoryLine
uses the standard width
prop. Read about it here
default (provided by default theme): width={450}
width={400}
x
type: string || integer || array[string] || function
VictoryLine
uses the standard x
data accessor prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
x = "employee.name";
y
type: string || integer || array[string] || function
VictoryLine
uses the standard y
data accessor prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
y={(d) => d.value + d.error}
y0
type: string || integer || array[string] || function
It is not common to set a y0
prop with VictoryLine
, as baselines for VictoryLine
are only relevant for stacked lines. Read more about the y0
prop here