diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js index 36424bd13..2a7079556 100644 --- a/packages/line/src/Line.js +++ b/packages/line/src/Line.js @@ -116,6 +116,7 @@ const Line = props => { enableTouchCrosshair = false, role = 'img', + initialHiddenIds = [], } = props const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( @@ -148,6 +149,7 @@ const Line = props => { pointColor, pointBorderColor, enableSlices, + initialHiddenIds, }) const theme = useTheme() diff --git a/packages/line/src/hooks.js b/packages/line/src/hooks.js index 22280bebe..bdcf36c81 100644 --- a/packages/line/src/hooks.js +++ b/packages/line/src/hooks.js @@ -153,6 +153,7 @@ export const useLine = ({ pointColor = LineDefaultProps.pointColor, pointBorderColor = LineDefaultProps.pointBorderColor, enableSlices = LineDefaultProps.enableSlicesTooltip, + initialHiddenIds = LineDefaultProps.initialHiddenIds, }) => { const componentId = useId() const formatX = useValueFormatter(xFormat) @@ -161,7 +162,7 @@ export const useLine = ({ const theme = useTheme() const getPointColor = useInheritedColor(pointColor, theme) const getPointBorderColor = useInheritedColor(pointBorderColor, theme) - const [hiddenIds, setHiddenIds] = useState([]) + const [hiddenIds, setHiddenIds] = useState(initialHiddenIds ?? []) const { xScale, diff --git a/packages/line/src/props.js b/packages/line/src/props.js index e9215e813..8609fb47f 100644 --- a/packages/line/src/props.js +++ b/packages/line/src/props.js @@ -209,6 +209,7 @@ export const LineDefaultProps = { defs: [], fill: [], role: 'img', + initialHiddenIds: [], } export const LineCanvasDefaultProps = { diff --git a/storybook/stories/line/Line.stories.tsx b/storybook/stories/line/Line.stories.tsx index 41fbedefe..27d8cb355 100644 --- a/storybook/stories/line/Line.stories.tsx +++ b/storybook/stories/line/Line.stories.tsx @@ -36,6 +36,7 @@ const commonProperties = { animate: true, enableTouchCrosshair: true, enableSlices: 'x', + initialHiddenIds: ['cognac'], } const CustomSymbol = ({ size, color, borderWidth, borderColor }) => ( @@ -64,6 +65,16 @@ export const StackedLines: Story = { stacked: true, }} curve={args.curve} + legends={[ + { + anchor: 'bottom', + direction: 'row', + itemHeight: 20, + itemWidth: 80, + toggleSerie: true, + translateY: 50, + }, + ]} /> ), }