Victory
Victory

About Docs Gallery Support GitHub FAQs

#
VictoryScatter

VictoryScatter renders a dataset as a series of points. VictoryScatter can be composed with `VictoryChart` to create scatter plots.

##
animate

`type: boolean || object`

`VictoryScatter` uses the standard `animate` prop. Read about it in detail here

See the Animations Guide for more detail on animations and transitions

    animate={{
      duration: 2000,
      onLoad: { duration: 1000 }
    }}

##
bubbleProperty

`type: string`

The `bubbleProperty` prop indicates which property of the data object should be used to scale data points in a bubble chart. If a `bubbleProperty` is given, `size` and `symbol` props will be ignored. Bubble charts always render circular points.

default: `bubbleProperty="z"`

##
categories

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

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

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

##
containerComponent

`type: element`

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

    containerComponent={<VictoryVoronoiContainer/>}

##
data

`type: array[object]`

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

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

In addition to svg style properties and `label`, `VictoryScatter` will also preferentially use `symbol` and `size` properties supplied via data objects.

##
dataComponent

`type: element`

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

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

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

default: `<Point/>`

##
domain

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

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

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

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

##
eventKey

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

`VictoryScatter` 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]`

`VictoryScatter` 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]`

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

##
groupComponent

`type: element`

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

default: `<g/>`

##
height

`type: number`

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

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

    height={400}

##
horizontal

`type: boolean`

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

    horizontal = { true };

##
labelComponent

`type: element`

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

default: `<VictoryLabel/>`

##
labels

`type: array || function`

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

##
maxBubbleSize

`type: number`

The `maxBubbleSize` prop sets an upper limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the `width`, `height`, and `padding` of the component.

For more information on bubble charts, see `bubbleProperty`

    maxBubbleSize={25}

##
maxDomain

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

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

##
minBubbleSize

`type: number`

The `minBubbleSize` prop sets a lower limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the calculated `maxBubbleSize`.

For more information on bubble charts, see `bubbleProperty`

    minBubbleSize={5}

##
minDomain

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

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

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

`VictoryScatter` uses the standard `polar` prop. Read about it in detail 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: integer`

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

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

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

##
size

`type: number || function`

The `size` prop determines how to scale each data point. When this prop given as a function, it will be called for each point with the props corresponding to that point. If `size` is not specified, either in props or in a theme, it will default to 1. `size` may also be set directly on each data object.

##
sortKey

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

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

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

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

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

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

##
symbol

`type: function || options`

The `symbol` prop determines which symbol should be drawn to represent data points. Options are: "circle", "diamond", "plus", "minus", "square", "star", "triangleDown", "triangleUp". When this prop is given as a function, it will be evaluated for each point with the props corresponding to that point. If no `symbol` prop is specified, a circle will be rendered. `symbol` may also be set directly on each data object.

default: `symbol="circle"`

##
theme

`type: object`

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

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

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

`VictoryScatter` 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 `VictoryScatter`, as baselines for `VictoryScatter` are only relevant for stacked charts. Read more about the `y0` prop here