Nivo stream chart change axisBottom values

Question

I am trying to use nivo stream chart in react application

  const data = [
    {
      cxp_differnce: 600,
      cxp_utilized: 1000,
    },
    {
      cxp_differnce: 7000,
      cxp_utilized: 3000,
    }
  ];

Above is my data object i am passing to ResponsiveStream

     <ResponsiveStream
                    data={data}
                    keys={['cxp_utilized', 'cxp_differnce']}
                    margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
                    axisTop={null}
                    axisRight={null}
                    isInteractive={false}
                    curve="linear"
                    axisBottom={{
                      //some values
                    }}
                    axisLeft={{
                      //some values
                    }}
                    colors={['#CFF295', '#939393']}
                    legends={[]}
                  />

I am getting the x axis values as 0 and 1 .

i want to change it to custom labels

Answer 1

axisBottom can be modifies as

   axisBottom={{
     format: customFunction,    
   }}

And write a function outside to return custom values using index

  const customFunction= (index) => {
    //index will be as per data object passing
    //index starts with 0
  };

You can write your custom logic inside above function