victory-line
Advanced tools
victory-line - npm Package Versions
Changelog
35.9.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
Changelog
35.8.0 (2021-05-19)
- #1858 -
domainPaddingupdates
updates how domainPadding is applied to charts when 1) the additional padding would not result new quadradants being added, or 2) the user has set singleQuadrantDomainPadding={false}. In these cases, domainPadding is applied by calculating a new, smaller range that takes the desired, pixel-based padding into account, and then adding domain padding such that the previous domain fits entirely within the new, smaller range. In most cases, this change will make it much easier to do things like create bar charts where the first bar starts cleanly at the edge of the chart, by setting domainPadding={{ x: myBarWidth / 2 }}
This may cause visual changes for charts that use very large values for domainPadding. The domainPadding prop may need to be adjusted
calculates a more exact defaultDomainPadding for grouped bar charts based on the offset, number of bars, and the width of each bar (either from the barWidth prop or from a default barWidth based on the number of bars and the range). Previously, defaultDomainPadding was approximated based only on offset and number of bars.