Can't make BarChart expanding to full width

[AndreaBarghigiani]

I have a strange issue that I am trying to wrap my head around.

Basically, I am trying to create a staked BarChart and since I need it to be just a single line my data are organized like a single object:

const data = [
  {
    btc: 4000,
    eth: 2400,
    ada: 1600,
    matic: 500,
  },
];

The thing is that, even though I use ResponsiveContainer the chart is always a bit longer than the data that needs to display. Basically the svg generated is wider than the data needs to display.

Below there's my code and I leave also the CodeSandbox I was experimenting with.

const HodlBar = ({ hodls }: { hodls: PositionsProps }) => {
  const data = massageData(hodls);
  const tokens = hodls.map((hodl) => hodl.token.symbol).slice(0, 5);
  return (
    <div className="h-12 w-full">
      <ResponsiveContainer width="100%">
        <BarChart className="mx-auto" layout="vertical" data={data}>
          <XAxis type="number" hide={true} />
          <YAxis type="category" dataKey="name" hide={true} />
          <Tooltip shared={false} content={<CustomTooltip tokens={hodls} />} />
          {tokens.map((token, index) => (
            <Bar
              key={token}
              dataKey={token}
              fill={barColors[index]}
              stackId="holding"
              className="cursor-pointer"
            />
          ))}
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

Thanks to anyone will be able to help me out.

[ckifer]

Is this what you are looking for? https://codesandbox.io/p/sandbox/rechart-experiments-c5qrs2

Its because the default domain isn't the min and the max of your data so setting domain={['dataMin', 'dataMax']} will do it

[AndreaBarghigiani]

Hey @ckifer,
thank you so much to dedicate your time to this issue. Indeed that domain={['dataMin', 'dataMax']} on the XAxis component did the trick.

TBH there's still a minor margin on the right but to be honest in my case does not even matter if I have few unused pixels 😄