x scale proportional to time.

[renatomserra]

Hellow,

Is there any way to make the distance between two points respect the scale of time between them? Right now points are evenly split across the x axis in the graph

[cam-shaw]

@RenatoSerra22 On line chart yes this is possible by setting the xDomain prop on the LineChart.Provider.
For the xDomain value, provide an array with 2 numbers, the lowest timestamp and highest timestamp in your data.

Let's say I had this data

const dataToShow = [
  { timestamp: 1661904060, value: 1 },
  { timestamp: 1661925060, value: 1.3 },
  { timestamp: 1661926260, value: 2 },
];

and we put it into our provider...

<LineChart.Provider
// other props
data={dataToShow}
 xDomain={[dataToShow[0], dataToShow[dataToShow.length -1]}>
// rest of code
</LineChart.Provider>

It will give you the desired result.

Here is an example (not with the above data) of the difference supplying an xDomain makes.

No xDomain

Has xDomain

[renatomserra]

beautifuuuuuuul thanks so much @cam-shaw !

[rodrigof1307]

I was about to post this exact same question. This prop of the provider should be on the Component APIs section of the docs

[cam-shaw]

I was about to post this exact same question. This prop of the provider should be on the Component APIs section of the docs

You're 100% correct, and this is my bad. When I added the feature in a PR I forgot to update the docs with it. I'll take a look during the week at adding some documentation.

[renatomserra]

@cam-shaw the gradient doesnt seem to respect the domain tho :)

[cam-shaw]

Iiinteresting... Had a look and I think I know how to solve the gradient issue.. Looks fairly simple to resolve, the gradient just needs to also respect the xDomain if provided.
No promises yet but give me some time and I'll try this week to have a play and I'll get something up for the maintainers to review.

[ChaseK30]

@cam-shaw For some reason I am getting a malformed path data error when putting the xDomain the same as the example that you gave, not sure what I am doing wrong

[ChaseK30]

Nevermind I figured it out, the timestamps were formatted differently then the data that was being shown, I did find a weird reaction when putting the xdomain, the dot seems to be hanging off the screen

[cam-shaw]

@ChaseK30 If you're able to, would be great if you can give this PR a test. I have fixed up the x position for the dot - would be great to know if it resolves your issues.

#144

Let me know if you have any issues integrating it into your project.

1. Clone the PR
2. Change package.json of PR version to 2.3.0-local.0 to avoid any package conflicts
3. yarn prepare && yarn pack - This will output a path to the terminal similar to success Wrote tarball to "/Users/.../react-native-wagmi-charts-v2.3.0-local.0.tgz
4. In your personal project, run yarn install pathToTarball

[ChaseK30]

checking now!

[ChaseK30]

@cam-shaw there are no build commands

[cam-shaw]

@ChaseK30 sorry, yarn prepare instead of yarn build. Have updated my comment above.

[ChaseK30]

Sorry for the delay running into a ton of dependency issues

[cam-shaw]

@ChaseK30 no worries at all. Could be good to document on the PR if the dependency issues are specific to the PR. I'd imagine the maintainers could throw that into the release notes.

Perhaps we can move this conversation there.

[ChaseK30]

Gettin a ton of these errors trying to run it at all

[cam-shaw]

@ChaseK30 those are unfortunately/fortunately (depending on how you look at it 😅 ) unrelated to the PR.
Double check your @react/types and react native types are correct for the React version you're using.

Perhaps even go as far as deleting the node_modules directory and installing dependencies again. Bit hard to debug from here unfortunately.

Were you already on react-native-wagmi-charts 2.3.0?

[ChaseK30]

in my personal project yes, but i am getting all these errors running a yarn install && yarn prepare && yarn pack before getting it into my personal project
@cam-shaw

[renatomserra]

just saw the PR thank you @cam-shaw for being so quick with it!

[renatomserra]

Found another issue :D when dragging over the line, the labels dont show the correct timestamp/value

[cam-shaw]

@RenatoSerra22 are you able to provide some sample data for me to test with? I believe I have fixed this in the PR as well.

[TobiasGrothmann]

Hi there,
I still ran into the issue of tooltips disregarding the xDomain which was adressed in #144

using "react-native-wagmi-charts": "2.6.0",

---

Some screenshots to illustrate:

without xdomain (works great):

with xdomain (tooltip values are offset)

[cam-shaw]

@TobiasGrothmann please correct me if I'm wrong.
The tooltip shows the value of the wrong data point that is currently selected?
This might be the same issue @renatomserra was having.

[TobiasGrothmann]

@cam-shaw
Exactly. The tooltip shows the value another data point than is selected.
It seems to me like it uses the value of the data point that would be correct if no xDomain was set.