Edit this page

VictoryLegend

VictoryLegend renders a chart legend component.

            

Props

borderComponent

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

borderPadding

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

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

            

colorScale

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.

            

containerComponent

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

data

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.

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

            

dataComponent

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

eventKey

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"

events

VictoryLegend uses the standard events prop. Read about it here

See the Events Guide for more information on defining events.

            

groupComponent

VictoryLegend uses the standard groupComponent prop. Read about it here

default: <g/>

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

gutter

The gutter prop defines the number of pixels between legend rows or columns, depending on orientation. When orientation is horizontal, gutters are between columns. When orientation is vertical, gutters are the space between rows.

default: gutter={10}

            

height

VictoryLegend uses the standard height prop. Read about it here

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

height={400}

itemsPerRow

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.

            

labelComponent

VictoryLegend uses the standard labelComponent prop. Read about it here

default: <VictoryLabel/>

            

orientation

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"

padding

VictoryLegend uses the standard padding prop. Read about it here

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

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

sharedEvents

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

standalone

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}

style

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 each datum.

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

            

symbolSpacer

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.

            

theme

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}

title

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.

            

titleComponent

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

            

titleOrientation

The titleOrientation prop specifies where the a 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"

            

width

VictoryLegend uses the standard width prop. Read about it here

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

width={400}

x

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

y

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