Set max or min y value

[nandorojo]

I am showing a single day's trading value. For 1d, it's useful to compare to day to tomorrow's close price.

This is what happens for Robinhood vs my app:

Robinhood	Wagmi
	​

The HOOD stock went down 10% since yesterday. However, based on the Wagmi chart, there isn't much visual representation of this. Robinhood, on the other hand, makes this pretty clear, by showing a large white gap above the chart.

Is there a way to dynamically set the range for the Y values? I envision something like this:

<LineChart.Path 
  yRange={{ max, min }} // these can both be optional overrides
/>

[nandorojo]

@jxom I'm happy to implement this myself, I think I just need some pointers about how to get around the getArea and getPath function. Any shot you have some off-hand suggestions for how to do this?

[jxom]

@nandorojo – yoo!

I think this could be as simple as overriding the domain in getPath and getArea.

[jxom]

I guess the API could look like:

<LineChart.Provider data={data}>
  <LineChart yDomain={{ min, max }}>
    <LineChart.Path />
  <LineChart>
</LineChart.Provider>

[nandorojo]

Okay let me try that

[nandorojo]

Should I call it range instead of domain, since domain typically means X axis?

Update I see that this probably doesn't make sense.

[jxom]

Yeah, it's kinda weird coz d3-scale uses domain interchangeably w/ x & y axis. It seems that d3-scale uses range as a scalar based on the x/y domain.

[jxom]

But if range makes more sense from a high-level DX perspective, I am happy to use that.

[nandorojo]

Right...maybe we put yRange as the prop, but use yDomain internally 🧐

[nandorojo]

RPReplay_Final1635380567.MP4

This is looking good to me

[nandorojo]

I'll push for you to test to make sure I got this right...but I think it's right. I can test it in my app too with real data (hard to know with mock)

[nandorojo]

Stuck to yRange, felt a bit clearer. Opened a PR at #21