Using Bump chart in Nivo chart library in Nextjs and encountering a problem #123891
Replies: 2 comments
-
To fix the error, you can explicitly specify the type of the 'use client'
import { ResponsiveBump } from '@nivo/bump';
import React from 'react';
interface BumpData {
id: string;
data: { x: string; y: number }[]; // Define the structure of each data point
}
const MyResponsiveBump: React.FC<{ data: BumpData[] }> = ({ data }) => (
<ResponsiveBump
data={data}
colors={{ scheme: 'spectral' }}
lineWidth={3}
activeLineWidth={6}
inactiveLineWidth={3}
inactiveOpacity={0.15}
pointSize={10}
activePointSize={16}
inactivePointSize={0}
pointColor={{ theme: 'background' }}
pointBorderWidth={3}
activePointBorderWidth={3}
pointBorderColor={{ from: 'serie.color' }}
axisTop={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '',
legendPosition: 'middle',
legendOffset: -36,
truncateTickAt: 0
}}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '',
legendPosition: 'middle',
legendOffset: 32,
truncateTickAt: 0
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'ranking',
legendPosition: 'middle',
legendOffset: -40,
truncateTickAt: 0
}}
margin={{ top: 40, right: 100, bottom: 40, left: 60 }}
axisRight={null}
/>
);
export default function General() {
const data: BumpData[] = [
{
id: "Serie 1",
data: [
{ x: "2000", y: 2 },
{ x: "2001", y: 10 },
{ x: "2002", y: 7 },
{ x: "2003", y: 12 },
{ x: "2004", y: 6 }
]
},
{
id: "Serie 2",
data: [
{ x: "2000", y: 11 },
{ x: "2001", y: 6 },
{ x: "2002", y: 1 },
{ x: "2003", y: 4 },
{ x: "2004", y: 12 }
]
},
// Add other series here...
];
return (
<div style={{ height: '500px' }}>
<MyResponsiveBump data={data} />
</div>
);
} By defining the |
Beta Was this translation helpful? Give feedback.
-
Step 1: Ensure Dependencies are Installed npm install @nivo/bump @nivo/core d3-scale Step 3: Check the Component Usage |
Beta Was this translation helpful? Give feedback.
-
Body
there's an error in Responsive bump and i cant see whats the problem
here is the error
here is the code
Guidelines
Beta Was this translation helpful? Give feedback.
All reactions