victory-voronoi
Advanced tools
victory-voronoi@^30.0.0 exports VictoryVoronoi and Voronoi components
View these docs at https://formidable.com/open-source/victory/docs/victory-voronoi to see live examples.
VictoryVoronoi renders a dataset as a series polygons optimized for the nearest data point. VictoryVoronoi can be composed with VictoryChart to create voronoi overlays for charts, which are useful for attaching events to pieces of data that are otherwise difficult to interact with, usually due to their size.
<VictoryChart
theme={VictoryTheme.material}
domain={{ x: [0, 5], y: [0, 7] }}
>
<VictoryVoronoi
style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
data={[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 }
]}
/>
</VictoryChart>
type: boolean || object
VictoryVoronoi uses the standard animate prop. Read about it here
See the Animations Guide for more detail on animations and transitions
animate={{
duration: 2000,
onLoad: { duration: 1000 }
}}
type: array[string] || { x: array[string], y: array[string] }
VictoryVoronoi uses the standard categories prop. Read about it in detail here
categories={{ x: ["dogs", "cats", "mice"] }}
type: element
VictoryVoronoi uses the standard containerComponent prop. Read about it in detail here
containerComponent={<VictoryVoronoiContainer dimension="x"/>}
type: array[object]
VictoryVoronoi uses the standard data prop. Read about it in detail here
See the Data Accessors Guide for more detail on formatting and processing data.
<VictoryVoronoi
style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
data={[
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 6 }
]}
/>
type: element
VictoryVoronoi uses the standard dataComponent prop. Read about it in detail here
VictoryVoronoi supplies the following props to its dataComponent: data, datum, index, origin, polar, polygon, scale, size, style, x, y
See the Custom Components Guide for more detail on creating your own dataComponents
default: <Voronoi/>
dataComponent={<Voronoi events={{ onClick: handleClick }}/>}
type: array[low, high] || { x: [low, high], y: [low, high] }
VictoryVoronoi uses the standard domain prop. Read about it in detail here
domain={{x: [0, 100], y: [0, 1]}}
type: number || array[left, right] || { x: [left, right], y: [bottom, top] }
VictoryVoronoi uses the standard domainPadding prop. Read about it in detail here
domainPadding={{x: [10, -10], y: 5}}
type: string || integer || array[string] || function
VictoryVoronoi uses the standard eventKey prop to specify how event targets are addressed. This prop is not commonly used. Read about the eventKey prop in more detail here
eventKey="x"
type: array[object]
VictoryVoronoi uses the standard events prop. Read about it in more detail here
See the Events Guide for more information on defining events.
<div>
<h3>Click Me</h3>
<VictoryVoronoi
style={{ data: { stroke: "#c43a31", strokeWidth: 2 } }}
events={[{
target: "data",
eventHandlers: {
onClick: () => {
return [{
target: "data",
mutation: (props) => {
const fill = props.style && props.style.fill;
return fill === "black" ? null : { style: { fill: "black" } };
}
}];
}
}
}]}
data={sampleData}
/>
</div>
type: array[object]
VictoryVoronoi uses the standard externalEventMutations prop. Read about it in detail
type: element
VictoryVoronoi uses the standard groupComponent prop. Read about it in detail here
default: <g/>
groupComponent={<g transform="translate(10, 10)" />}
type: number
VictoryVoronoi uses the standard height prop. Read about it in detail here
default (provided by default theme): height={300}
height={400}
type: element
VictoryVoronoi uses the standard labelComponent prop. Read about it in detail here
default: <VictoryLabel/>
<VictoryVoronoi
data={sampleData}
style={{
data: { stroke: "#c43a31", strokeWidth: 2 },
labels: { fontSize: 18}
}}
labels={(datum) => datum.y}
labelComponent={<VictoryLabel dx={-10}/>}
/>
type: array || function
VictoryVoronoi uses the standard labels prop to define labels for each point. Read about it in more detail here
<VictoryVoronoi
data={sampleData}
style={{
data: { stroke: "#c43a31", strokeWidth: 2 },
labels: { fontSize: 18}
}}
labels={(datum) => `y: ${datum.y}`}
/>
type: number || { x: number, y: number }
VictoryVoronoi uses the standard maxDomain prop. Read about it in detail
type: number || { x: number, y: number }
VictoryVoronoi uses the standard minDomain prop. Read about it in detail
type: string
The name prop is used to reference a component instance when defining shared events.
name="series-1"
type: { x: number, y: number }
The origin prop is only used by polar charts, and is usually controlled by VictoryChart. It will not typically be necessary to set an origin prop manually
Read about the origin prop in detail
type: number || { top: number, bottom: number, left: number, right: number }
VictoryVoronoi uses the standard padding prop. Read about it in detail here
default (provided by default theme): padding={50}
padding={{ top: 20, bottom: 60 }}
type: boolean
VictoryVoronoi uses the standard polar prop. Read about it in detail here
Note: Polar Charts are not yet supported for VictoryVoronoi
type: array[low, high] || { x: [low, high], y: [low, high] }
The range prop is usually controlled by VictoryChart. It will not typically be necessary to set a range prop manually
Read about the range prop in detail
type: number
VictoryVoronoi uses the standard samples prop to generate data when plotting functions. Read about it in more detail here
default: samples={50}
samples={100}
type: scale || { x: scale, y: scale }
VictoryVoronoi uses the standard scale prop. Read about it here
Options for scale include "linear", "time", "log", "sqrt" and the d3-scale functions that correspond to these options.
default: scale="linear"
scale={{x: "linear", y: "log"}}
The sharedEvents prop is used internally to coordinate events between components. It should not be set manually.
type: boolean || { x: boolean, y: boolean }
VictoryVoronoi uses the standard singleQuadrantDomainPadding prop. Read about it here
type: number
The size prop determines the maximum size of each voronoi area. When this prop is given, a circular area of the specified size will be rendered, and clipped where it would overlap with other voronoi areas. If this prop is not given, the entire voronoi area will be used.
<VictoryVoronoi
style={{
data: { stroke: "#c43a31", strokeWidth: 2 }
}}
data={sampleData}
size={50}
/>
type: string || integer || array[string] || function
VictoryVoronoi uses the standard sortKey prop to determine how data should be ordered. Read about it in more detail here
sortKey="x"
type: "ascending" || "descending"
The sortOrder prop specifies whether sorted data should be returned in ascending or descending order.
default: sortOrder="ascending"
type: boolean
VictoryVoronoi uses the standard standalone prop. Read about it in detail here
note: When VictoryVoronoi is nested within a component like VictoryChart, this prop will be set to false
default: standalone={true}
<svg width={300} height={300}>
<circle cx={150} cy={150} r={150} fill="#c43a31"/>
<VictoryVoronoi
standalone={false}
width={300} height={300} padding={10}
style={{ data: { stroke: "black", strokeWidth: 2 } }}
data={sampleData}
/>
</svg>
type: { parent: object, data: object, labels: object }
VictoryVoronoi uses the standard style prop. Read about it in detail here
default (provided by default theme): See grayscale theme for more detail
<VictoryVoronoi
style={{
data: {
stroke: "#c43a31", strokeWidth: 3
},
labels: {
fontSize: 15, fill: "#c43a31", padding: 15
}
}}
size={50}
data={sampleData}
labels={(datum) => datum.x}
/>
type: object
VictoryVoronoi uses the standard theme prop. Read about it in detail here
See the Themes Guide for information about creating custom themes.
default: theme={VictoryTheme.grayscale}
theme={VictoryTheme.material}
type: number
VictoryVoronoi uses the standard width prop. Read about it in detail here
default (provided by default theme): width={450}
width={400}
type: string || integer || array[string] || function
VictoryVoronoi uses the standard x data accessor prop. Read about it in detail here
See the Data Accessors Guide for more detail on formatting and processing data.
x="employee.name"
type: string || integer || array[string] || function
VictoryVoronoi uses the standard y data accessor prop. Read about it in detail here
See the Data Accessors Guide for more detail on formatting and processing data.
y={(d) => d.value + d.error}
type: string || integer || array[string] || function
It is not common to set a y0 prop with VictoryVoronoi, as baselines for VictoryVoronoi are only relevant for stacked charts. Read more about the y0 prop here
FAQs
Voronoi Component for Victory
The npm package victory-voronoi receives a total of 186,836 weekly downloads. As such, victory-voronoi popularity was classified as popular.
We found that victory-voronoi demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 17 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
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.