Victory
Victory

About Docs Gallery Support GitHub FAQs

#
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