Victory
Victory

About Docs Gallery Support GitHub FAQs

#
Data Accessors

Most Victory components expect data in the form of an array of data objects with values specified for `x` and `y`. Victory components expose data accessor props that may be used when data is not readily available in this format. Data accessor props may be used to specify how a data prop should be used, process a elements in a data array, or to plot math functions even when no data prop is given.

##
Specifying x and y data

Some Victory components like `VictoryCandlestick` and `VictoryErrorBar` have unusual accessor props that match their expected data formats, but most Victory components expose standard `x` and `y` data accessor props. These props may be used to specify which properties or elements of the data array should be plotted on the x and y axes.

When given as strings, these accessors will specify which properties of a data object to plot. The following example will plot employees on the x axis and salaries on the y axis:

    <VictoryBar
      data={[
        {employee: "Jane Doe", salary: 65000},
        {employee: "John Doe", salary: 62000}
        ...
      ]}
      x="employee"
      y="salary"
    />

If data is given as an array of arrays, data accessors may be given as integers to specify the index of the nested array that should be plotted.

    <VictoryBar
      data={[[0, 1], [1, 1], [2, 3], [3, 1]]}
      x={0}
      y={1}
    />

Data accessors may also be given as path strings or arrays to specify deeply nested data.

    <VictoryBar
      data={[
        {
          employee: { firstName: "Jane", lastName: "Doe" },
          salary: { base: 65000, bonus: 2000 }
        },
        {
          employee: { firstName: "John", lastName: "Doe" },
          salary: { base: 62000, bonus: 6000 }
        },
        ...
      ]}
      x="employee.firstName"
      y={["salary", "base"]}
    />

##
Processing data

Data accessor props may be given as functions and used to process data, as in the following example.

##
Sorting data

Sorting can be applied to the final data via the sortKey prop. This prop corresponds to the lodash sortBy function.

This prop can be provided as a string, function, or array of either.

##
Plotting functions

If data is not given, data accessor props may be used to plot math functions. In this scenarios, initial data will be generated based on the domain and number of samples. Alter the `samples` and `domain` props to change how functions are plotted.