Threshold
Threshold for changes
The diffThreshold
parameter allows you to fine tune the threshold for visual change between snapshots before they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip visual noise generated by non-deterministic rendering such as anti-aliasing.
Setting the threshold
Chromatic’s default threshold is .063
which balances high visual accuracy with low false positives (for example, from artifacts like anti-aliasing). 0
is the most accurate. 1
is the least accurate.
Interactively demo different diffThreshold
values with this tool.
Configure the diffThreshold
with a Storybook parameter like so:
// MyComponent.stories.js|jsx
import { MyComponent } from './MyComponent';
export default {
component: MyComponent,
title: 'MyComponent',
};
const Template = (args) => <MyComponent {...args} />;
export const StoryName = Template.bind({});
StoryName.args = {
with: 'props',
};
StoryName.parameters = {
// Sets the diffThreshold for 0.2 for a specific story.
chromatic: { diffThreshold: 0.2 },
};