victory-bar
Advanced tools
victory-bar@^30.0.0 exports VictoryBar and Bar components
View these docs at https://formidable.com/open-source/victory/docs/victory-bar to see live examples.
VictoryBar renders a dataset as series of bars. VictoryBar can be composed with VictoryChart to create bar charts.
<VictoryChart
theme={VictoryTheme.material}
domainPadding={10}
>
<VictoryBar
style={{ data: { fill: "#c43a31" } }}
data={sampleData}
/>
</VictoryChart>
type: "start" || "middle" || "end"
The alignment prop specifies how bars should be aligned relative to their data points. This prop may be given as "start", "middle" or "end". When this prop is not specified, bars will have "middle" alignment relative to their data points.
<VictoryChart
theme={VictoryTheme.material}
>
<VictoryBar
style={{ data: { fill: "#c43a31" } }}
alignment="start"
data={sampleData}
/>
</VictoryChart>
type: boolean || object
VictoryBar 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: number
The barRatio prop specifies an approximate ratio between bar widths and spaces between bars. When width is not specified in bar styles, the barRatio prop will be used to calculate a default width for each bar given the total number of bars in the data series and the overall width of the chart.
<VictoryChart
theme={VictoryTheme.material}
domainPadding={{ x: 15 }}
>
<VictoryBar
barRatio={0.8}
style={{
data: { fill: "#c43a31" }
}}
data={sampleData}
/>
</VictoryChart>
type: array[string] || { x: array[string], y: array[string] }
VictoryBar uses the standard categories prop. Read about it here
categories={{ x: ["dogs", "cats", "mice"] }}
type: element
VictoryBar uses the standard containerComponent prop. Read about it here
containerComponent={<VictoryVoronoiContainer/>}
type: function || number || { top: number || function, bottom: number || function }
The cornerRadius prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the top of each bar. When this prop is given as a function, it will be evaluated with the arguments datum, and active.
<VictoryChart
theme={VictoryTheme.material}
domainPadding={{ x: 15 }}
>
<VictoryBar
cornerRadius={10}
style={{
data: {
fill: "#c43a31",
width: 25
}
}}
data={sampleData}
/>
</VictoryChart>
type: array[object]
VictoryBar uses the standard data prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
In addition to svg style properties and label, VictoryBar will also preferentially use width properties supplied via data objects
<VictoryBar
data={[
{ x: 1, y: 2, y0: 1 },
{ x: 2, y: 3, y0: 2 },
{ x: 3, y: 5, y0: 2 },
{ x: 4, y: 4, y0: 3 },
{ x: 5, y: 6, y0: 3 }
]}
/>
type: element
VictoryBar uses the standard dataComponent prop. Read about it here
VictoryBar supplies the following props to its dataComponent: data, datum, horizontal, index, padding, polar, origin, scale, style, width, height, x, y, y0, x0
See the Custom Components Guide for more detail on creating your own dataComponents
default: <Bar/>
dataComponent={<Bar events={{ onClick: handleClick }}/>}
type: array[low, high] || { x: [low, high], y: [low, high] }
VictoryBar uses the standard domain prop. Read about it here
domain={{x: [0, 100], y: [0, 1]}}
type: number || array[left, right] || { x: [left, right], y: [bottom, top] }
VictoryBar uses the standard domainPadding prop. Read about it here
domainPadding={{x: [10, -10], y: 5}}
type: string || integer || array[string] || function
VictoryBar 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]
VictoryBar uses the standard events prop. Read about it here
See the Events Guide for more information on defining events.
<div>
<h3>Click Me</h3>
<VictoryBar
style={{
data: { fill: "#c43a31" }
}}
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]
VictoryBar uses the standard externalEventMutations prop. Read about it in detail
type: element
VictoryBar uses the standard groupComponent prop. Read about it here
default: <g/>
groupComponent={<g transform="translate(10, 10)" />}
type: number
VictoryBar uses the standard height prop. Read about it here
default (provided by default theme): height={300}
height={400}
type: 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.
default: horizontal={false}
<VictoryChart
theme={VictoryTheme.material}
domainPadding={{ y: 10 }}
>
<VictoryBar horizontal
style={{
data: { fill: "#c43a31" }
}}
data={sampleData}
/>
</VictoryChart>
type: element
VictoryBar uses the standard labelComponent prop. Read about it here
default: <VictoryLabel/>
<VictoryBar
data={sampleData}
labels={(d) => d.y}
style={{ labels: { fill: "white" } }}
labelComponent={<VictoryLabel dy={30}/>}
/>
type: array || function
VictoryBar uses the standard labels prop. Read about it here
<VictoryBar
data={sampleData}
labels={(d) => `y: ${d.y}`}
/>
type: number || { x: number, y: number }
VictoryBar uses the standard maxDomain prop. Read about it in detail
<VictoryChart maxDomain={{ x: 3 }}>
<VictoryBar data={sampleData}/>
</VictoryChart>
type: number || { x: number, y: number }
VictoryBar uses the standard minDomain prop. Read about it in detail
<VictoryChart minDomain={{ x: 2 }}>
<VictoryBar 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 }
VictoryBar uses the standard padding prop. Read about it here
default (provided by default theme): padding={50}
padding={{ top: 20, bottom: 60 }}
type: boolean
VictoryBar uses the standard polar prop. Read about it here
<VictoryChart polar
theme={VictoryTheme.material}
>
<VictoryPolarAxis dependentAxis
style={{ axis: { stroke: "none" } }}
tickFormat={() => null}
/>
<VictoryPolarAxis/>
<VictoryBar
data={sampleData}
style={{
data: { fill: "#c43a31", stroke: "black", strokeWidth: 2 }
}}
/>
</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: number
VictoryBar uses the standard samples prop. Read about it here
default: samples={50}
samples={100}
type: scale || { x: scale, y: scale }
VictoryBar 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 }
VictoryBar uses the standard singleQuadrantDomainPadding prop. Read about it here
type: string || integer || array[string] || function
VictoryBar uses the standard sortKey prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
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
VictoryBar uses the standard standalone prop. Read about it here
note: When VictoryBar 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"/>
<VictoryBar
standalone={false}
width={300} height={300} padding={{left: 10, right: 10}}
data={sampleData}
/>
</svg>
type: { parent: object, data: object, labels: object }
VictoryBar uses the standard style prop. Read about it here
default (provided by default theme): See grayscale theme for more detail
<VictoryBar
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"
}
}}
data={sampleData}
labels={(d) => d.x}
/>
type: object
VictoryBar uses the standard theme prop. Read about it here
See the Themes Guide for information about creating custom themes.
default: theme={VictoryTheme.grayscale}
theme={VictoryTheme.material}
type: number
VictoryBar uses the standard width prop. Read about it here
default (provided by default theme): width={450}
width={400}
type: string || integer || array[string] || function
VictoryBar uses the standard x data accessor prop. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
x="employee.name"
type: string || integer || array[string] || function
VictoryBar uses the standard y data accessor prop. Read about it 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
VictoryBar uses the standard y0 data accessor prop to set a baseline. Read about it here
See the Data Accessors Guide for more detail on formatting and processing data.
<VictoryChart domainPadding={30}>
<VictoryBar
data={sampleData}
y0={(d) => d.y - 1}
/>
</VictoryChart>
FAQs
Bar Component for Victory
The npm package victory-bar receives a total of 220,375 weekly downloads. As such, victory-bar popularity was classified as popular.
We found that victory-bar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 19 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
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.