A collection of composable React components for building interactive data visualizations
victory-vendor
packageIn order to safely upgrade d3-packages while still allowing Node.js users to use ESM imports, we introduced a new package called victory-vendor
for babelifying our d3 packages to make them more compatible with Victory. For more info, check out the description here.
This should not make much of a difference for the end user, but there are a couple changes to be aware of. Upgrading d3-scale
introduced some minor scaling changes. If you (like us) are using Chromatic or another visual regression testing tool, it may pick up some very small differences in the placement of axes and data points. d3-scale
also introduced some changes to the scale.tickFormat
function that changes the default formatting for log scales.
Before | After |
---|---|
If you are using a log scale and don't wish to use d3's default label formatting, You can use the tickFormat
prop on a VictoryAxis
component to override this default formatting. https://formidable.com/open-source/victory/docs/victory-axis#tickformat
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.3.2...v36.4.0
aria-label
and data-testid
by @becca-bailey in https://github.com/FormidableLabs/victory/pull/2192
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.3.1...v36.3.2
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.3.0...v36.3.1
Full Changelog: https://github.com/FormidableLabs/victory/compare/v36.2.2...v36.3.0
(2021-06-24)
Adds a new disableInlineStyles
prop to components and primitives to support users who want to style their components by class, or use a CSS in JS solution like styled-components
When the new disableInlineStyles
prop is supplied to a component like VictoryBar
no styles will be supplied to either data or label components that it renders:
const StyledBar = styled(Bar)`
fill: purple;
`
const StyledLabel = styled(VictoryLabel)`
tspan {
fill: magenta;
font-family: Papyrus, fantasy;
}
`
function CustomStyledBarChart() {
return (
<VictoryChart>
<VictoryBar
disableInlineStyles
labels={[1, 2, 3, 4]}
dataComponent={<StyledBar />}
labelComponent={<StyledLabel />}
/>
</VictoryChart>
)
}
The disableInlineStyles
prop may also be supplied to primitive components for more granular control:
const StyledBar = styled(Bar)`
fill: purple;
`
function CustomStyledBarChart() {
return (
<VictoryChart>
<VictoryBar
labels={[1, 2, 3, 4]}
dataComponent={<StyledBar disableInlineStyles />}
/>
</VictoryChart>
)
}
Related PRs
(2021-06-11)
d3-array
dependency to correct for babel issue(2021-06-09)
allowDraw
type definition for VictoryBrushContainer
. Thanks @justindomingue!(2021-06-01)
VictoryVoronoiContainer
with voronoiDimension
.(2021-05-31)
offsetX
and offsetY
props for multi-quadrant charts(2021-05-26)
interpolation
type definition for VictoryArea
. Thanks @pmilic021!