VictoryLegend renders a chart legend component.

<VictoryChart domain={[0, 10]}>
  <VictoryLegend x={125} y={50}
  	title="Legend"
    centerTitle
    orientation="horizontal"
    gutter={20}
    style={{ border: { stroke: "black" }, title: {fontSize: 20 } }}
    data={[
      { name: "One", symbol: { fill: "tomato", type: "star" } },
      { name: "Two", symbol: { fill: "orange" } },
      { name: "Three", symbol: { fill: "gold" } }
    ]}
  />
  <VictoryBar
      data={[
      { x: 2, y: 6, fill: "tomato" },
      { x: 4, y: 4, fill: "orange" },
      { x: 6, y: 2, fill: "gold" },
      { x: 8, y: 4, fill: "tomato" },
    ]}
  />
</VictoryChart>

type: element

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.

default: <Border/>

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

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

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

type: boolean

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

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

type: array[string]

The colorScale prop defines a color scale to be applied to each data symbol in VictoryLegend. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". VictoryLegend will assign a color to each symbol by index, unless they are explicitly specified in the data object. Colors will repeat when there are more symbols than colors in the provided colorScale.

<VictoryLegend x={125} y={10}
  orientation="horizontal"
  gutter={20}
  style={{ border: { stroke: "black" } }}
  colorScale={[ "navy", "blue", "cyan" ]}
  data={[
    { name: "One" }, { name: "Two" }, { name: "Three" }
  ]}
/>

type: element

VictoryLegend uses the standard containerComponent prop. Read about it here

note: VictoryLegend only works with the VictoryContainer component

default: containerComponent={<VictoryContainer/>}

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

type: array[{ name, symbol, labels }]

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"

default: data={[{ name: "Series 1" }, { name: "Series 2" }]}

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

type: element

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.

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

default: <Point/>

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

type: string || integer || array[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

eventKey = "x";

type: array[object]

VictoryLegend uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

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

type: array[object]

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

type: element

VictoryLegend uses the standard groupComponent prop. Read about it here

default: <g/>

groupComponent={<g transform="rotate(90)" />}

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

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.

default: gutter={10}

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

type: number

VictoryLegend uses the standard height prop. Read about it here

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

height={400}

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.

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

type: element

VictoryLegend uses the standard labelComponent prop. Read about it here

default: <VictoryLabel/>

<VictoryLegend
  data={[
    { name: "One" }, { name: "Two" }, { name: "Three" }
  ]}
  labelComponent={<VictoryLabel angle={45}/>}
/>

type: "vertical" || "horizontal"

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.

default: orientation="vertical"

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

VictoryLegend uses the standard padding prop. Read about it here

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

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

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.

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

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

type: boolean

The standalone props specifies whether the component should be rendered in an independent <svg> element or in a <g> tag. This prop defaults to true, and renders an svg.

default: standalone={true}

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

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

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.

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

type: object

The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme may be overridden by props specified on the component instance. By default, components use a grayscale theme. Read more about themes here.

default: theme={VictoryTheme.grayscale}

type: string || array[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.

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

type: element

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.

default: <VictoryLabel/>

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

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

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

default (provided by default theme): titleOrientation="top"

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

type: number

VictoryLegend uses the standard width prop. Read about it here

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

width={400}

type: number

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

type: number

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