victory-line
Advanced tools
victory-line@^30.0.0 exports VictoryLine and Curve components
View these docs at https://formidable.com/open-source/victory/docs/victory-line to see live examples.
VictoryLine renders a dataset as a single line. 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
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: (props) => {
return 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: options
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"
Explore all the interpolation options.
default: "linear"
<VictoryLine
interpolation="natural"
data={sampleData}
/>
type: element
VictoryLine uses the standard labelComponent prop. Read about it here
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
default (provided by default theme): See grayscale theme for more detail
<VictoryLine
style={{
data: {
stroke: "#c43a31", strokeWidth: 3
},
labels: {
fontSize: 15,
fill: (d) => d.x === 3 ? "#000000" : "#c43a31"
}
}}
data={sampleData}
labels={(d) => d.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
32.0.0 (2019-02-27)
Horizontal Chart Improvements!
The goal of this change is to make it possible to turn any existing chart into a horizontal chart by adding the horizontal prop to the chart without needing to alter any other props.
x value always refers to the independent dimension, and the y value always refers to the dependent dimension.VictoryAxis components is no longer tied to whether or not they are the dependentAxisBreaking Changes
Most Horizontal Charts
The change in how props with x and y values are treated (i.e. scale, domain, etc) will be a breaking change for most horizontal charts. In most cases, reversing the x and y values of props you are providing to your horizontal chart will be sufficient to correct the change. For example:
<VictoryChart horizontal scale={{ x: "log" }} domain={{ y: [4, 9] }}>
<VictoryBar
data={[
{ x: 5, y: 0.1 },
{ x: 6, y: 1 },
{ x: 7, y: 10 },
{ x: 8, y: 100 }
]}
/>
</VictoryChart>
Should be changed to:
<VictoryChart horizontal scale={{ y: "log" }} domain={{ x: [4, 9] }}>
<VictoryBar
data={[
{ x: 5, y: 0.1 },
{ x: 6, y: 1 },
{ x: 7, y: 10 },
{ x: 8, y: 100 }
]}
/>
</VictoryChart>
Props affected by this change are: scale, domain, maxDomain, minDomain, domainPadding, and categories
Horizontal Charts with Event Containers
Dimension props such as brushDimension have changed so that they always refer to the dimension of the target variable (x for the independent variable, and y for the dependent variable). For example, a VictoryBrushContainer component with brushDimension="x" will move and expand only in the independent dimension regardless of whether the chart is horizontal.
Props affected by this change are: brushDimension, cursorDimension, selectionDimension, voronoiDimension, and zoomDimension
Horizontal Charts with Custom dataComponents
The position values (i.e. x, y, x0, y0) supplied to custom dataComponents from components like VictoryChart will be scaled for the layout of the horizontal chart. Users who rely on these values may need to flip them or adjust them depending on their use case
Horizontal VictoryBoxPlot
Previously VictoryBoxPlot required data to be flipped (x values flipped with y values) in order to plot horizontal charts. This is no longer required, and providing data in this format will no longer work correctly. To correct for this change, it should be sufficient to flip the data used in horizontal charts
FAQs
Line Component for Victory
The npm package victory-line receives a total of 242,086 weekly downloads. As such, victory-line popularity was classified as popular.
We found that victory-line demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 21 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.