VictoryDatatableProps

A set of props available to components that implement data visualization in Victory. These props are used to define the data that will be visualized, as well as the appearance and behavior of the visualization.

Props

---

categories

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

Specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array.

note

The x value supplied to the categories prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.

Live View

Loading...

Live Editor

<VictoryChart
  domainPadding={25}
  theme={VictoryTheme.clean}
>
  <VictoryBar
    categories={{
      x: [
        "birds",
        "cats",
        "dogs",
        "fish",
        "frogs",
      ],
    }}
    data={[
      { x: "cats", y: 1 },
      { x: "dogs", y: 2 },
      { x: "birds", y: 3 },
      { x: "fish", y: 2 },
      { x: "frogs", y: 1 },
    ]}
  />
</VictoryChart>

---

data

type: any[]

By default, Victory components expect data as an array of objects with x and y properties. Use the x and y data accessor props to define a custom data format. Data objects may also include information about styles, labels, and props that may be applied to individual data components.

note

All values stored on the data object will be interpolated during animation. Do not store functions on data objects.

Live View

Loading...

Live Editor

<VictoryScatter
  size={7}
  data={[
    {
      x: 1,
      y: 1,
      label: "first",
      symbol: "star",
      opacity: 0.5,
      fill: "blue",
    },
    {
      x: 2,
      y: 2,
      label: "second",
      symbol: "circle",
      opacity: 0.8,
      fill: "red",
    },
    {
      x: 3,
      y: 3,
      label: "third",
      symbol: "square",
      fill: "gold",
    },
    {
      x: 4,
      y: 4,
      label: "fourth",
      symbol: "diamond",
      fill: "green",
    },
  ]}
  style={{
    data: {
      fill: ({ datum }) => datum.fill,
      opacity: ({ datum }) =>
        datum.opacity,
    },
  }}
/>

---

dataComponent

type: ReactElement

A component instance which will be responsible for rendering a data element. The new element created from the passed dataComponent will be provided with all the props it needs to render. These props will always include data, events, scale and style. Individual components will supply additional props expected by their default dataComponents. See individual api docs for complete props lists. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a dataComponent is not provided, each component will use its own default dataComponent.

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

Live View

Loading...

Live Editor

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

---

domain

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

The domain prop describes the range of data the component will include. This prop can be given as an array of the minimum and maximum expected values of the data or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.

note

The x value supplied to the domain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.

Common Usage

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

Live View

Loading...

Live Editor

<VictoryChart
  domain={{ x: [0.5, 5.5], y: [0, 10] }}
  theme={VictoryTheme.clean}
>
  <VictoryBar data={sampleData} />
</VictoryChart>

---

domainPadding

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

The domainPadding prop specifies a number of pixels of padding to add to the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. When given as a single number, domainPadding will be applied to the upper and lower bound of both the x and y domains. This prop may also be given as an object with numbers or two-element arrays specified for x and y. When specifying arrays for domainPadding, the first element of the array will specify the padding to be applied to domain minimum, and the second element will specify padding the be applied to domain maximum.

note

The x value supplied to the domainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.

Common Usage

• domainPadding={20}
• domainPadding={{ x: [20, 0] }}

note

Values supplied for domainPadding will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, domainPadding will be coerced so that the resulted padded domain will not include negative values.

Live View

Loading...

Live Editor

<VictoryChart
  domainPadding={{ x: 100 }}
  theme={VictoryTheme.clean}
>
  <VictoryBar data={sampleData} />
</VictoryChart>

---

samples

type: number

Specifies how many individual points to plot when plotting y as a function of x. The samples prop is ignored if data is supplied in props.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
>
  <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>

---

sortKey

type: string | number | string[] | function

Indicates how data should be sorted. This prop is given directly to the lodash sortBy function to be executed on the final dataset.

note

Sorting only applies to categorical axis data. Linear data will not be sorted.

Common Usage

string - specify which property in a data object to sort the data array by

sortKey = "x";

function - use a function to determine how to sort data elements in an array

sortKey={(datum) => datum.xValue + datum.error}

number - specify which index of an array should be used to sort data when data is given as an array of arrays

sortKey={0}

array - specify multiple properties to sort by

sortKey={["age", "height"]}

Live View

Loading...

Live Editor

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

---

sortOrder

type: "ascending" | "descending"default: "ascending"

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

---

x

type: string | string[] | number | function

Use the x data accessor prop to determine how the component defines data in the x dimension.

string - specify which property in an array of data objects should be used as the x value. This string may reference a nested property using dot notation.

x="name";
x="employees.name"

string[] - specify which property in an array of nested data objects should be used as an x value

x={["employees", "name"]}

number - specify which index of an array should be used as an x value when data is given as an array of arrays

x={0}

function - use a function to translate each element in a data array into an x value

x={(datum) => datum.xValue + datum.error}

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

---

y

type: string | string[] | number | function

Use the y data accessor prop to determine how the component defines data in the x dimension.

string - specify which property in an array of data objects should be used as the x value. This string may reference a nested property using dot notation.

y="salary";
y="employees.salary"

string[] - specify which property in an array of nested data objects should be used as an x value

y={["employees", "salary"]}

number - specify which index of an array should be used as an x value when data is given as an array of arrays

y={0}

function - use a function to translate each element in a data array into an x value

y={(datum) => Math.sin(2 * Math.PI * datum.x)}

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

y0

---

type: string | string[] | number | function

Use the y0 data accessor prop to determine how the component defines the baseline of y data.

string - specify which property in an array of data objects should be used as the y0 value. This string may reference a nested property using dot notation.

y0="last_quarter_profit";
y0="sales.last_quarter_profit"

string[] - specify which property in an array of nested data objects should be used as a y0 value

y0={["sales", "last_quarter_profit"]}

number - specify which index of an array should be used as an y0 value when data is given as an array of arrays

y0={1}

function - use a function to translate each element in a data array into an y0 value

y0={() => 10}

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