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: /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.
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.
Share Improve this question edited Apr 23, 2020 at 15:01 Samuel Liew 79.1k111 gold badges168 silver badges300 bronze badges asked Apr 22, 2020 at 15:30 Yvette Jenny MenaseYvette Jenny Menase 511 gold badge1 silver badge3 bronze badges1 Answer
Reset to default 13Have 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 ponents. 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 :-)