Nivo: Time scale for y axis in line chart

[anitapachecoh]

Is there a way of setting a time scale in y-axis in a line chart?
All the examples are for x-axis, i tried it for y axis but its not working.
I need y-axis to show hours from a day, 0 to 24 hours, or 0 to 12 am and pm.

[plouc]

Yes you can use a time scale on y axis, however I'm wondering if you really want a time scale, as 2019-01-01 09:30 and 2019-01-02 09:30 won't be the same. if you only want to show hours of day no matter the day it is, you should use a linear scale and prepare the data before passing it to the component.

[plouc]

I've created an example of it, I hope it'll help.

[anitapachecoh]

Yes, i can create a linear scale but client wants an hour format.
Thank you for the example! I still had the error after i copied it so i updated some dependencies and now its working.
If anyone is wondering, times in chart are in UTC time.. so you may not see the same times in chart that they are in data.
By the way.. very good library! thank you

[anitapachecoh]

I have one more issue.. If in the example I change the data to be only time (no date) it adds 17 min to all the points.. do you know why this could be happening?
Here is the index.js from the example code with the changes

import React from "react";
import ReactDOM from "react-dom";
import { ResponsiveLine } from "@nivo/line";
import "./styles.css";

const data = [
  {
    id: "hours",
    data: [
      { x: "A", y: "04:00" },
      { x: "B", y: "02:00" },
      { x: "C", y: "07:00" },
      { x: "D", y: "04:00" }
    ]
  }
];

const App = () => {
  return (
    <div className="App" style={{ height: 400 }}>
      <h1>Line y axis time scale</h1>
      <ResponsiveLine
        data={data}
        margin={{ top: 50, right: 60, bottom: 50, left: 120 }}
        xScale={{ type: "point" }}
        yScale={{
          type: "time",
          format: "%H:%M",
          precision: "minute"
        }}
        yFormat="time:%Hh %Mm"
        axisLeft={{
          orient: "left",
          format: "%Hh%M",
          legend: "day hour",
          legendOffset: -80,
          legendPosition: "middle"
        }}
        pointSize={10}
        pointColor="white"
        pointBorderWidth={2}
        pointBorderColor={{ from: "serieColor" }}
        useMesh={true}
      />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[alonzazo]

Yes, i can create a linear scale but client wants an hour format.
Thank you for the example! I still had the error after i copied it so i updated some dependencies and now its working.
If anyone is wondering, times in chart are in UTC time.. so you may not see the same times in chart that they are in data.
By the way.. very good library! thank you

Me neither, how could we deal with an specific timezone? In my case, I have clients with -6 offset time zone, but Nivo shows times in UTC?

[plouc]

You can add useUTC: false to xScale in order to use local timezone