Skip to main content

VictoryBrushLine

VictoryBrushLine renders a brush component centered around a line. It may be used in place of the default axisComponent or gridComponent within VictoryAxis. Use VictoryBrushLine instead of VictoryBrushContainer in charts that require multiple brushes.

Live View
Loading...
Live Editor

Component Props​

allowDrag​

type: booleandefault: true

The optional allowDrag prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the allowDrag prop is set to false.

allowResize​

type: booleandefault: true

The optional allowResize prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the allowResize prop is set to false, but the dimensions of the brush area will be fixed.

brushAreaComponent​

type: ReactElementdefault: <Box/>

The brushAreaComponent prop specifies the component to be rendered for the interactive brush region. This component will be supplied with the following props: x, y, width, height, and style. When this prop is not specified, a Box component will be rendered.

brushAreaStyle​

type: VictoryStyleObject

The brushAreaStyle prop adds custom styles to the brushAreaComponent. This prop should be given as an object of SVG style attributes. Styles supplied to brushAreaStyle are assigned to the following default styles:

{
  stroke: "none",
  fill: "black",
  opacity: ({ active }) => active ? 0.2 : 0.1
}
note

cursor styles should not be applied via this prop, as they are dynamically assigned

brushAreaWidth​

type: number

The brushAreaWidth prop is used to specify the width of the interactive brush region. If this prop is not supplied, the width prop will be used.

brushComponent​

type: ReactElementdefault: <Box/>

The brushComponent prop specifies the component to be rendered for the active brush. This component will be supplied with the following props: x, y, width, height, and style. When this prop is not specified, a Box component will be rendered.

brushDomain​

type: [low, high]default: <Box/>

The optional brushDomain prop describes the highlighted state. This prop should be given as an array of the minimum and maximum values of the highlighted region.

example: brushDomain={[50, 100]}

brushStyle​

type: VictoryStyleObject

The brushStyle prop adds custom styles to the brushComponent. This prop should be given as an object of SVG style attributes. Styles supplied to brushStyle are assigned to the following default styles:

{
  pointerEvents: "none",
  stroke: "none",
  fill: "black",
  opacity: ({ active }) => active ? 0.4 : 0.3
}

brushWidth​

type: number

The brushWidth prop is used to specify the width of the active brush. If this prop is not supplied, the width prop will be used.

className​

type: string

This prop specifies the class name that will be applied to the rendered element

dimension​

type: "x" || "y"

The dimension prop specified whether the brush will be vertical ("y"), or horizontal ("x")

disable​

type: boolean

When the disable prop is set to true, VictoryBrushLine events will not fire.

events​

type: any

The events prop specifies a set of events that will be attached to the brush component group. This prop should not be set manually.

groupComponent​

type: ReactElementdefault: <g/>

This prop specifies the element used to group rendered elements

handleComponent​

type: ReactElementdefault: <Box/>

The handleComponent prop specifies the component to be rendered for each handle. This component will be supplied with the following props: x, y, width, height, and style. When this prop is not specified, a Box component will be rendered.

handleStyle​

type: VictoryStyleObject

The handleStyle props adds custom styles to the handleComponent. This prop should be given as an object of SVG style attributes. Styles supplied to handleStyle are assigned to the following default styles:

{
  pointerEvents: "none",
  stroke: "none",
  fill: "none"
}

handleWidth​

type: numberdefault: 10

The handleWidth prop is used to specify the width of each handle component.

lineComponent​

type: ReactElementdefault: <Axis/>

The lineComponent prop specifies the component to render for the underlying axis or grid line. This component will be supplied with the following props: x1, y1, x2, y2 and style. When this prop is not specified, an Axis component will be rendered.

onBrushDomainChange​

type: function

The onBrushDomainChange prop specifies a callback function which will be called whenever the brush domain changes. The callback provided will be called with the following arguments:

  • currentDomain: The current brush domain
  • props: the current set of props for VictoryBrushLine

scale​

type: object

This prop specifies scale of the parent chart with domain and range applied. This prop should not be set manually.

style​

type: object

The style prop specifies the styles that will be applied to the lineComponent. This prop should be given as an object of SVG style attributes.

type​

type: string

The type is used to specify which event target a particular VictoryBrushLine belongs to. When VictoryBrushLine is used by VictoryAxis as its axisComponent or gridComponent, this prop will be set automatically to "axis" or "grid" as appropriate.

width​

type: numberdefault: 10

The width prop specified the width of both the brush and brushArea. When brushWidth or brushAreaWidth are specified, this prop will not be used