Nivo format y axis for any chart type

529 Views Asked by At

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:

enter image description here

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'
        />
0

There are 0 best solutions below