Can anyone help me on how to format the y-axis in Nivo with any type of chart, my scenario is that I want to show the data example: 0, 4000, 8000, 12000 etc. But now in Nivo it always shows 0, 2000, 4000, 6000 etc. I assume it shows multiply/modulo by 2. Here is the screenshot for my chart:
I tried to add tickValues in axisLeft property, but nothing changed.
Below is the code:
<ResponsiveBar
data={displayBarGraph}
keys={[
dataGraph?.keys[0],
dataGraph?.keys[1],
dataGraph?.keys[2],
]}
indexBy='id'
minValue={0}
// maxValue={dataGraph?.max_y_value}
groupMode='grouped'
margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
padding={0.3}
valueScale={{ type: 'linear' }}
indexScale={{ type: 'band', round: true }}
colors={({ id, data }) =>
id === 'traffic'
? data?.trafficColor
: id === 'footfall'
? data?.footfallColor
: id === 'conversion'
? data?.conversionColor
: 'hsl(195, 100%, 60%)'
}
borderColor={{
from: 'color',
modifiers: [['darker', 1.6]],
}}
enableLabel={false}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend:
dataGraph?.bottomLegends[0] === dataGraph?.bottomLegends[1]
? dataGraph?.bottomLegends[0]
: dataGraph?.bottomLegends[0] +
' - ' +
dataGraph?.bottomLegends[1],
legendPosition: 'middle',
legendOffset: 32,
format: (item) =>
(filter === 'last_week' ||
filter === 'this_week' ||
filter === 'last_month' ||
filter === 'this_month' ||
filter === 'custom') &&
graph_time_period === 'daily'
? moment(item).format('DD')
: item,
}}
// markers={filter === 'daily' && dataGraph?.markers}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: '',
legendPosition: 'middle',
legendOffset: -40,
format: (item) => convertInputPrice(`${item}`),
}}
labelSkipWidth={12}
labelSkipHeight={12}
labelTextColor={{
from: 'color',
modifiers: [['darker', 1.6]],
}}
role='application'
ariaLabel='Nivo bar chart demo'
/>
