Y-Axis as time causes values to be reverted

[nhtoby311]

Issue

It seems like having time axis as Yaxis cause the display data to be reversed. I'm using a mock data like this to measure the elapse time data with its corresponding data.

<ResponsiveLine
                enableSlices="x"
                curve="monotoneX"
                lineWidth={3}
                enableGridX={false}
                enableGridY={false}
                enablePoints={false}
                enableCrosshair={false}
                colors={{ scheme: 'blues' }}
                data={[
                    {
                        id: 'fake corp. A',
                        data: [
                            { x: 'Week 1', y: '3:00' },
                            { x: 'Week 2', y: '2:00' },
                            { x: 'Week 3', y: '14:20' },
                            { x: 'Week 4', y: '12:00' },
                            { x: 'Week 5', y: '22:00' },
                            { x: 'Week 6', y: '32:00' },
                            { x: 'Week 7', y: '5:00' },
                        ],
                    },
                ]}
                yScale={{
                    type: 'time',
                    format: '%M:%S',
                    precision: 'second',
                }}
                axisLeft={{
                    format: '%M:%S',
                }}
            />

Is there a way to fix this? Or a work around such as revert the Yaxis values, or having y as number represent seconds, then have a method to format it to "MM:SS" in order to display.

[plouc]

Unfortunately, a time scale cannot be reversed, using numbers representing seconds might work, but converting the value back would be tedious.

[nhtoby311]

So is it a bug for type time on yAxis?

Can I use yFormat or other attribute to display as minute value? Or it can only be done inside the code of the package?

[plouc]

So is it a bug for type time on yAxis?

I would need to spend more time to properly investigate what's happening.

Can I use yFormat or other attribute to display as minute value? Or it can only be done inside the code of the package?

Yes, but you still need to specify it separately for the axes config.

[nhtoby311]

Yes, but you still need to specify it separately for the axes config.

Is there an example on how can I do this?

[plouc]

No, sorry.

[nhtoby311]

I tried this workaround and it works for me! The data value is seconds, and I pass through a function to convert it to minute:second format.

const formatTime = (time: number) => {
    return [
        Math.floor((time % 3600) / 60), // minutes
        ('00' + Math.floor(time % 60)).slice(-2), // seconds
    ].join(':')
}

<ResponsiveLine
    margin={{ top: 20, right: 40, bottom: 60, left: 60 }}
    animate={true}
    enableSlices="x"
    curve="monotoneX"
    lineWidth={3}
    theme={theme as any}
    enableGridX={false}
    enableGridY={false}
    enablePoints={false}
    enableCrosshair={false}
    colors={{ scheme: 'blues' }}
    data={[
        {
            id: 'fake corp. A',
            data: [
                { x: 'Week 1', y: 1 },
                { x: 'Week 2', y: 2 },
                { x: 'Week 3', y: 4 },
                { x: 'Week 4', y: 5 },
                { x: 'Week 5', y: 7 },
                { x: 'Week 6', y: 3 },
                { x: 'Week 7', y: 8 },
            ],
        },
    ]}
    axisLeft={{
        format: (value) => `${formatTime(Number(value))}`,
    }}
/>

[plouc]

I'm glad that you found a workaround.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!