reactjschartschart.jsantd

How to set height of individual bars in Ant Design Stacked Bar?

I am using Ant Design Charts to create a stacked bar but I want it to be responsive. When I am removing data items, the bars get too thick to fill the available space. So basically, I want the bars to have fixed height so that they don't get too thick when there are few data items. Please find below the relevant images:

enter image description here enter image description here

Here is the link to ant design chart:

https://charts.ant.design/en/examples/bar/stacked#basic

Solution

  • You can use pass maxBarWidth prop to bar config like this:

    config = {
    maxBarWidth: 30,
    ...

    Or directly to the Bar component like this:

    <Bar {...config} maxBarWidth={30} />