id | title | category | type | scope | ||
---|---|---|---|---|---|---|
8 |
VictoryLine |
charts |
docs |
|
VictoryLine renders a dataset as a single line path. Since VictoryLine renders only a single element to represent a dataset rather than individual elements for each data point, some of its behavior is different from other Victory components. Pay special attention to style and events props, and take advantage of VictoryVoronoiContainer
to enable tooltips. VictoryLine can be composed with VictoryChart
to create line charts.
<VictoryChart
theme={VictoryTheme.material}
>
<VictoryLine
style={{
data: { stroke: "#c43a31" },
parent: { border: "1px solid #ccc"}
}}
data={[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 }
]}
/>
</VictoryChart>
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 }
}}
type: array[string] || { x: array[string], y: array[string] }
VictoryLine
uses the standard categories
prop. Read about it here
categories={{ x: ["dogs", "cats", "mice"] }}
type: element
VictoryLine
uses the standard containerComponent
prop. Read about it here
containerComponent={<VictoryVoronoiContainer/>}
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.
<VictoryChart>
<VictoryLine
data={[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 6 }
]}
/>
</VictoryChart>
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
note: Because VictoryLine
renders a single element to represent the entire dataset, the dataComponent
it renders will not have access to datum
like the dataComponent
elements rendered by other Victory components such as VictoryScatter
.
See the Custom Components Guide for more detail on creating your own dataComponents
default: <Curve/>
dataComponent={<Curve events={{ onClick: handleClick }}/>}
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]}}
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}}
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";
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
<div>
<h3>Click Me</h3>
<VictoryLine
style={{
data: { stroke: "#c43a31" }
}}
events={[{
target: "parent",
eventHandlers: {
onClick: () => {
return [
{
target: "data",
eventKey: "all",
mutation: ({ style }) => {
return style.stroke === "black"
? null
: { style: { stroke: "black", strokeWidth: 5 } };
}
}
];
}
}
}]}
data={sampleData}
/>
</div>
type: array[object]
VictoryLine
uses the standard externalEventMutations
prop. Read about it in detail
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/>
<VictoryChart>
<VictoryLine
groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}
style={{ data: { stroke: "#c43a31", strokeWidth: 15, strokeLinecap: "round" } }}
data={sampleData}
/>
</VictoryChart>
type: number
VictoryLine
uses the standard height
prop. Read about it here
default (provided by default theme): height={300}
height={400}
type: boolean
VictoryLine
uses the standard horizontal
prop. Read about it in detail
<VictoryLine horizontal
data={sampleData}
/>
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"
<VictoryLine
interpolation="natural"
data={sampleData}
/>
type: element
VictoryLine
uses the standard labelComponent
prop. Read about it here
note: To enable tooltips on VictoryLine
, it is necessary to use VictoryVoronoiContainer
default: <VictoryLabel renderInPortal/>
<VictoryLine
data={sampleData}
labels={({ datum }) => datum.y}
labelComponent={<VictoryLabel renderInPortal dy={-20}/>}
/>
type: array || function
VictoryLine
uses the standard labels
prop. Read about it here
<VictoryLine
data={sampleData}
labels={({ datum }) => datum.y}
/>
type: number || { x: number, y: number }
VictoryLine
uses the standard maxDomain
prop. Read about it in detail
<VictoryChart maxDomain={{ y: 4.5 }}>
<VictoryLine data={sampleData}/>
</VictoryChart>
type: number || { x: number, y: number }
VictoryLine
uses the standard minDomain
prop. Read about it in detail
<VictoryChart minDomain={{ y: 0 }}>
<VictoryLine data={sampleData}/>
</VictoryChart>
type: string
The name
prop is used to reference a component instance when defining shared events.
name = "series-1";
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
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 }}
type: boolean
VictoryLine
uses the standard polar
prop. Read about it here
<VictoryChart polar
domain={{ y: [0, 7]}}
theme={VictoryTheme.material}
>
<VictoryPolarAxis dependentAxis
style={{ axis: { stroke: "none" } }}
tickFormat={() => null}
/>
<VictoryPolarAxis/>
<VictoryLine
data={sampleData}
style={{
data: { stroke: "#c43a31" },
}}
/>
</VictoryChart>
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
type: number
VictoryLine
uses the standard samples
prop. Read about it here
default: samples={50}
<VictoryChart>
<VictoryLine
samples={25}
y={(d) => Math.sin(5 * Math.PI * d.x)}
/>
<VictoryLine
samples={100}
style={{ data: { stroke: "red" } }}
y={(d) => Math.cos(5 * Math.PI * d.x)}
/>
</VictoryChart>
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"}}
The sharedEvents
prop is used internally to coordinate events between components. It should not be set manually.
type: boolean || { x: boolean, y: boolean }
VictoryLine
uses the standard singleQuadrantDomainPadding
prop. Read about it here
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.
<VictoryLine
data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}
sortKey="t"
x={(d) => Math.sin(3 * d.t + (2 * Math.PI))}
y={(d) => Math.sin(2 * d.t)}
/>
type: "ascending" || "descending"
The sortOrder
prop specifies whether sorted data should be returned in ascending or descending order.
default: sortOrder="ascending"
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}
<svg width={300} height={300}>
<circle cx={150} cy={150} r={150} fill="#c43a31"/>
<VictoryLine
standalone={false}
width={300} height={300} padding={0}
data={sampleData}
/>
</svg>
type: { parent: object, data: object, labels: object }
VictoryLine
uses the standard style
prop. Read about it here
note: Since VictoryLine
renders a single element to represent an entire dataset, it is not possible to use functional styles to change the style of the line as a function of an individual datum
. Instead, try using gradient fills for styling continuous data.
default (provided by default theme): See grayscale theme for more detail
<VictoryLine
style={{
data: {
stroke: "#c43a31",
strokeWidth: ({ data }) => data.length
},
labels: {
fontSize: 15,
fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31"
}
}}
data={sampleData}
labels={({ datum }) => datum.x}
/>
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}
type: number
VictoryLine
uses the standard width
prop. Read about it here
default (provided by default theme): width={450}
width={400}
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";
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}
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