in storybook/stories/axes/8_custom_domain.story.tsx [54:127]
max: number('X max', 3, xOptions, 'X axis'),
};
const showBars = boolean('show bars', true, 'Bar');
const niceDomainBar = boolean('nice domain', true, 'Bar');
const niceDomainLine = boolean('nice domain', true, 'Line');
return (
<Chart title={title} description={description}>
<Settings
showLegend={false}
theme={{ chartPaddings: { top: 0, left: 10, right: 10, bottom: 0 } }}
baseTheme={useBaseTheme()}
xDomain={customXDomain ? xDomain : undefined}
/>
<Axis
id="bottom"
position={Position.Bottom}
title="X axis"
style={{
tickLine: {
visible: true,
},
}}
/>
<Axis
id="left"
title="Bar"
position={Position.Right}
tickFormat={(d) => Number(d).toFixed(2)}
domain={customBarYDomain ? barDomain : undefined}
hide={boolean('Hide bar axis', false, 'Bar')}
ticks={barTicks}
style={{
axisLine: {
stroke: LIGHT_THEME.colors.vizColors[0],
strokeWidth: 1.5,
},
axisTitle: {
fill: LIGHT_THEME.colors.vizColors[0],
},
tickLabel: {
fill: LIGHT_THEME.colors.vizColors[0],
},
tickLine: {
stroke: LIGHT_THEME.colors.vizColors[0],
},
}}
/>
<Axis
id="right"
title="Line"
groupId="group2"
position={Position.Left}
tickFormat={(d) => Number(d).toFixed(2)}
domain={customLineYDomain ? lineDomain : undefined}
hide={boolean('Hide line axis', false, 'Line')}
ticks={lineTicks}
style={{
axisLine: {
stroke: LIGHT_THEME.colors.vizColors[1],
strokeWidth: 1.5,
},
axisTitle: {
fill: LIGHT_THEME.colors.vizColors[1],
},
tickLabel: {
fill: LIGHT_THEME.colors.vizColors[1],
},
tickLine: {
stroke: LIGHT_THEME.colors.vizColors[1],
},
}}
/>
{showBars && (