Brush styling issue

[srequiem]

Hellooo !

I'm using Recharts Recharts 2.12.7 and i'm struggling with adding some margin to the Brush component as you can see ⬇️.

I've added some TickMargin to XAxisis which is causing a problem with the brush.

So i tried adding some margin-top, padding etc to the brush but it's not working, adding a position to the element etc etc

Digging in Google a lot but nothing about adding a specific style to Brush.

Is it possible ?

Thanks

[ckifer]

Hi!

Can you paste some code? Specifically what are your values for tickMargin and your Brush props?

Here is a codesandbox you can fork https://codesandbox.io/p/sandbox/bar-chart-with-brush-forked-5vghcf

Thanks

[srequiem]

Hello @ckifer and thanks for your message.

The problem is : Working with the design team, i need to put some margin for the tick so i used the tickMargin props
But once you do that, the brush i no longer at the right place.
So i used the Y props. but it's position absolute right ? So to make this work i need to add some margin-bottom to BarChart...

Is there a way to do it faster or cleaner by putting some component in relative position ? idk

Here is my code.

<ResponsiveContainer width="100%" height="100%">
        <BarChart
          height={300}
          data={data}
          margin={{
            top: 5,
            right: 0,
            left: -5,
            bottom: 35,
          }}
          barCategoryGap={10}
          barGap={5}
        >
          <Legend
            content={<CustomLegend />}
            verticalAlign="top"
            iconType="circle"
          />
          <CartesianGrid strokeDasharray="3 3" />

          <XAxis
            dataKey="name"
            tick={<CustomTick />}
            tickMargin="17"
            stroke="#000"
            strokeWidth={2}
            tickLine={false}
          />
          <YAxis
            type="number"
            tick={<CustomTick />}
            tickMargin="10"
            stroke="#000"
            strokeWidth={2}
            tickLine={false}
          />

          <Tooltip
            content={<CustomTooltip />}
            cursor={{ fill: 'rgba(217, 217, 217, 0.4)' }}
          />

          <Bar
            dataKey="uv"
            fill="#7BB3FF"
            stroke="#1F93FF"
            barSize={20}
            stackId="a"
            radius={[0, 0, 0, 0]}
          />
          <Bar
            dataKey="pv"
            fill="#E7F1FF"
            stroke="#1F93FF"
            barSize={20}
            stackId="a"
            radius={[0, 0, 0, 0]}
          />
          <Bar
            dataKey="amt"
            fill="#FFE9EF"
            stroke="#F60044"
            barSize={20}
            stackId="a"
            radius={[0, 0, 0, 0]}
          />
          <Bar
            dataKey="love"
            fill="#F60044"
            stroke="#F60044"
            barSize={20}
            stackId="a"
            radius={[4, 4, 0, 0]}
          />

          <Brush dataKey="name" height={30} y={560} stroke="#1F93FF" />
        </BarChart>
      </ResponsiveContainer>

Thanks a lot for your time

[ckifer]

Hey! correct, everything is absolute (it has to be in svg-land). We can work around this one way for now which is to render a custom traveler, save the Y value of that in a ref, and then use that Y value to adjust the Y of the brush itself.

https://codesandbox.io/p/sandbox/bar-chart-with-brush-forked-5vghcf

This is a workaround since there isn't any other way to do it at the moment, but it does the trick

[srequiem]

Hi @ckifer , thanks for your response. I'll try and use that 🚀