victory-brush-line
Advanced tools
victory-brush-line@^30.0.0 exports VictoryBrushLine
View these docs at https://formidable.com/open-source/victory/docs/victory-brush-line to see live examples.
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.
<VictoryChart domainPadding={50}>
<VictoryScatter
size={4}
style={{ data: { fill: "tomato" }}}
data={[
{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 4 }
]}
/>
<VictoryAxis
tickValues={[1, 2, 3]}
gridComponent={<VictoryBrushLine width={30}/>}
/>
</VictoryChart>
type: boolean
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.
default: allowDrag={true}
type: boolean
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.
default: allowResize={true}
type: element
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.
default: brushAreaComponent={<Box/>}
type: object
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: (d, a) => a ? 0.2 : 0.1
}
Note: cursor styles should not be applied via this prop, as they are dynamically assigned
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.
type: element
The brushComponent prop specifies the component to be rendered for 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.
default: brushComponent={<Box/>}
type: array[low, high]
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]}
type: object
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: (d, a) => a ? 0.4 : 0.3
}
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.
type: string
This prop specifies the class name that will be applied to the rendered element
type: "x" || "y"
The dimension prop specified whether the brush will be vertical ("y"), or horizontal ("x")
type: boolean
When the disable prop is set to true, VictoryBrushLine events will not fire.
type: object
The events prop specifies a set of events that will be attached to the brush component group. This prop should not be set manually.
type: element
This prop specifies the element used to group rendered elements
default: <g/>
type: element
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.
default: handleComponent={<Box/>}
type: object
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"
}
type: number
The handleWidth prop is used to specify the width of each handle component.
default: handleWidth={10}
type: element
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.
default: lineComponent={<Axis/>}
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 domainprops: the current set of props for VictoryBrushLinetype: object
This prop specifies scale of the parent chart with domain and range applied. This prop should not be set manually.
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: 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.
type: number
The width prop specified the width of both the brush and brushArea. When brushWidth or brushAreaWidth are specified, this prop will not be used
default: width={10}
30.2.0 (2018-08-06)
VictoryVoronoiContainer when calculating voronoi layoutsstatic role when calculating data and domain from child components.VictoryZoonContainer from downsampling stacked databarWidth and candleWidth props to VictoryBar and VictoryCandlestick. Adds candleRatio prop to VictoryCandlestickonBrushCleared callback prop for VictoryBrushContainerVictorySharedEvents or direct triggers and voronoi triggers)
#1081 Legends now render title and border when data is an empty array (previously nothing was rendered)FAQs
Interactive Brush Line Component for Victory
The npm package victory-brush-line receives a total of 151,253 weekly downloads. As such, victory-brush-line popularity was classified as popular.
We found that victory-brush-line demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."