VictoryLegend

info

For examples of VictoryLegend in action, visit the Chart Legends guide.

Inherited Props

VictoryDatableProps

• categories
• dataoverridden
• dataComponentoverridden
• domain
• domainPadding
• samples
• sortKey
• sortOrder
• xoverridden
• yoverridden
• y0not-implemented

VictorySingleLabelableProps

• label
• labelComponent

VictoryCommonProps

• animate
• colorScale
• containerComponentoverridden
• disableInlineStyles
• domainPadding
• externalEventMutations
• groupComponent
• height
• horizontal
• maxDomain
• minDomain
• name
• origin
• padding
• polar
• range
• scale
• sharedEvents
• singleQuadrantDomainPadding
• standalone
• theme
• width

VictoryEventProps

• eventKey
• eventsoverridden

Component Props

---

borderComponent

type: ReactElementdefault: <Border/>

The borderComponent prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed borderComponent will be provided with the following properties calculated by VictoryLegend: x, y, width, height, and style. 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 borderComponent is not provided, VictoryLegend will use its default Border component. Please note that the default width and height calculated for the border component is based on approximated text measurements, and may need to be adjusted.

borderComponent={<Border width={300}/>}

---

borderPadding

type: number || { top: number, bottom: number, left: number, right: number }default: <Area>

The borderPadding specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or as an object with values specified for top, bottom, left, and right. Please note that the default width and height calculated for the border component is based on approximated text measurements, so padding may need to be adjusted.

borderPadding={{ top: 20, bottom: 10 }}

---

centerTitle

type: boolean

The centerTitle boolean prop specifies whether a legend title should be centered.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={10}
  title="Legend"
  centerTitle
  orientation="horizontal"
  gutter={20}
  style={{
    border: { stroke: "black" },
    title: { fontSize: 20 },
  }}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

containerComponent

type: ReactElementdefault: <VictoryContainer/>

VictoryLegend uses the standard containerComponent prop. Read about it here

warning

VictoryLegend only works with the VictoryContainer component

containerComponent={<VictoryContainer responsive={false}/>}

---

data

type: array[{ name, symbol, labels }]default: [{ name: "Series 1" }, { name: "Series 2" }]}

Specify data via the data prop. VictoryLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array. The symbol rendered may be changed by altering the type property of the symbol object. Valid types include: circle", "diamond", "plus", "minus", "square", "star", "triangleDown", and "triangleUp". If you want to use SVG icons from a custom component or an SVG based icon library like react-icons use the dataComponent property.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  orientation="horizontal"
  gutter={20}
  style={{
    border: { stroke: "black" },
  }}
  data={[
    {
      name: "One",
      symbol: {
        fill: "tomato",
        type: "star",
      },
    },
    {
      name: "Two",
      symbol: { fill: "orange" },
      labels: { fill: "orange" },
    },
    {
      name: "Three",
      symbol: { fill: "gold" },
    },
  ]}
/>

---

dataComponent

type: ReactElementdefault: <Point/>

VictoryLegend uses the standard dataComponent prop. Read about it here

VictoryLegend supplies the following props to its dataComponent: data, datum, events, index, x, y, size, style, and symbol. VictoryLegend renders a Point component by default.

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

An example of using Custom icons as dataComponent in VictoryLegend.

Live View

Loading...

Live Editor

const { FaSun } = reactIconsFa;

const CustomIcon = (props) => {
  return (
    <FaSun
      fill={
        props?.style?.fill || "green"
      }
      x={props.x - 7}
      y={props.y - 7}
      size={15}
    />
  );
};

function App() {
  return (
    <VictoryLegend
      orientation={"horizontal"}
      x={65}
      y={50}
      data={[
        {
          name: "One",
          symbol: { fill: "orange" },
        },
        {
          name: "Two",
          symbol: { fill: "blue" },
        },
        { name: "Three" },
      ]}
      dataComponent={<CustomIcon />}
    />
  );
}

render(<App />);

An example of using multiple Custom icons as dataComponent in VictoryLegend.

Live View

Loading...

Live Editor

const CustomMultipleIcon = (props) => {
  const { x, y, datum } = props;
  const Icon = reactIconsFa[datum.icon];
  return (
    <Icon
      x={x - 7}
      y={y - 7}
      size={15}
    />
  );
};

function App() {
  return (
    <VictoryLegend
      orientation={"horizontal"}
      x={65}
      y={50}
      data={[
        { name: "One", icon: "FaMoon" },
        { name: "Two", icon: "FaSun" },
        {
          name: "Three",
          icon: "FaStar",
        },
      ]}
      dataComponent={
        <CustomMultipleIcon />
      }
    />
  );
}

render(<App />);

---

eventKey

type: string | integer | string[] | function

VictoryLegend 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

---

events

type: array[object]

VictoryLegend uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

