How can I format my values for the x-axis in nivo line?

Question

I am using @nivo/line react library for charts. Right now I have:

xScale={{
                        type: 'time',
                        format: '%m/%d/%Y %H:%M:%S %p',
                        precision: 'second',
                    }}
                    xFormat="time:%Y-%m-%d"
  axisBottom={{
                        orient: 'bottom',
                        tickSize: 0,
                        tickPadding: 10,
                        tickRotation: 0,
                        tickValues: 'every 5 hours',
                        format: '%m/%d/%Y %H:%M:%S %p',
                        legendOffset: 100,
                        translateX: 25,
                        legendPosition: 'start',
                    }}

I want to remove the seconds view altogether. The docs are here: https://nivo.rocks/guides/axes#ticks but I am looking for something a bit more specific, or with examples. I know I can remove the milliseconds from my data but i was wondering if i could do the format without doing that. Does anyone have more info particularly for formatting? thanks

---

I was able to format it like: format: '%m/%d/%Y %H:%M %p'. withOUT changing any of the other areas formatting. Changing more than one causes an error. Now I need to create a new line within that.

Habanera

Answer 1

Have you tried using a function for the format property? You can use it to transform the value any way you want.

I like the dates in my data to be Unix timestamps. That helps me stay flexible how to display them differently across components. The example below uses the Moment.js library to help with date formatting, but it works with anything really.

<ResponsiveLine
    axisBottom={{
        format: function(value){ 
            return moment.unix(value).format('MMMM Do YYYY, h:mm');
        }
    }}
    // other props
/>

It would help if you supplied a minimal working example (for instance a codepen or jsfiddle), because the solution depends on the structure of your data. And it will make finding the solution for your specific case easier and more fun :-)

Archaeological