Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryVoronoi

`VictoryVoronoi` renders a dataset as a series polygons optimized for the nearest data point. `VictoryVoronoi` can be composed with `VictoryChart` to create voronoi overlays for charts, which are useful for attaching events to pieces of data that are otherwise difficult to interact with, usually due to their size.

##
animate

`type: boolean || object`

`VictoryVoronoi` 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] }`

`VictoryVoronoi` uses the standard `categories` prop. Read about it in detail here

    categories={{ x: ["dogs", "cats", "mice"] }}

##
containerComponent

`type: element`

`VictoryVoronoi` uses the standard `containerComponent` prop. Read about it in detail here

    containerComponent={<VictoryVoronoiContainer dimension="x"/>}

##
data

`type: array[object]`

`VictoryVoronoi` uses the standard `data` prop. Read about it in detail here

See the Data Accessors Guide for more detail on formatting and processing data.

##
dataComponent

`type: element`

`VictoryVoronoi` uses the standard `dataComponent` prop. Read about it in detail here

`VictoryVoronoi` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`, `polygon`, `scale`, `size`, `style`, `x`, `y`

See the Custom Components Guide for more detail on creating your own `dataComponents`

default: `<Voronoi/>`

    dataComponent={<Voronoi events={{ onClick: handleClick }}/>}

##
domain

`type: array[low, high] || { x: [low, high], y: [low, high] }`

`VictoryVoronoi` uses the standard `domain` prop. Read about it in detail here

    domain={{x: [0, 100], y: [0, 1]}}

##
domainPadding

`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`

`VictoryVoronoi` uses the standard `domainPadding` prop. Read about it in detail here

    domainPadding={{x: [10, -10], y: 5}}

##
eventKey

`type: string || integer || array[string] || function`

`VictoryVoronoi` uses the standard `eventKey` prop to specify how event targets are addressed. This prop is not commonly used. Read about the `eventKey` prop in more detail here

    eventKey = "x";

##
events

`type: array[object]`

`VictoryVoronoi` uses the standard `events` prop. Read about it in more detail here

See the Events Guide for more information on defining events.

##
externalEventMutations

`type: array[object]`

`VictoryVoronoi` uses the standard `externalEventMutations` prop. Read about it in detail

##
groupComponent

`type: element`

`VictoryVoronoi` uses the standard `groupComponent` prop. Read about it in detail here

default: `<g/>`

    groupComponent={<g transform="translate(10, 10)" />}

##
height

`type: number`

`VictoryVoronoi` uses the standard `height` prop. Read about it in detail here

default (provided by default theme): `height={300}`

    height={400}

##
horizontal

`type: boolean`

`VictoryVoronoi` uses the standard `horizontal` prop. Read about it in detail

    horizontal = { true };

##
labelComponent

`type: element`

`VictoryVoronoi` uses the standard `labelComponent` prop. Read about it in detail here

default: `<VictoryLabel/>`

##
labels

`type: array || function`

`VictoryVoronoi` uses the standard `labels` prop to define labels for each point. Read about it in more detail here

##
maxDomain

`type: number || { x: number, y: number }`

`VictoryVoronoi` uses the standard `maxDomain` prop. Read about it in detail

##
minDomain

`type: number || { x: number, y: number }`

`VictoryVoronoi` 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 }`

`VictoryVoronoi` uses the standard `padding` prop. Read about it in detail here

default (provided by default theme): `padding={50}`

    padding={{ top: 20, bottom: 60 }}

##
polar

`type: boolean`

`VictoryVoronoi` uses the standard `polar` prop. Read about it in detail here

Note: Polar Charts are not yet supported for `VictoryVoronoi`

##
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`

`VictoryVoronoi` uses the standard `samples` prop to generate data when plotting functions. Read about it in more detail here

default: `samples={50}`

    samples={100}

##
scale

`type: scale || { x: scale, y: scale }`

`VictoryVoronoi` 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 }`

`VictoryVoronoi` uses the standard `singleQuadrantDomainPadding` prop. Read about it here

##
size

`type: number`

The size prop determines the maximum size of each voronoi area. When this prop is given, a circular area of the specified size will be rendered, and clipped where it would overlap with other voronoi areas. If this prop is not given, the entire voronoi area will be used.

##
sortKey

`type: string || integer || array[string] || function`

`VictoryVoronoi` uses the standard `sortKey` prop to determine how data should be ordered. Read about it in more detail here

    sortKey = "x";

##
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`

`VictoryVoronoi` uses the standard `standalone` prop. Read about it in detail here

note: When `VictoryVoronoi` 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 }`

`VictoryVoronoi` uses the standard `style` prop. Read about it in detail here

default (provided by default theme): See grayscale theme for more detail

##
theme

`type: object`

`VictoryVoronoi` uses the standard `theme` prop. Read about it in detail here

See the Themes Guide for information about creating custom themes.

default: `theme={VictoryTheme.grayscale}`

    theme={VictoryTheme.material}

##
width

`type: number`

`VictoryVoronoi` uses the standard `width` prop. Read about it in detail here

default (provided by default theme): `width={450}`

    width={400}

##
x

`type: string || integer || array[string] || function`

`VictoryVoronoi` uses the standard `x` data accessor prop. Read about it in detail here

See the Data Accessors Guide for more detail on formatting and processing data.

    x = "employee.name";

##
y

`type: string || integer || array[string] || function`

`VictoryVoronoi` uses the standard `y` data accessor prop. Read about it in detail 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 `VictoryVoronoi`, as baselines for `VictoryVoronoi` are only relevant for stacked charts. Read more about the `y0` prop here