I'm trying to use Recharts bar for horizontal bars replicating the one from Typeform where label and percentage are on top of the bar. Trying the position top any any of that doesn't work. Only for answer gets placed good but for the other one in any position it overlaps the answer.

 <ChartContainer config={chartConfig}>
            <BarChart data={chartData} layout="vertical" accessibilityLayer>
            <Bar dataKey="answer" radius={4} >
            <LabelList
                  dataKey="count"
                  position="right"
                  offset={8}
                  fontSize={12}
                  className="fill-[--color-label] w-full"
                  formatter={(value: number) => `${value.toFixed(1)}%`}
                  style={{
                    textAnchor: "start",
                  }}
                />
            </Bar>
            <Bar dataKey="answer" radius={4} >
                <LabelList
                  dataKey="answer"
                  position="insideLeft"
                  offset={8}
                  fontSize={12}
                  className="fill-[--color-label]"
                />
            </Bar>
              <YAxis dataKey="answer" type="category" hide />
              <XAxis dataKey="count" type="number" hide />
              <Bar dataKey="count" radius={4}  background={{ fill: '#e0e0e0' }}/>
              </BarChart>
          </ChartContainer>

Would appreciate if you could help me to navigate how using Recharts with shadcn I could create a bar chart looking like this screenshot how I want it to look like

I need make labels the answer left and percentage on the right. I need also to keep the size of the bars the same and just allow scrolling if they overflow.

would appreciate your help