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

<VictoryChart
  theme={VictoryTheme.material}
  domain={{ x: [0, 5], y: [0, 7] }}
>
  <VictoryScatter
    style={{ data: { fill: "#c43a31" } }}
    size={7}
    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

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

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"

<VictoryScatter
  style={{ data: { fill: "#c43a31" } }}
  bubbleProperty="amount"
  maxBubbleSize={25}
  minBubbleSize={5}
  data={[
    { x: 1, y: 2, amount: 30 },
    { x: 2, y: 3, amount: 40 },
    { x: 3, y: 5, amount: 25 },
    { x: 4, y: 4, amount: 10 },
    { x: 5, y: 7, amount: 45 }
  ]}
/>

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"] }}

type: element

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

containerComponent={<VictoryVoronoiContainer/>}

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.

<VictoryScatter
  data={[
    { x: 1, y: 2, symbol: "star", size: 5 },
    { x: 2, y: 3, symbol: "square", size: 7 },
    { x: 3, y: 5, symbol: "diamond", size: 3 },
    { x: 4, y: 4, symbol: "circle", size: 8 },
    { x: 5, y: 6, symbol: "triangleUp", size: 4 }
  ]}
/>

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/>

function CatPoint(props) {
  const {x, y, datum} = props; // VictoryScatter supplies x, y and datum
  const cat = datum._y >= 0 ? "😻" : "😹";

  return (
    <text x={x} y={y} fontSize={30}>
      {cat}
    </text>
  );
}

function App() {
  return (
    <VictoryChart>
      <VictoryScatter
        dataComponent={<CatPoint/>}
        y={(d) => Math.sin(2 * Math.PI * d.x)}
        samples={15}
      />
    </VictoryChart>
  );
}
render(<App/>);

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

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

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";

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.

<div>
  <h3>Click Me</h3>
  <VictoryScatter
    style={{ data: { fill: "#c43a31" } }}
    size={9}
    labels={() => null}
    events={[{
      target: "data",
      eventHandlers: {
        onClick: () => {
          return [
            {
              target: "data",
              mutation: (props) => {
                const fill = props.style && props.style.fill;
                return fill === "black" ? null : { style: { fill: "black" } };
              }
            }, {
              target: "labels",
              mutation: (props) => {
                return props.text === "clicked" ?
                  null : { text: "clicked" };
              }
            }
          ];
        }
      }
    }]}
    data={sampleData}
  />
</div>

type: array[object]

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

type: element

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

default: <g/>

<VictoryChart>
  <VictoryScatter
    groupComponent={<VictoryClipContainer/>}
    data={sampleData}
    size={20}
  />
</VictoryChart>

type: number

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

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

height={400}

type: boolean

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

horizontal = { true };

type: element

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

default: <VictoryLabel/>

<VictoryScatter
  data={sampleData}
  size={20}
  style={{ labels: { fill: "white", fontSize: 18} }}
  labels={({ datum }) => datum.y}
  labelComponent={<VictoryLabel dy={8}/>}
/>

type: array || function

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

<VictoryScatter
  data={sampleData}
  labels={({ datum }) => `y: ${datum.y}`}
/>

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}

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

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

<VictoryChart maxDomain={8}>
  <VictoryScatter data={sampleData}/>
</VictoryChart>

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}

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

VictoryScatter uses the standard minDomain prop. Read about it in detail

<VictoryChart minDomain={0}>
  <VictoryScatter 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 }

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

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

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

type: boolean

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

<VictoryChart polar
  domain={{ y: [0, 7] }}
  theme={VictoryTheme.material}
>
  <VictoryPolarAxis dependentAxis
    style={{ axis: { stroke: "none" } }}
    tickFormat={() => null}
  />
  <VictoryPolarAxis/>
  <VictoryScatter
    data={sampleData}
    style={{
      data: { fill: "#c43a31" }
    }}
    size={5}
  />
</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: 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}

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"}}

The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.

type: boolean || { x: boolean, y: boolean }

VictoryScatter uses the standard singleQuadrantDomainPadding prop. Read about it here

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.

<VictoryScatter
  size={({ datum }) => datum.y + 2 }
  data={sampleData}
/>

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";

type: "ascending" || "descending"

The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.

default: sortOrder="ascending"

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}

<svg width={300} height={300}>
  <circle cx={150} cy={150} r={150} fill="#c43a31"/>
  <VictoryScatter
    standalone={false}
    width={300} height={300} padding={10}
    data={sampleData}
    size={7}
  />
</svg>

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

<VictoryScatter
  style={{
    data: {
      fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31",
      stroke: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31",
      fillOpacity: 0.7,
      strokeWidth: 3
    },
    labels: {
      fontSize: 15,
      fill: ({ datum }) => datum.x === 3 ? "#000000" : "#c43a31"
    }
  }}
  size={9}
  data={sampleData}
  labels={({ datum }) => datum.x}
/>

type: function || options

The symbol prop determines which symbol should be drawn to represent data points. Options are: "circle", "cross", "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"

<VictoryScatter
  symbol={({ datum }) => datum.y > 3 ? "triangleUp" : "triangleDown"}
  size={7}
  data={sampleData}
/>

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}

type: number

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

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

width={400}

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";

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}

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