Search code examples
javascriptreactjsd3.jsgraphaxis-labels

Nivo Line Formatting time tick on the x axis

I want to format the x-axis of the line chart with time I am using @nivo/line react library for charts 

 axisBottom={{
   tickValues: 3,
   tickRotation: 90,
   format: (values) => `${getRequiredDateFormat(values, 'MMMM-DD')}`, // using momentjs to format   
   legendOffset: -80,
   legendPosition: 'start',
}}

Chart output

Just want to display each month to appear once based on data.

CodeSandbox Link Try Here

Solution

  • You can create a new array of all x-axis dates and then show the date once if it appears multiple times.

    Here is a working example -

    https://codesandbox.io/s/quirky-leftpad-dwmb9?file=/src/App.js&fbclid=IwAR1dZoKls-dVowdVRoN3pZd8INsHgc2egNdcNLkj3n0nDqMpJQIJdK6vyQ8