Introduction
Note: PatternFly React charts live in its own package at @patternfly/react-charts!
PatternFly React charts are based on the Victory chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior.
Examples
Responsive bottom-left aligned legend
This demonstrates a responsive legend which wraps when items are wider than its container.
Interactive legend
This demonstrates how to add an interactive legend using events such as onMouseOver, onMouseOut, and onClick.
Interactive legend with pie chart
This demonstrates how to add an interactive legend to a pie chart using events such as onMouseOver, onMouseOut, and onClick.
Legend tooltips
This demonstrates an approach for applying tooltips to a legend using a custom label component. These tooltips are keyboard navigable.
Legend links
This demonstrates an approach for applying links to a legend using a custom label component. These links are keyboard navigable.
Legend layout
This demonstrates an approach for applying a different legend layout and styles using a custom label component.
Documentation
Tips
- See Victory's FAQ
ChartLegendmay be used as a standalone component, instead of usinglegendData
Note
Currently, the generated documention below is not able to resolve type definitions from Victory imports. For the components used in the examples above, Victory pass-thru props are also documented here:
- For
ChartLegendprops, see VictoryLegend
Props
ChartLegend
| Name | Type | Default | Description |
|---|---|---|---|
| borderComponent | React.ReactElement<any> | 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 ChartLegend: 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, ChartLegend 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. | |
| borderPadding | 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 asanobject 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. | |
| centerTitle | boolean | The centerTitle boolean prop specifies whether a legend title should be centered. | |
| colorScale | string[] | The colorScale prop defines a color scale to be applied to each data symbol in ChartLegend. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales. Colors will repeat when there are more symbols than colors in the provided colorScale. | |
| containerComponent | React.ReactElement<any> | <ChartContainer /> | The containerComponent prop takes an entire component which will be used to create a container element for standalone charts. The new element created from the passed containerComponent wil be provided with these props from ChartLegend: height, width, children (the chart itself) and style. Props that are not provided by the child chart component include title and desc, both of which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. 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, ChartLegend will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." /> |
| data | { name?: string; labels?: { fill?: string; }; symbol?: { fill?: string; type?: string; }; }[] | Specify data via the data prop. ChartLegend expects data as an array of objects with name (required), symbol, and labels properties. The data prop must be given as an array. | |
| dataComponent | React.ReactElement<any> | <ChartPoint /> | The dataComponent prop takes a component instance which will be responsible for rendering a data element used to associate a symbol or color with each data series. The new element created from the passed dataComponent will be provided with the following properties calculated by ChartLegend: x, y, size, style, and symbol. 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, ChartLegend will use its default Point component. |
| eventKey | number | string | Function | string[] | ChartLegend uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used. | |
| events | object[] | ChartLegend uses the standard events prop. | |
| externalEventMutations | object[] | ChartLegend uses the standard externalEventMutations prop. | |
| groupComponent | React.ReactElement<any> | The groupComponent prop takes an entire component which will be used to create group elements for use within container elements. This prop defaults to a <g> tag on web, and a react-native-svg <G> tag on mobile | |
| gutter | number | { left: number; right: number } | 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. | |
| height | number | Specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. | |
| itemsPerRow | 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. | |
| labelComponent | React.ReactElement<any> | <ChartLabel /> | The labelComponent prop takes a component instance which will be used to render each legend label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, style, and text. 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 ChartLabel will be created with the props described above. |
| orientation | string | 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 a single row. When orientation is "vertical", legend items will be displayed in a single column. Line and text-wrapping is not currently supported, so "vertical" orientation is both the default setting and recommended for displaying many series of data. | |
| padding | number | { top: number, bottom: number, left: number, right: number } | The padding props specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right. | |
| responsive | boolean | true | The responsive prop specifies whether the rendered container should be a responsive container with a viewBox attribute, or a static container with absolute width and height. Useful when legend is located inside a chart -- default is false. Note: Not compatible with containerComponent prop |
| rowGutter | 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. @example { top: 0, bottom: 10 } | |
| standalone | boolean | The standalone prop determines whether the component will render a standalone svg or a <g> tag that will be included in an external svg. Set standalone to false to compose ChartLegend with other components within an enclosing <svg> tag. | |
| style | { border: object, data: object, labels: object, parent: object, title: object } | The style prop specifies styles for your pie. ChartLegend relies on Radium, so valid Radium style objects should work for this prop. Height, width, and padding should be specified via the height, width, and padding props. @example {data: {stroke: "black"}, label: {fontSize: 10}} | |
| symbolSpacer | number | The symbolSpacer prop defines the number of pixels between data components and label components. | |
| theme | object | getTheme(themeColor) | The theme prop takes a style object with nested data, labels, and parent objects. You can create this object yourself, or you can use a theme provided by When using ChartLegend as a solo component, implement the theme directly on ChartLegend. If you are wrapping ChartLegend in ChartChart or ChartGroup, please call the theme on the outermost wrapper component instead. |
| themeColor | string | Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue} | |
| Deprecated: themeVariant | string | Specifies the theme variant. Valid values are 'dark' or 'light' Note: Not compatible with theme prop Use PatternFly's pf-theme-dark CSS selector | |
| title | 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. | |
| titleComponent | React.ReactElement<any> | <ChartLabel /> | 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 ChartLabel will be created with the props described above. |
| titleOrientation | string | 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”. | |
| width | number | Specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels. Because Victory renders responsive containers, the width and height props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into. | |
| x | number | The x and y props define the base position of the legend element. | |
| y | number | The x and y props define the base position of the legend element. |
View source on GitHub
