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

[rade-tomovic]

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

[plouc]

@rade-tomovic, could you replicate this in codesandbox?

[ayofef]

Hi @plouc , I'm having the same issue, I replicated it in codesandbox here https://codesandbox.io/s/nivo-bar-chart-kcc9g6?file=/src/App.js

[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);
  }, []);

[jonasbjoralt]

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

[AndrewADev]

Is it possible that this is related to React 18? It looks like the sandbox posted above is using React 18. If I downgrade to React 17 (and make appropriate changes in index.js for React 17) then I no longer seem to experience the issue:

https://codesandbox.io/s/nivo-bar-chart-forked-zn9zl4

Note as well: if you add layout="vertical" to the original sandbox, you get a width for the bars, but the height is initially wrong (looks like it could be improper scaling?) Not sure if this is directly related/helpful or not:

https://codesandbox.io/s/nivo-bar-chart-forked-8dqukt

[AndrewADev]

Is it possible that this is related to React 18? It looks like the sandbox posted above is using React 18. If I downgrade to React 17 (and make appropriate changes in index.js for React 17) then I no longer seem to experience the issue:

https://codesandbox.io/s/nivo-bar-chart-forked-zn9zl4

Note as well: if you add layout="vertical" to the original sandbox, you get a width for the bars, but the height is initially wrong (looks like it could be improper scaling?) Not sure if this is directly related/helpful or not:

https://codesandbox.io/s/nivo-bar-chart-forked-8dqukt

I saw this similar issue right after posting: #2009

As suggested there, removing StrictMode from the initial sandbox posted here also seems to allow the bars to render full width, so perhaps this comment is on to something (related to StrictMode & doubled invocation in combination with animate).

https://codesandbox.io/s/nivo-bar-chart-forked-1ggup4

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!