victory-scatter
Advanced tools
victory-scatter@^30.0.0 exports VictoryScatter
View these docs at https://formidable.com/open-source/victory/docs/victory-scatter to see live examples.
VictoryScatter renders a dataset as a series of points. VictoryScatter can be composed with VictoryChart to create scatter plots.
<VictoryChart
theme={VictoryTheme.material}
domain={{ x: [0, 5], y: [0, 7] }}
>
<VictoryScatter
style={{ data: { fill: "#c43a31" } }}
size={7}
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
VictoryScatter uses the standard animate prop. Read about it herhttps://formidable.com/open-source/victorye
See the Animations Guide for more detail on animations and transitions
animate={{
duration: 2000,
onLoad: { duration: 1000 }
}}
type: string
The bubbleProperty prop indicates which property of the data object should be used to scale data points in a bubble chart. If a bubbleProperty is given, size and symbol props will be ignored. Bubble charts always render circular points.
default: bubbleProperty="z"
<VictoryScatter
style={{ data: { fill: "#c43a31" } }}
bubbleProperty="amount"
maxBubbleSize={25}
minBubbleSize={5}
data={[
{ x: 1, y: 2, amount: 30 },
{ x: 2, y: 3, amount: 40 },
{ x: 3, y: 5, amount: 25 },
{ x: 4, y: 4, amount: 10 },
{ x: 5, y: 7, amount: 45 }
]}
/>
type: array[string] || { x: array[string], y: array[string] }
VictoryScatter uses the standard categories prop. Read about it in detail here
categories={{ x: ["dogs", "cats", "mice"] }}
type: element
VictoryScatter uses the standard containerComponent prop. Read about it in detail here
containerComponent={<VictoryVoronoiContainer/>}
type: array[object]
VictoryScatter uses the standard data prop. Read about it in detail here
See the Data Accessors Guide for more detail on formatting and processing data.
In addition to svg style properties and label, VictoryScatter will also preferentially use symbol and size properties supplied via data objects.
<VictoryScatter
data={[
{ x: 1, y: 2, symbol: "star", size: 5 },
{ x: 2, y: 3, symbol: "square", size: 7 },
{ x: 3, y: 5, symbol: "diamond", size: 3 },
{ x: 4, y: 4, symbol: "circle", size: 8 },
{ x: 5, y: 6, symbol: "triangleUp", size: 4 }
]}
/>
type: element
VictoryScatter uses the standard dataComponent prop. Read about it in detail here
VictoryScatter supplies the following props to its dataComponent: data, datum, index, origin, polar,scale, size, style, symbol, x, y
See the Custom Components Guide for more detail on creating your own dataComponents
default: <Point/>
class CatPoint extends React.Component {
render() {
const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum
const cat = datum._y >= 0 ? "😻" : "😹";
return (
<text x={x} y={y} fontSize={30}>
{cat}
</text>
);
}
}
class App extends React.Component {
render() {
return (
<VictoryChart>
<VictoryScatter
dataComponent={<CatPoint/>}
y={(d) => Math.sin(2 * Math.PI * d.x)}
samples={15}
/>
</VictoryChart>
);
}
}
ReactDOM.render(<App/>, mountNode);
type: array[low, high] || { x: [low, high], y: [low, high] }
VictoryScatter 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] }
VictoryScatter uses the standard domainPadding prop. Read about it in detail here
domainPadding={{x: [10, -10], y: 5}}
type: string || integer || array[string] || function
VictoryScatter 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]
VictoryScatter 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>
<VictoryScatter
style={{ data: { fill: "#c43a31" } }}
size={9}
labels={() => null}
events={[{
target: "data",
eventHandlers: {
onClick: () => {
return [
{
target: "data",
mutation: (props) => {
const fill = props.style && props.style.fill;
return fill === "black" ? null : { style: { fill: "black" } };
}
}, {
target: "labels",
mutation: (props) => {
return props.text === "clicked" ?
null : { text: "clicked" };
}
}
];
}
}
}]}
data={sampleData}
/>
</div>
type: array[object]
VictoryScatter uses the standard externalEventMutations prop. Read about it in detail
type: element
VictoryScatter uses the standard groupComponent prop. Read about it in detail here
default: <g/>
<VictoryChart>
<VictoryScatter
groupComponent={<VictoryClipContainer/>}
data={sampleData}
size={20}
/>
</VictoryChart>
type: number
VictoryScatter uses the standard height prop. Read about it in detail here
default (provided by default theme): height={300}
height={400}
type: element
VictoryScatter uses the standard labelComponent prop. Read about it in detail here
default: <VictoryLabel/>
<VictoryScatter
data={sampleData}
size={20}
style={{ labels: { fill: "white", fontSize: 18} }}
labels={(datum) => datum.y}
labelComponent={<VictoryLabel dy={18}/>}
/>
type: array || function
VictoryScatter uses the standard labels prop to define labels for each point. Read about it in more detail here
<VictoryScatter
data={sampleData}
labels={(datum) => `y: ${datum.y}`}
/>
type: number
The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the width, height, and padding of the component.
For more information on bubble charts, see bubbleProperty
maxBubbleSize={25}
type: number || { x: number, y: number }
VictoryScatter uses the standard maxDomain prop. Read about it in detail
<VictoryChart maxDomain={8}>
<VictoryScatter data={sampleData}/>
</VictoryChart>
type: number
The minBubbleSize prop sets a lower limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the calculated maxBubbleSize.
For more information on bubble charts, see bubbleProperty
minBubbleSize={5}
type: number || { x: number, y: number }
VictoryScatter uses the standard minDomain prop. Read about it in detail
<VictoryChart minDomain={0}>
<VictoryScatter data={sampleData}/>
</VictoryChart>
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 }
VictoryScatter 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
VictoryScatter uses the standard polar prop. Read about it in detail here
<VictoryChart polar
domain={{ y: [0, 7] }}
theme={VictoryTheme.material}
>
<VictoryPolarAxis dependentAxis
style={{ axis: { stroke: "none" } }}
tickFormat={() => null}
/>
<VictoryPolarAxis/>
<VictoryScatter
data={sampleData}
style={{
data: { fill: "#c43a31" }
}}
size={5}
/>
</VictoryChart>
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: integer
VictoryScatter 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 }
VictoryScatter 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 }
VictoryScatter uses the standard singleQuadrantDomainPadding prop. Read about it here
type: number || function
The size prop determines how to scale each data point. This prop may also be given as a function of data. If size is not specified, it will default to 1. size may also be set directly on each data object.
<VictoryScatter
size={(datum) => datum.y + 2 }
data={sampleData}
/>
type: string || integer || array[string] || function
VictoryScatter 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
VictoryScatter uses the standard standalone prop. Read about it in detail here
note: When VictoryScatter 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"/>
<VictoryScatter
standalone={false}
width={300} height={300} padding={10}
data={sampleData}
size={7}
/>
</svg>
type: { parent: object, data: object, labels: object }
VictoryScatter uses the standard style prop. Read about it in detail here
default (provided by default theme): See grayscale theme for more detail
<VictoryScatter
style={{
data: {
fill: (d) => d.x === 3 ? "#000000" : "#c43a31",
stroke: (d) => d.x === 3 ? "#000000" : "#c43a31",
fillOpacity: 0.7,
strokeWidth: 3
},
labels: {
fontSize: 15,
fill: (d) => d.x === 3 ? "#000000" : "#c43a31"
}
}}
size={9}
data={sampleData}
labels={(datum) => datum.x}
/>
type: function || options
The symbol prop determines which symbol should be drawn to represent data points. Options are: "circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp". This prop may also be given as a function of data. If no symbol prop is specified, a circle will be rendered. symbol may also be set directly on each data object.
default: symbol="circle"
<VictoryScatter
symbol={(datum) => datum.y > 3 ? "triangleUp" : "triangleDown"}
size={7}
data={sampleData}
/>
type: object
VictoryScatter 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
VictoryScatter 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
VictoryScatter 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
VictoryScatter 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 VictoryScatter, as baselines for VictoryScatter are only relevant for stacked charts. Read more about the y0 prop here
30.0.0 (2018-07-17)
Victory is becoming a monorepo!
This will not be a breaking change for the majority of users, especially those importing all components from the main victory npm package
Breaking Changes
Axis / Grid primitive component has been renamed LineSegmentvictory-chart and victory-core packages export different sets of packages than they used to. See the complete list belowNew Package Organization
victory exports everything exported from the packages belowvictory-axis@30.0.0 exports VictoryAxisvictory-area@30.0.0 exports VictoryArea and Areavictory-bar@30.0.0 exports VictoryBar and Barvictory-box-plot@30.0.0 exports VictoryBoxPlotvictory-brush-container@30.0.0 exports VictoryBrushContainer, BrushHelpers and brushContainerMixinvictory-brush-line@30.0.0 exports VictoryBrushLinevictory-candlestick@30.0.0 exports VictoryCandlestick and Candlevictory-chart@30.0.0 exports VictoryChartvictory-core@30.0.0 still exports several packages that are used by several Victory components:
VictoryAnimationVictoryClipContainerVictoryContainerVictoryLabelVictoryPortal and PortalVictoryThemeVictoryTransitionArc, Border / Box, Circle, ClipPath, LineSegment (formerly Axis / Grid), Line, Path, Point, Rect, Text, TSpan, WhiskeraddEvents, Axis, Collection, CommonProps, Data, DefaultTransitions, Domain, Events, Helpers, Immutable, LabelHelpers, Log, PropTypes, Scale, Selection, Style, TextSize, Timer, Transitions, Wrappervictory-create-container@30.0.0 exports createContainer, combineContainerMixins and makeCreateContainerFunctionvictory-cursor-container@30.0.0 exports VictoryCursorContainer, CursorHelpers and cursorContainerMixinvictory-errorbar@30.0.0 exports VictoryErrorBar and ErrorBarvictory-group@30.0.0 exports VictoryGroupvictory-legend@30.0.0 exports VictoryLegendvictory-line@30.0.0 exports VictoryLine and Curvevictory-pie@30.0.0 exports VictoryPie and Slicevictory-scatter@30.0.0 exports VictoryScattervictory-selection-container@30.0.0 exports VictorySelectionContainer, SelectionHelpers and selectionContainerMixinvictory-shared-events@30.0.0 exports VictorySharedEventsvictory-stack@30.0.0 exports VictoryStackvictory-tooltip@30.0.0 exports VictoryTooltip and Flyoutvictory-voronoi@30.0.0 exports VictoryVoronoi and Voronoivictory-voronoi-container@30.0.0 exports VictoryVoronoiContainer, VoronoiHelpers and voronoiContainerMixinvictory-zoom-container@30.0.0 exports VictoryZoomContainer, RawZoomHelpers, ZoomHelpers and zoomContainerMixinFAQs
Scatter Component for Victory
The npm package victory-scatter receives a total of 191,250 weekly downloads. As such, victory-scatter popularity was classified as popular.
We found that victory-scatter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 20 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
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.