Hi I am trying to align the labels of my bar chart to the far right of the bar but haven’t been able to do so yet. The docs for Nivo Bar suggests I use a labelPosition="end"
property but on my code apparently, it does not exist.
Here is my current output
As you can see the labels are centred inside the bars, whereas the design its at the outside end of the bars.
Here is the design I need to follow
Below is my current code
import { ResponsiveBar, type ComputedDatum } from '@nivo/bar'
import { useTheme } from '@nivo/core'
import { Card } from 'antd'
<Card
title={`${direction} ${data?.length ?? 20} ${metric} by total units`}
style={{ boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.2)' }}
bodyStyle={{
height: '800px',
padding: '32px',
}}
loading={isLoading}
>
<ResponsiveBar
data={data ?? []}
margin={{ top: 0, right: 15, bottom: 30, left: leftMargin }}
padding={0.4}
colors="#0E8156"
layout="horizontal"
isInteractive={true}
axisTop={null}
axisBottom={{
tickSize: 4,
tickPadding: 4,
legend: 'units',
legendPosition: 'middle',
legendOffset: 40,
}}
axisLeft={{
renderTick: ({ tickIndex, x, y }) => (
<LeftTick
x={x}
y={y}
text={data?.[tickIndex]?.name ?? ''}
id={data?.[tickIndex]?.id ?? 0}
/>
),
}}
labelPosition="end" // PROP I AM TRYING TO USE BUT ERROR
labelSkipWidth={12}
labelSkipHeight={12}
labelTextColor={{ from: 'color', modifiers: [['brighter', 10.0]] }}
animate={true}
onClick={handleSetQuery}
/>
</Card>
//ERROR Property 'labelPosition' does not exist on type 'IntrinsicAttributes & ResponsiveBarSvgProps<{ value: number; id: number; name: string; }>'.ts(2322)
Here is my package.json
"@nivo/bar": "^0.87.0",
"@nivo/calendar": "^0.87.0",
"@nivo/core": "^0.87.0",
Has anyone come across this error? Nivo docs seems to be giving incorrect prop information if they say to use labelPosition which doesn’t exist, or maybe I am using the wrong version. Is there any fix for this? Thanks