javascript - How can I style the label in the Recharts Brush component?

Question

As can be seen in this example when you put your mouse over the Brush, a label appears with the data, this date changes appropriately as you move the slider on the brush. But in its default position, the label is off screen at both the left and right.

From reading the doc's there doesn't appear to be field available for styling the tooltip label like there is with other Recharts components nor does there look to be any options available for applying padding to Brush to allow it to be smaller than the area available, giving space for the label to show.

Does anyone have any tips? Below the code from the CodeSandbox linked can be seen.

import "./styles.css";
import {
  ResponsiveContainer,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Brush
} from "recharts";

export default function App() {
  const data = [
    { interval: "2021-01-01", resultCount: 2 },
    { interval: "2021-01-03", resultCount: 7 },
    { interval: "2021-01-05", resultCount: 1 },
    { interval: "2021-01-08", resultCount: 10 },
    { interval: "2021-01-10", resultCount: 2 },
    { interval: "2021-01-11", resultCount: 9 },
    { interval: "2021-01-15", resultCount: 5 },
    { interval: "2021-01-18", resultCount: 8 },
    { interval: "2021-01-21", resultCount: 0 },
    { interval: "2021-01-22", resultCount: 7 }
  ];
  return (
    <div className="App">
      <ResponsiveContainer width={500} height={300}>
        <LineChart data={data}>
          <YAxis
            dataKey="resultCount"
            label={{
              value: "No. of Posts",
              angle: -90,
              position: "insideLeft"
            }}
          />
          <XAxis
            dataKey="interval"
            label={{ value: "Time (day)", position: "bottom" }}
          />
          <CartesianGrid vertical={false} />
          <Line
            strokeWidth={2}
            dataKey="resultCount"
            stroke="#127ABF"
            dot={{ stroke: "#127ABF", strokeWidth: 3, fill: "#127ABF" }}
            isAnimationActive={false}
          />
          <Brush dataKey="interval" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

question from:https://stackoverflow.com/questions/65847197/how-can-i-style-the-label-in-the-recharts-brush-component

Answer 1

Waitting for answers