Live View

Loading...

Live Editor

<div>
  <h3>Click Me</h3>
  <VictoryLegend
    events={[
      {
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                target: "data",
                mutation: (props) => {
                  const fill =
                    props.style &&
                    props.style.fill;
                  return fill ===
                    "#c43a31"
                    ? null
                    : {
                        style: {
                          fill: "#c43a31",
                        },
                      };
                },
              },
              {
                target: "labels",
                mutation: (props) => {
                  return props.text ===
                    "clicked"
                    ? null
                    : {
                        text: "clicked",
                      };
                },
              },
            ];
          },
        },
      },
    ]}
    data={[
      { name: "One" },
      { name: "Two" },
      { name: "Three" },
    ]}
  />
</div>

---

gutter

type: number || { left: number, right: number }default: 10}

The gutter prop defines the number of pixels between legend columns. This prop may be given as a number, or as an object with values specified for "left" and "right" gutters. To set spacing between rows, use the rowGutter prop.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  orientation="horizontal"
  gutter={50}
  style={{
    border: { stroke: "black" },
  }}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

itemsPerRow

type: number

The itemsPerRow prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  orientation="horizontal"
  itemsPerRow={3}
  gutter={20}
  style={{
    border: { stroke: "black" },
  }}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
    { name: "Four" },
  ]}
/>

---

orientation

type: "vertical" || "horizontal"default: vertical"

The orientation prop takes a string that defines whether legend data are displayed in a row or column. When orientation is "horizontal", legend items will be displayed in rows. When orientation is "vertical", legend items will be displayed in columns.

---

rowGutter

type: number || { top: number, bottom: number }

The rowGutter prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for "top" and "bottom" gutters. To set spacing between columns, use the gutter prop.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  orientation="vertical"
  gutter={20}
  rowGutter={{ top: 0, bottom: 10 }}
  style={{
    border: { stroke: "black" },
  }}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

style

type: { border: object, data: object, labels: object, parent: object, title: object }

The style prop defines the style of the component. The style prop should be given as an object with styles defined for parent, data, labels, title, and border. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for data, and labels style properties, and they will be evaluated with the props corresponding to each element.

note: When a component is rendered as a child of another Victory component, or within a custom <svg> element with standalone={false} parent styles will be applied to the enclosing <g> tag. Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>.

note: custom angle and verticalAnchor properties may be included in labels and title styles.

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

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  title="Legend"
  centerTitle
  orientation="horizontal"
  gutter={20}
  style={{
    data: {
      fill: "blue",
      stroke: "navy",
      strokeWidth: 2,
    },
    labels: { fill: "navy" },
    border: { stroke: "black" },
    title: { fontSize: 20 },
  }}
  data={[
    {
      name: "One",
      symbol: { fill: "tomato" },
    },
    {
      name: "Two",
      labels: { fill: "orange" },
    },
    { name: "Three" },
  ]}
/>

---

symbolSpacer

type: number

The symbolSpacer prop defines the number of pixels between data components and label components. When a symbolSpacer is not defined, spacing is calculated based on symbol size and label font size.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  orientation="horizontal"
  symbolSpacer={5}
  gutter={20}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

title

type: string | string[]

The title prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  title="Legend Title"
  gutter={20}
  orientation="horizontal"
  style={{
    border: { stroke: "black" },
    title: { fontSize: 20 },
  }}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

titleComponent

type: ReactElementdefault: <VictoryLabel>

The titleComponent prop takes a component instance which will be used to render a title for the component. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, data, datum, verticalAnchor, textAnchor, style, text, and events. 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 labelComponent is omitted, a new VictoryLabel will be created with the props described above.

Live View

Loading...

Live Editor

<VictoryLegend
  x={125}
  y={50}
  title={["Legend Title", "subtitle"]}
  gutter={20}
  orientation="horizontal"
  style={{
    border: { stroke: "black" },
  }}
  titleComponent={
    <VictoryLabel
      style={[
        { fontSize: 20 },
        { fontSize: 12 },
      ]}
    />
  }
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

titleOrientation

type: "top" || "bottom" || "left" || "right"default: "top

The titleOrientation prop specifies where the title should be rendered in relation to the rest of the legend. Possible values for this prop are "top", "bottom", "left", and "right".

Live View

Loading...

Live Editor

<VictoryLegend
  x={50}
  y={50}
  title="Legend Title"
  titleOrientation="left"
  gutter={20}
  orientation="horizontal"
  style={{
    border: { stroke: "black" },
    title: { fontSize: 20 },
  }}
  data={[
    { name: "One" },
    { name: "Two" },
    { name: "Three" },
  ]}
/>

---

x

type: number

The x prop defines the x coordinate corresponding to the upper left corner of the legend.

---

y

type: number

The y prop defines the y coordinate corresponding to the upper left corner of the legend.