I am trying to make a very simple bar chart using Nivo's Responsive Bar (official docs here) in my React application (React v18).
I have managed to set up a basic bar chart but it is acting funny.
When I load the page, it is empty. See screenshot
If I navigate to another page of my app and then navigate back to the page where the bar chart is, it suddenly shows the bars but they're very thin and definitely not aligned well (they are not vertically aligned with the labels on the x-axis). Pic:
Finally, if I am on the page where there is the bar chart (regardless of whether it is displayed as empty or with the thin bars) and I go into my code and make any change (literally even add a space somewhere) either to the bar chart component or to the one that imports it and renders it, the bar chart re-loads and is displayed correctly. see pic:
This is the bar chart code I wrote:
// install (please make sure versions match peerDependencies)
// yarn add @nivo/core @nivo/bar
import { ResponsiveBar } from '@nivo/bar'
const data = [
{
day: "Monday",
degress: 59
},
{
day: "Tuesday",
degress: 61
},
{
day: "Wednesday",
degress: 55
},
{
day: "Thursday",
degress: 78
},
{
day: "Friday",
degress: 71
},
{
day: "Saturday",
degress: 56
},
{
day: "Sunday",
degress: 67
}
];
// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
const FPPTBarChart = () => {
return (
<ResponsiveBar
data={data}
keys={["degress"]}
indexBy="day"
margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
padding={0.4}
valueScale={{ type: "linear" }}
colors="#3182CE"
animate={true}
enableLabel={false}
axisTop={null}
axisRight={null}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "degrees",
legendPosition: "middle",
legendOffset: -40
}}
/>
);
};
export default FPPTBarChart;
What is causing this weird behaviour? Is there a way of fixing it? I am inclined to think that it is an issue with the library rather than with my code (this is because I have tweaked my code in many ways and tried snippets from the official docs as well as various codesandbox snippets).
I am aware that Nivo is not yet fully compatible with React 18 so I had to install Nivo components using --legacy-peer-deps, (as recommended here). Could that be the root of the issue? I already have both Nivo's ResponsiveLine and Nivo's ResponsivePie in my app and they both seem to be working just fine. Plus, I did a lot of research on this and could not find anything aside from this stack overflow post, despite the fact that Nivo is a very widespread library. If this was an issue with the library itself/its compatibility with React 18 then surely I should that a lot of people are in my same boat? I am confused..
This is a very annoying issue and I am wondering whether I'd be better off just dropping Nivo as a library and transitioning to an alternative such as react-chart-js-2, but I wanted to make sure it's not something that can be fixed before I make this rather big transition.
What are your thoughts?
