Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
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
Embedded legend
This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
Embedded HTML
This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor.
Documentation
Tips
- See Victory's FAQ
- For single data points or zero values, you may want to set the
domainprop - The
themeandthemeColorprops should be applied at the most top level component
Note
Currently, the generated documentation 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
Chartprops, see VictoryChart - For
ChartAxisprops, see VictoryAxis - For
ChartBoxPlotprops, see VictoryBoxPlot - For
ChartVoronoiContainerprops, see VictoryVoronoiContainer
Props
Chart
| Name | Type | Default | Description |
|---|---|---|---|
| animate | boolean | object | The animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})} | |
| ariaDesc | string | The ariaDesc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. Note: Overridden by the desc prop of containerComponent | |
| ariaTitle | string | The ariaTitle prop specifies the title to be applied to the SVG to assist accessibility for screen readers. Note: Overridden by the title prop of containerComponent | |
| backgroundComponent | React.ReactElement | The backgroundComponent prop takes a component instance which will be responsible for rendering a background if the Chart's style component includes background styles. The new element created from the passed backgroundComponent will be provided with the following properties calculated by Chart: height, polar, scale, style, x, y, width. All of these props on Background should take prececence over what VictoryChart is trying to set. | |
| children | React.ReactNode | React.ReactNode[] | The children to render with the chart | |
| 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 ChartArea: 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, ChartArea will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." /> |
| domain | number[] | { x: number[], y: number[] } | The domain prop describes the range of values your chart will include. This prop can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information. @example [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]} | |
| domainPadding | number | number[] | { x: number[], y: number[] } | The domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5} | |
| endAngle | number | The endAngle props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with startAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. | |
| eventKey | number | string | Function | Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data | |
| events | object[] | The event prop takes an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are all valid targets for ChartPie events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler is used to modify elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single bar), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "data", eventKey: 1, eventHandlers: { onClick: () => { return [ { eventKey: 2, mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { eventKey: 2, target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]} | |
| externalEventMutations | object[] | Chart 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 | |
| hasPatterns | boolean | boolean[] | The hasPatterns prop is an optional prop that indicates whether a pattern is shown for a chart. SVG patterns are dynamically generated (unique to each chart) in order to apply colors from the selected color theme or custom color scale. Those generated patterns are applied in a specific order (via a URL), similar to the color theme ordering defined by PatternFly. If the multi-color theme was in use; for example, colorized patterns would be displayed in that same order. Create custom patterns via the patternScale prop. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example hasPatterns={ true } @example hasPatterns={[ true, true, false ]} | |
| height | number | theme.chart.height | 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. Typically, the parent container is set to the same width in order to maintain the aspect ratio. |
| horizontal | boolean | The horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis. | |
| innerRadius | number | Function | When the innerRadius prop is set, polar charts will be hollow rather than circular. | |
| legendAllowWrapBeta | boolean | ((extraHeight: number) => void) | false | Allows legend items to wrap onto the next line if the chart is not wide enough. Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you define the height and width of the chart's parent container, you must accommodate for extra legend height due to legend items wrapping onto the next line. When the height of the chart's parent container is too small, some legend items may not be visible. Alternatively, a callback function may be provided, which will be called after the legend's itemsPerRow property has been calculated. The value provided can be used to increase the chart's parent container height as legend items wrap onto the next line. If no adjustment is necessary, the value will be zero. Note: This is overridden by the legendItemsPerRow property |
| legendComponent | React.ReactElement<any> | <ChartLegend /> | The legend component to render with chart. Note: Use legendData so the legend width can be calculated and positioned properly. Default legend properties may be applied |
| legendData | { name?: 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. @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]} | |
| legendDirectionBeta | 'ltr' | 'rtl' | 'ltr' | Text direction of the legend labels. |
| legendOrientation | 'horizontal' | 'vertical' | theme.legend.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 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. |
| legendPosition | 'bottom' | 'bottom-left' | 'right' | ChartCommonStyles.legend.position | The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right' Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some cases, the legend may not be visible until enough padding is applied. |
| maxDomain | number | { x?: number; y?: number } | The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }} | |
| minDomain | number | { x?: number; y?: number } | The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }} | |
| name | string | The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page. | |
| 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. | |
| patternScale | string[] | The patternScale prop is an optional prop that defines patterns to apply, where applicable. This prop should be given as a string array of pattern URLs. Patterns will be assigned to children by index and will repeat when there are more children than patterns in the provided patternScale. Use null to omit the pattern for a given index. Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} | |
| polar | boolean | Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart. | |
| range | number[] | { x: number[], y: number[] } | The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart, ChartStack, or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] | { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }} | |
| scale | string | { x: string, y: string } | The scale prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), as a d3 scale function, or as an object with scales specified for x and y @example d3Scale.time(), {x: "linear", y: "log"} | |
| showAxis | boolean | true | Convenience prop to hide both x and y axis, which are shown by default. Alternatively, the axis can be hidden via chart styles. |
| singleQuadrantDomainPadding | boolean | { x?: boolean; y?: boolean } | By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }} | |
| 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 Chart with other components within an enclosing <svg> tag. | |
| startAngle | number | The startAngle props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with endAngle to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. | |
| style | { parent: object, background: object } | The style prop defines the style of the component. The style prop should be given as an object with styles defined for data, labels and parent. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in Chart. @propType { parent: object, background: object } | |
| theme | object | getChartTheme(themeColor, showAxis) | 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 overwritten by props specified on the component instance. |
| themeColor | string | Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue} | |
| width | number | theme.chart.width | 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. Typically, the parent container is set to the same width in order to maintain the aspect ratio. |
ChartAxis
| Name | Type | Default | Description |
|---|---|---|---|
| animate | boolean | object | The animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})} | |
| axisComponent | React.ReactElement<any> | The axisComponent prop takes in an entire component which will be used to create the axis line. The new element created from the passed axisComponent will be supplied with the following properties: x1, y1, x2, y2, style 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 an axisComponent is not supplied, ChartAxis will render its default AxisLine component. | |
| axisLabelComponent | React.ReactElement<any> | <ChartLabel /> | The axisLabelComponent prop takes in an entire component which will be used to create the axis label. The new element created from the passed axisLabelComponent will be supplied with the following properties: x, y, verticalAnchor, textAnchor, angle, transform, style 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 an axisLabelComponent is not supplied, a new ChartLabel will be created with props described above |
| axisValue | number | string | object | Date | The axisValue prop may be used instead of axisAngle to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis. | |
| 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 ChartAxis: 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, ChartAxis will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows ..." /> |
| crossAxis | boolean | This prop specifies whether a given axis is intended to cross another axis. | |
| dependentAxis | boolean | The dependentAxis prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing axis with other components to form a chart. | |
| domain | number[] | { x: number[], y: number[] } | The domain prop describes the range of values your axis will include. This prop should be given as a array of the minimum and maximum expected values for your axis. If this value is not given it will be calculated based on the scale or tickValues. @example [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]} | |
| domainPadding | number | number[] | { x: number[], y: number[] } | The domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5} | |
| events | object[] | The event prop take an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "axis", "axisLabel", "ticks", "tickLabels", and "grid" are all valid targets for ChartAxis events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler be used to modify other elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single tick), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "grid", eventKey: 2, eventHandlers: { onClick: () => { return [ { mutation: (props) => { return {style: merge({}, props.style, {stroke: "orange"})}; } }, { target: "tickLabels", mutation: () => { return {text: "hey"}; } } ]; } } } ]} | |
| externalEventMutations | object[] | ChartAxis uses the standard externalEventMutations prop. | |
| fixLabelOverlap | boolean | When true, this prop reduces the number of tick labels to fit the length of the axis. Labels are removed at approximately even intervals from the original array of labels. This feature only works well for labels that are approximately evenly spaced. | |
| gridComponent | React.ReactElement<any> | The gridComponent prop takes in an entire component which will be used to create grid lines. The new element created from the passed gridComponent will be supplied with the following properties: x1, y1, x2, y2, tick, style 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 a gridComponent is not supplied, ChartAxis will render its default GridLine component. | |
| 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 | |
| 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. | |
| invertAxis | boolean | If true, this value will flip the domain of a given axis. | |
| label | any | The label prop defines the label that will appear along the axis. This prop should be given as a value or an entire, HTML-complete label component. If a label component is given, it will be cloned. The new element's properties x, y, textAnchor, verticalAnchor, and transform will have defaults provided by the axis; styles filled out with defaults provided by the axis, and overrides from the label component. If a value is given, a new ChartLabel will be created with props and styles from the axis. | |
| maxDomain | number | { x?: number; y?: number } | The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }} | |
| minDomain | number | { x?: number; y?: number } | The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }} | |
| name | string | The name prop is typically used to reference a component instance when defining shared events. However, this optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory based components output unique IDs when multiple charts appear in a page. | |
| offsetX | number | This value describes how far from the "edge" of its permitted area each axis will be set back in the x-direction. If this prop is not given, the offset is calculated based on font size, axis orientation, and label padding. | |
| offsetY | number | This value describes how far from the "edge" of its permitted area each axis will be set back in the y-direction. If this prop is not given, the offset is calculated based on font size, axis orientation, and label padding. | |
| orientation | string | The orientation prop specifies the position and orientation of your axis. Valid values are 'top', 'bottom', 'left' and 'right'. | |
| 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. | |
| range | number[] | { x: number[], y: number[] } | The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart, ChartStack, or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] | { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }} | |
| scale | string | { x: string, y: string } | The scale prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), as a d3 scale function, or as an object with scales specified for x and y @example d3Scale.time(), {x: "linear", y: "log"} | |
| showGrid | boolean | false | Show axis grid and ticks |
| singleQuadrantDomainPadding | boolean | { x?: boolean; y?: boolean } | By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }} | |
| 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 ChartAxis with other components within an enclosing <svg> tag. | |
| style | { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object } | The style prop defines the style of the component. The style prop should be given as an object with styles defined for parent, axis, axisLabel, grid, ticks, and tickLabels. Any valid svg styles are supported, but width, height, and padding should be specified via props as they determine relative layout for components in Chart. Functional styles may be defined for grid, tick, and tickLabel style properties, and they will be evaluated with each tick. 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 styles. | |
| 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 ChartAxis as a solo component, implement the theme directly on ChartAxis. If you are wrapping ChartAxis 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} | |
| tickComponent | React.ReactElement<any> | The tickComponent prop takes in an entire component which will be used to create tick lines. The new element created from the passed tickComponent will be supplied with the following properties: x1, y1, x2, y2, tick, style 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 a tickComponent is not supplied, ChartAxis will render its default Tick component. | |
| tickCount | number | The tickCount prop specifies approximately how many ticks should be drawn on the axis if tickValues are not explicitly provided. This value is calculated by d3 scale and prioritizes returning "nice" values and evenly spaced ticks over an exact number of ticks. If you need an exact number of ticks, please specify them via the tickValues prop. This prop must have a value greater than zero. | |
| tickFormat | any[] | ((tick: any, index: number, ticks: any[]) => string | number) | The tickFormat prop specifies how tick values should be expressed visually. tickFormat can be given as a function to be applied to every tickValue, or as an array of display values for each tickValue. @example d3.time.format("%Y"), (x) => x.toPrecision(2), ["first", "second", "third"] | |
| tickLabelComponent | React.ReactElement<any> | <ChartLabel /> | The tickLabelComponent prop takes in an entire component which will be used to create the tick labels. The new element created from the passed tickLabelComponent will be supplied with the following properties: x, y, verticalAnchor, textAnchor, angle, tick, style 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 an tickLabelComponent is not supplied, a new ChartLabel will be created with props described above |
| tickValues | any[] | The tickValues prop explicitly specifies which tick values to draw on the axis. @example ["apples", "bananas", "oranges"], [2, 4, 6, 8] | |
| 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. Note: innerRadius may need to be set when using this property. |
ChartBoxPlot
| Name | Type | Default | Description |
|---|---|---|---|
| animate | boolean | object | The animate prop specifies props for VictoryAnimation to use. The animate prop should also be used to specify enter and exit transition configurations with the `onExit` and `onEnter` namespaces respectively. @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})} | |
| boxWidth | number | The boxWidth prop specifies how wide each box should be. If the whiskerWidth prop is not set, this prop will also determine the width of the whisker crosshair. | |
| categories | string[] | { x: string[], y: string[] } | The categories prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array @example ["dogs", "cats", "mice"] | |
| 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 ChartBoxPlot: 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, ChartBoxPlot will use the default ChartContainer component. @example <ChartContainer title="Chart of Dog Breeds" desc="This chart shows..." /> |
| data | any[] | The data prop for ChartBoxPlot may be given in a variety of formats: @example As an array of standard data objects with values specified for x and y When given in this format, repeated values for x will be used for calculating summary statistics data={[ { x: 1, y: 2 }, { x: 1, y: 3 }, { x: 1, y: 5 }, { x: 2, y: 1 }, { x: 2, y: 4 }, { x: 2, y: 5 }, ... ]} @example As an array of data objects where y is given as an array of values When given in this format, array values are used for calculating summary statistics. data={[ { x: 1, y: [1, 2, 3, 5] }, { x: 2, y: [3, 2, 8, 10] }, { x: 3, y: [2, 8, 6, 5] }, { x: 4, y: [1, 3, 2, 9] } ]} @example As an array of data objects with pre-calculated summary statistics(min, median, max, q1, q3) When given in this format, ChartBoxPlot will not perform statistical analysis. Pre-calculating summary statistics for large datasets will improve performance. data={[ { x: 1, min: 2, median: 5, max: 10, q1: 3, q3: 7 }, { x: 2, min: 1, median: 4, max: 9, q1: 3, q3: 6 }, { x: 3, min: 1, median: 6, max: 12, q1: 4, q3: 10 }, ]} Use the x, y, min, max, median, q1, and q3 data accessor props to specify custom data formats. | |
| domain | number[] | { x: number[], y: number[] } | The domain prop describes the range of values your chart will cover. This prop can be given as a array of the minimum and maximum expected values for your bar chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information. @example [low, high], { x: [low, high], y: [low, high] } [-1, 1], {x: [0, 100], y: [0, 1]} | |
| domainPadding | number | number[] | { x: number[], y: number[] } | The domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y. @example [left, right], { x: [left, right], y: [bottom, top] } {x: [10, -10], y: 5} | |
| eventKey | number | string | Function | Similar to data accessor props `x` and `y`, this prop may be used to functionally assign eventKeys to data | |
| events | object[] | The event prop take an array of event objects. Event objects are composed of a target, an eventKey, and eventHandlers. Targets may be any valid style namespace for a given component, so "data" and "labels" are all valid targets for ChartBoxPlot events. The eventKey may optionally be used to select a single element by index rather than an entire set. The eventHandlers object should be given as an object whose keys are standard event names (i.e. onClick) and whose values are event callbacks. The return value of an event handler is used to modify elemnts. The return value should be given as an object or an array of objects with optional target and eventKey keys, and a mutation key whose value is a function. The target and eventKey keys will default to those corresponding to the element the event handler was attached to. The mutation function will be called with the calculated props for the individual selected element (i.e. a single bar), and the object returned from the mutation function will override the props of the selected element via object assignment. @example events={[ { target: "data", eventKey: "thisOne", eventHandlers: { onClick: () => { return [ { eventKey: "theOtherOne", mutation: (props) => { return {style: merge({}, props.style, {fill: "orange"})}; } }, { eventKey: "theOtherOne", target: "labels", mutation: () => { return {text: "hey"}; } } ]; } } } ]} | |
| externalEventMutations | object[] | ChartBoxPlot 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 | |
| height | number | The height props specifies the height the svg viewBox of the chart container. This value should be given as a number of pixels | |
| horizontal | boolean | The horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. | |
| labelOrientation | OrientationTypes | VictoryBoxPlotLabelOrientationInterface | The labelOrientation prop determines where labels are placed relative to their corresponding data. If this prop is not set, it will be set to "top" for horizontal charts, and "right" for vertical charts. | |
| labels | boolean | When the boolean labels prop is set to true, the values for min, max, median, q1, and q3 will be displayed for each box. For more granular label control, use the individual minLabels, maxLabels, medianLabels, q1Labels, and q3Labels props. | |
| max | string | array[string] | function | Use the max data accessor prop to define the max value of a box plot. @example Specify which property in an array of data objects should be used as the max value max="max_value" @example Use a function to translate each element in a data array into a max value max={() => 10} @example Specify which property in an array of nested data objects should be used as a max value max="bonds.max", max={["bonds", "max"]} | |
| maxComponent | React.ReactElement | The maxComponent prop takes a component instance which will be responsible for rendering an element to represent the maximum value of the box plot. The new element created from the passed maxComponent will be provided with the following props calculated by ChartBoxPlot: datum, index, scale, style, events, majorWhisker and minorWhisker. The majorWhisker and minorWhisker props are given as objects with values for x1, y1, x2 and y2 that describes the lines that make up the major and minor whisker. 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 maxComponent is not provided, ChartBoxPlot will use its default Whisker component. | |
| maxDomain | number | { x?: number; y?: number } | The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the domain prop is set in addition to maximumDomain, domain will be used. Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example maxDomain={0} maxDomain={{ y: 0 }} | |
| maxLabelComponent | React.ReactElement | The maxLabelComponent prop takes a component instance which will be used to render the label corresponding to the maximum value for each box. The new element created from the passed maxLabelComponent will be supplied with the following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style 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 maxLabelComponent is omitted, a new ChartLabel will be created with props described above. | |
| maxLabels | VictoryBoxPlotLabelType | The maxLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label. @example maxLabels={["first", "second", "third"]} maxLabels={({ datum }) => Math.round(datum.max)} | |
| median | string | array[string] | function | Use the median data accessor prop to define the median value of a box plot. @example Specify which property in an array of data objects should be used as the median value median="median_value" @example Use a function to translate each element in a data array into a median value median={() => 10} @example Specify which property in an array of nested data objects should be used as a median value median="bonds.median", median={["bonds", "median"]} | |
| medianComponent | React.ReactElement | The medianComponent prop takes a component instance which will be responsible for rendering an element to represent the median value of the box plot. The new element created from the passed medianComponent will be provided with the following props calculated by ChartBoxPlot: datum, index, scale, style, events, x1, y1, x2 and y2 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 medianComponent is not provided, ChartBoxPlot will use its default Line component. | |
| medianLabelComponent | React.ReactElement | The medianLabelComponent prop takes a component instance which will be used to render the label corresponding to the median value for each box. The new element created from the passed medianLabelComponent will be supplied with the following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style 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 medianLabelComponent is omitted, a new ChartLabel will be created with props described above. | |
| medianLabels | string | function | boolean | The medianLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the median value of each datum will be used for the label. @example medianLabels={["first", "second", "third"]} medianLabels={({ datum }) => Math.round(datum.median)} | |
| min | string | array[string] | function | Use the min data accessor prop to define the min value of a box plot. @example Specify which property in an array of data objects should be used as the min value min="min_value" @example Use a function to translate each element in a data array into a min value min={() => 10} @example Specify which property in an array of nested data objects should be used as a min value min="bonds.min", min={["bonds", "min"]} | |
| minComponent | React.ReactElement | The minComponent prop takes a component instance which will be responsible for rendering an element to represent the minimum value of the box plot. The new element created from the passed minComponent will be provided with the following props calculated by ChartBoxPlot: datum, index, scale, style, events, majorWhisker and minorWhisker. The majorWhisker and minorWhisker props are given as objects with values for x1, y1, x2 and y2 that describes the lines that make up the major and minor whisker. 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 minComponent is not provided, ChartBoxPlot will use its default Whisker component. | |
| minDomain | number | { x?: number; y?: number } | The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the domain prop is set in addition to minimumDomain, domain will be used. Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example minDomain={0} minDomain={{ y: 0 }} | |
| minLabelComponent | React.ReactElement | The minLabelComponent prop takes a component instance which will be used to render the label corresponding to the minimum value for each box. The new element created from the passed minLabelComponent will be supplied with the following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style 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 minLabelComponent is omitted, a new ChartLabel will be created with props described above. | |
| minLabels | string | function | boolean | The minLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the min value of each datum will be used for the label. @example minLabels={["first", "second", "third"]} minLabels={({ datum }) => Math.round(datum.min)} | |
| name | string | The name prop is used to reference a component instance when defining shared events. | |
| origin | { x: number, y: number } | Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually | |
| 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. | |
| q1 | string | array[string] | function | Use the q1 data accessor prop to define the q1 value of a box plot. @example Specify which property in an array of data objects should be used as the q1 value q1="q1_value" @example Use a function to translate each element in a data array into a q1 value q1={() => 10} @example Specify which property in an array of nested data objects should be used as a q1 value q1="bonds.q1", q1={["bonds", "q1"]} | |
| q1Component | React.ReactElement | The q1Component prop takes a component instance which will be responsible for rendering an element to represent the q1 value of the box plot. The new element created from the passed q1Component will be provided with the following props calculated by ChartBoxPlot: datum, index, scale, style, events, x, y, width and height 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 q1Component is not provided, ChartBoxPlot will use its default Box component. | |
| q1LabelComponent | React.ReactElement | The q1LabelComponent prop takes a component instance which will be used to render the label corresponding to the q1 value for each box. The new element created from the passed q1LabelComponent will be supplied with the following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style 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 q1LabelComponent is omitted, a new ChartLabel will be created with props described above. | |
| q1Labels | string | function | boolean | The q1Labels prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q1 value of each datum will be used for the label. @example q1Labels={["first", "second", "third"]} q1Labels={({ datum }) => Math.round(datum.q1)} | |
| q3 | string | array[string] | function | Use the q3 data accessor prop to define the q3 value of a box plot. @example Specify which property in an array of data objects should be used as the q3 value q3="q3_value" @example Use a function to translate each element in a data array into a q3 value q3={() => 10} @example Specify which property in an array of nested data objects should be used as a q3 value q3="bonds.q3", q3={["bonds", "q3"]} | |
| q3Component | React.ReactElement | The q3Component prop takes a component instance which will be responsible for rendering an element to represent the q3 value of the box plot. The new element created from the passed q3Component will be provided with the following props calculated by ChartBoxPlot: datum, index, scale, style, events, x, y, width and height 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 q3Component is not provided, ChartBoxPlot will use its default Box component. | |
| q3LabelComponent | React.ReactElement | The q3LabelComponent prop takes a component instance which will be used to render the label corresponding to the q3 value for each box. The new element created from the passed q3LabelComponent will be supplied with the following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style 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 q3LabelComponent is omitted, a new ChartLabel will be created with props described above. | |
| q3Labels | string | function | boolean | The q3Labels prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q3 value of each datum will be used for the label. @example q3Labels={["first", "second", "third"]} q3Labels={({ datum }) => Math.round(datum.q3)} | |
| range | number[] | { x: number[], y: number[] } | The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within Chart or ChartGroup will have no effect. This prop is usually not set manually. @example [low, high] | { x: [low, high], y: [low, high] } Cartesian: range={{ x: [50, 250], y: [50, 250] }} Polar: range={{ x: [0, 360], y: [0, 250] }} | |
| samples | number | The samples prop specifies how many individual points to plot when plotting y as a function of x. Samples is ignored if x props are provided instead. | |
| scale | string | { x: string, y: string } | The scale prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), as a d3 scale function, or as an object with scales specified for x and y @example d3Scale.time(), {x: "linear", y: "log"} | |
| singleQuadrantDomainPadding | boolean | { x?: boolean; y?: boolean } | By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis. @example singleQuadrantDomainPadding={false} singleQuadrantDomainPadding={{ x: false }} | |
| sortKey | number | string | Function | string[] | Use the sortKey prop to indicate how data should be sorted. This prop is given directly to the lodash sortBy function to be executed on the final dataset. | |
| sortOrder | string | The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order. | |
| 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 ChartBoxPlot with other components within an enclosing <svg> tag. | |
| style | { parent: object, data: object, labels: object } | The style prop specifies styles for your ChartBoxPlot. Any valid inline style properties will be applied. Height, width, and padding should be specified via the height, width, and padding props, as they are used to calculate the alignment of components within chart. @example {data: {fill: "red"}, labels: {fontSize: 12}} | |
| 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 ChartBoxPlot as a solo component, implement the theme directly on ChartBoxPlot. If you are wrapping ChartBoxPlot 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} | |
| whiskerWidth | number | The whiskerWidth prop specifies how wide each whisker crosshair should be. If the whiskerWidth prop is not set, the width of the whisker crosshair will match the width of the box. | |
| width | number | The width props specifies the width of the svg viewBox of the chart container This value should be given as a number of pixels | |
| x | number | string | Function | string[] | The x prop specifies how to access the X value of each data point. If given as a function, it will be run on each data point, and returned value will be used. If given as an integer, it will be used as an array index for array-type data points. If given as a string, it will be used as a property key for object-type data points. If given as an array of strings, or a string containing dots or brackets, it will be used as a nested object property path (for details see Lodash docs for _.get). If `null` or `undefined`, the data value will be used as is (identity function/pass-through). @example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d) | |
| y | number | string | Function | string[] | The y prop specifies how to access the Y value of each data point. If given as a function, it will be run on each data point, and returned value will be used. If given as an integer, it will be used as an array index for array-type data points. If given as a string, it will be used as a property key for object-type data points. If given as an array of strings, or a string containing dots or brackets, it will be used as a nested object property path (for details see Lodash docs for _.get). If `null` or `undefined`, the data value will be used as is (identity function/pass-through). @example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d) | |
| y0 | number | string | Function | string[] | Use y0 data accessor prop to determine how the component defines the baseline y0 data. This prop is useful for defining custom baselines for components like ChartBoxPlot. This prop may be given in a variety of formats. @example 'last_quarter_profit', () => 10, 1, 'employees.salary', ["employees", "salary"] |
ChartCursorFlyout
| Name | Type | Default | Description |
|---|---|---|---|
| center | { x: number; y: number; } | ||
| cornerRadius | number | ||
| datum | object | ||
| dx | number | ||
| dy | number | ||
| height | number | ||
| orientation | OrientationTypes | ||
| pathComponent | React.ReactElement | <Path /> | |
| pointerLength | number | ||
| pointerWidth | number | ||
| role | No type info | 'presentation' | |
| shapeRendering | No type info | 'auto' | |
| width | number | ||
| x | number | ||
| y | number |
ChartCursorTooltip
| Name | Type | Default | Description |
|---|---|---|---|
| activateData | boolean | When true, tooltip events will set the active prop on both data and label elements. | |
| active | boolean | The active prop specifies whether the tooltip component should be displayed. | |
| angle | number | The angle prop specifies the angle to rotate the tooltip around its origin point. | |
| center | { x: number; y: number } | The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for positioning the flyout of a tooltip independent from the pointer. When ChartTooltip is used with ChartVoronoiContainer, the center prop is what enables the mouseFollowTooltips option. When this prop is set, non-zero pointerLength values will no longer be respected. | |
| centerOffset | { x: number | Function, y: number | Function } | getCursorTooltipCenterOffset({ offsetCursorDimensionX: true, theme }) | The centerOffset prop determines the position of the center of the tooltip flyout in relation to the flyout pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a function that returns a numeric value. When this prop is set, non-zero pointerLength values will no longer be respected. |
| constrainToVisibleArea | boolean | true | The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders. |
| cornerRadius | number | Function | The cornerRadius prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum. | |
| data | any[] | Victory components can pass a data prop to their label component. This can be useful in custom components that need to make use of the entire dataset. | |
| datum | {} | Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, and determine text. | |
| dx | number | Function | The dx prop defines a horizontal shift from the x coordinate. | |
| dy | number | Function | The dy prop defines a vertical shift from the y coordinate. | |
| events | object | The events prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory’s event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey. @example events={{onClick: (evt) => alert("x: " + evt.clientX)}} | |
| flyoutComponent | React.ReactElement<any> | <ChartCursorFlyout /> | The flyoutComponent prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed flyoutComponent will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, 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 flyoutComponent is omitted, a default Flyout component will be created with props described above. @example flyoutComponent={<Flyout x={50} y={50}/>}, flyoutComponent={<MyCustomFlyout/>} |
| flyoutHeight | number | Function | The flyoutHeight prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, height will be determined based on an approximate text size calculated from the text and style props provided to ChartTooltip. | |
| flyoutStyle | object | The style prop applies SVG style properties to the rendered flyout container. These props will be passed to the flyoutComponent. | |
| flyoutWidth | number | Function | The flyoutWidth prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, flyoutWidth will be determined based on an approximate text size calculated from the text and style props provided to VictoryTooltip. | |
| groupComponent | React.ReactElement<any> | The groupComponent prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a <g> tag.} | |
| horizontal | boolean | The horizontal prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. i.e. negative values result in a left orientation and positive values will result in a right orientation by default. | |
| index | number | string | The index prop represents the index of the datum in the data array. | |
| labelComponent | React.ReactElement<any> | The labelComponent prop takes a component instance which will be used to render each tooltip label. The new element created from the passed labelComponent will be supplied with the following properties: x, y, index, 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. @example labelComponent={<ChartLabel dy={20}/>}, labelComponent={<MyCustomLabel/>} | |
| labelTextAnchor | string | Function | 'start' | Defines how the labelComponent text is horizontally positioned relative to its `x` and `y` coordinates. Valid values are 'start' (default), 'middle', 'end', and 'inherit'. Note that this overrides the style prop. |
| orientation | string | Function | The orientation prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as “top”, “bottom”, “left”, “right”, or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the datum, and the value of the horizontal prop. | |
| pointerLength | number | Function | showPointer && theme && theme.tooltip ? theme.tooltip.pointerLength : 0 | The pointerLength prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. |
| pointerOrientation | string | Function | getCursorTooltipPoniterOrientation({ horizontal: true, theme }) | This prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, it will be determined based on the overall orientation of the flyout in relation to its data point, and any center or centerOffset values. Valid values are 'top', 'bottom', 'left' and 'right. |
| pointerWidth | number | Function | (theme.tooltip as any).pointerWidth | The pointerWidth prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. |
| renderInPortal | boolean | When renderInPortal is true, rendered tooltips will be wrapped in VictoryPortal and rendered within the Portal element within ChartContainer. Note: This prop should not be set to true when using a custom container element. | |
| showPointer | boolean | true | Flag to force flyout pointer to be shown. Victory provides pointerLength=0 when using a voronoi container with voronoiDimension="x" |
| style | React.CSSProperties | React.CSSProperties[] | The style prop applies CSS properties to the rendered `<text>` element. | |
| text | number | string | Function | string[] | number[] | The text prop defines the text ChartTooltip will render. The text prop may be given as a string, number, or function of datum. When ChartLabel is used as the labelComponent, strings may include newline characters, which ChartLabel will split in to separate <tspan/> elements. | |
| theme | object | getTheme(themeColor) | 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 overwritten by props specified on the component instance. |
| themeColor | string | Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue} | |
| x | number | The x prop defines the x coordinate to use as a basis for horizontal positioning. | |
| y | number | The y prop defines the y coordinate to use as a basis for vertical positioning. |
ChartVoronoiContainer
| Name | Type | Default | Description |
|---|---|---|---|
| activateData | boolean | When the activateData prop is set to true, the active prop will be set to true on all data components within a voronoi area. When this prop is set to false, the onActivated and onDeactivated callbacks will still fire, but no mutations to data components will occur via Victory’s event system. | |
| activateLabels | boolean | When the activateLabels prop is set to true, the active prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the onActivated and onDeactivated callbacks will still fire, but no mutations to label components will occur via Victory’s event system. Labels defined directly on ChartVoronoiContainer via the labels prop will still appear when this prop is set to false. | |
| className | string | The className prop specifies a className that will be applied to the outer-most div rendered by the container | |
| constrainToVisibleArea | boolean | false | The constrainToVisibleArea prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders. |
| containerId | number | string | The containerId prop may be used to set a deterministic id for the container. When a containerId is not manually set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing. | |
| desc | string | The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more info about the chart provided in the description, the more usable it will be for people using screen readers. This prop defaults to an empty string. @example "Golden retreivers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each." | |
| disable | boolean | When the disable prop is set to true, ChartVoronoiContainer events will not fire. | |
| events | React.DOMAttributes<any> | The events prop attaches arbitrary event handlers to the container component. Event handlers passed from other Victory components are called with their corresponding events as well as scale, style, width, height, and data when applicable. Use the invert method to convert event coordinate information to data. `scale.x.invert(evt.offsetX)`. @example {onClick: (evt) => alert(`x: ${evt.clientX}, y: ${evt.clientY}`)} | |
| height | number | The height props specifies the height the svg viewBox of the container. This value should be given as a number of pixels. If no height prop is given, the height prop from the child component passed will be used. | |
| labelComponent | React.ReactElement<any> | <ChartTooltip /> | The labelComponent prop specified the component that will be rendered when labels are defined on ChartVoronoiContainer. If the labels prop is omitted, no label component will be rendered. |
| labels | (point: any, index: number, points: any[]) => string | When a labels prop is provided to ChartVoronoiContainer it will render a label component rather than activating labels on the child components it renders. This is useful for creating multi- point tooltips. This prop should be given as a function which will be called once for each active point. The labels function will be called with the arguments point, index, and points, where point refers to a single active point, index refers to the position of that point in the array of active points, and points is an array of all active points. | |
| mouseFollowTooltips | boolean | When the mouseFollowTooltip prop is set on ChartVoronoiContainer, The position of the center of the tooltip follows the position of the mouse. | |
| name | string | The name prop is used to reference a component instance when defining shared events. | |
| onActivated | Function | The onActivated prop accepts a function to be called whenever new data points are activated. The function is called with the parameters points (an array of active data objects) and props (the props used by ChartVoronoiContainer). | |
| onDeactivated | Function | The onDeactivated prop accepts a function to be called whenever points are deactivated. The function is called with the parameters points (an array of the newly-deactivated data objects) and props (the props used by ChartVoronoiContainer). | |
| origin | { x: number, y: number } | Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. Note: It will not typically be necessary to set an origin prop manually | |
| portalComponent | React.ReactElement | The portalComponent prop takes a component instance which will be used as a container for children that should render inside a top-level container so that they will always appear above other elements. ChartTooltip renders inside a portal so that tooltips always render above data. VictoryPortal is used to define elements that should render in the portal container. This prop defaults to Portal, and should only be overridden when changing rendered elements from SVG to another type of element e.g., react-native-svg elements. | |
| portalZIndex | number | The portalZIndex prop determines the z-index of the div enclosing the portal component. If a portalZIndex prop is not set, the z-index of the enclosing div will be set to 99. | |
| radius | number | When the radius prop is set, the voronoi areas associated with each data point will be no larger than the given radius. This prop should be given as a number. | |
| responsive | boolean | 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. @default true | |
| style | React.CSSProperties | The style prop specifies styles for your ChartContainer. Any valid inline style properties will be applied. Height and width should be specified via the height and width props, as they are used to calculate the alignment of components within the container. Styles from the child component will also be passed, if any exist. @example {border: 1px solid red} | |
| tabIndex | number | The tabIndex prop specifies the description of the chart/SVG to assist with accessibility. | |
| theme | object | getTheme(themeColor) | 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 overwritten by props specified on the component instance. |
| themeColor | string | Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. Note: Not compatible with theme prop @example themeColor={ChartThemeColor.blue} | |
| voronoiBlacklist | string[] | The voronoiBlacklist prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a name prop matching an element in the voronoiBlacklist array will be ignored by ChartVoronoiContainer. Ignored components will never be flagged as active, and will not contribute date to shared tooltips or labels. | |
| voronoiDimension | 'x' | 'y' | When the voronoiDimension prop is set, voronoi selection will only take the given dimension into account. For example, when dimension is set to “x”, all data points matching a particular x mouse position will be activated regardless of y value. When this prop is not given, voronoi selection is determined by both x any y values. | |
| voronoiPadding | number | When the voronoiPadding prop is given, the area of the chart that will trigger voronoi events is reduced by the given padding on every side. By default, no padding is applied, and the entire range of a given chart may trigger voronoi events. This prop should be given as a number. | |
| width | number | The width props specifies the width of the svg viewBox of the container This value should be given as a number of pixels. If no width prop is given, the width prop from the child component passed will be used. |
View source on GitHub
