Bar width for BarChart has wrong width until something triggers re-render

Hello,

I have following data and chart:

const platformProductData = {
    keys: ['CPU', 'Storage', 'Hosting', 'Email'],
    chartData: [
      {
        platform: 'Plesk',
        CPU: 2000,
        Storage: 1000,
        Hosting: 1500,
        Email: 1500
      },
      {
        platform: 'Odin',
        CPU: 1000,
        Storage: 800,
        Hosting: 1500,
        Email: 3000
      },
      {
        platform: 'Interworks',
        CPU: 1000,
        Storage: 3000,
        Hosting: 2500,
        Email: 1800
      }
    ]
  };

<ResponsiveBar
      theme={chartTheme}
      data={data.chartData}
      keys={data.keys}
      indexBy={indexBy}
      padding={0.2}
      margin={{ top: 10, right: 10, bottom: 70, left: 10 }}
      valueFormat=" >-$.2d"
      colors={{ scheme: 'blue_green' }}
      borderColor={{
        from: 'color',
        modifiers: [['darker', 1.6]]
      }}
      labelTextColor={{
        from: 'color',
        modifiers: [['darker', 1.6]]
      }}
      legends={[
        {
          dataFrom: 'keys',
          anchor: 'bottom',
          direction: 'row',
          justify: false,
          translateX: 0,
          translateY: 70,
          itemsSpacing: 2,
          itemWidth: 100,
          itemHeight: 20,
          itemDirection: 'left-to-right',
          itemOpacity: 0.85,
          symbolSize: 20,
          effects: [
            {
              on: 'hover',
              style: {
                itemOpacity: 1
              }
            }
          ]
        }
      ]}
    />

The issue I’m facing is that bar widths are not rendered correctly until some trigger is not fired which affects their state (like changing application theme mode from light to dark through UI or changing data through code). Any suggestions? I’m using a lot of different charts on that page (sunburst, chord…) and they do not show this behavior, however, both bar charts on the page are having this issue. Data are fake and local, they are not rendered from server if that helps. Images are attached

[jonasbjoralt]

Had the same problem, but fixed it by setting animate={false}

[rade-tomovic]

In the meantime, this is helping me getting fully rendered chart, just put it on the page where you are using your barchart (you will even get animated render 💯 :

const [count, setCount] = useState(0);

useEffect(() => {
    setTimeout(() => {
      setCount((prevCount) => prevCount + 1);
    }, 100);
  }, []);