visx icon indicating copy to clipboard operation
visx copied to clipboard

Margin has no effect on Brush

Open lloydrichards opened this issue 2 years ago • 1 comments

I've been having a try with the Brush component and noticed that the margin does not have any effect on the Brush area or calculations. Even looking at the Brush-Demo you can see that the const brushMargin = { top: 10, bottom: 15, left: 50, right: 20 }; is not moving anytihing inside the <rect /> for the brush but instead is being used only by the <g /> element for the <ChartArea />

This is a bit problematic and forces you to wrap the charts in a <g /> in order to correctly align them rather then being able to build the scale using margin.left and innerWidth like is sometimes common with D3 patterns.

To Recreate

  1. open the demo in CodeSandbox
  2. Go to line 189 margin={brushMargin}
  3. Delete the margin prop from the <Brush />
  4. See nothing change in the brush 🤷

lloydrichards avatar Jun 08 '23 11:06 lloydrichards

Just ran into this as well, can confirm I had to use groups to offset appropriately because of Brush

RyKilleen avatar Jul 05 '23 20:07 RyKilleen