Rechart Bar Chart: show nothing except the bar? (fullwidth and fullheight?)


im trying to create a simple bar stacked graph using Recharts but im having some trouble trying to reach the desired look and feel.

Basically I just need to show the bar (composed by different bars) and nothing else (no legend, axis, whatever, no margin nor paddings: the bars have to fillup the whole chart wrapper).

My code so far:

  const chartData = [
    {
      foo: 8,
      bar: 1,
      baz: 12,
      ext: 1,
      test: 55,
    },
  ];
...

<ResponsiveContainer height="100%" width="100%">
  <BarChart layout="vertical" data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
    <XAxis type="number" hide />
    <YAxis type="category" hide />
    <Bar dataKey="foo" stackId="a" fill="#f4f1de" barSize={40} />
    <Bar dataKey="bar" stackId="a" fill="#e07a5f" barSize={40} />
    <Bar dataKey="baz" stackId="a" fill="#3d405b" barSize={40} />
    <Bar dataKey="ext" stackId="a" fill="#81b29a" barSize={40} />
    <Bar dataKey="test" stackId="a" fill="#f2cc8f" barSize={40} />
  </BarChart>
</ResponsiveContainer>

And the result i get: bar chart

I need to remove the white (gray) space on the right and on the bottom.
Also, to be sure the size of the bars is respected (40px), I had to set the ResponsiveContainer’s parent like to 150px, or the bars become really small (like 15 px hight)

Any idea?

(ps: i know for this chart could be easily done with plain css, but i need to use recharts)

Source: CSS – Stack Overflow

November 26, 2021
Category : News
Tags: charts | css | html | reactjs | recharts

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.