Get the Y value for a given X value

What is the problem?

Hope I’m not being too active on these issues right now 🤞 This is more like an idea / feature: Getting the Y value for a given X value. When the XAxis is linear (e.g time), it would be nice to have a function like x() and y() but not for the coordinates, but for the values. For example, if you have the following input:

[
 { value: 10, timestamp: new Date(2018, 06, 25) },
 // One day missing
 { value: 20, timestamp: new Date(2018, 06, 27) }
]

The graph is now going to be painted as if the values were like so:

[
 { value: 10, timestamp: new Date(2018, 06, 25) },
 { value: 15, timestamp: new Date(2018, 06, 26) },
 { value: 20, timestamp: new Date(2018, 06, 27) }
]

So, by providing the x value, in this case time, it should be possible to find out not only what coordinate the graph has plotted the Y value on, but what the Y value actually is — by providing yValueForX(new Date(2018, 06, 26)) we should be able to get 15 back, as that’s already plotted on the graph?

TL;DR: It should be possible to retrieve the “in-between” values, given an X-value within the domain for the graph

[JesperLekland]

I hear you. I’ll have to look into if d3.js have that option anywhere, since that’s what I’m using to generate the paths.

[wrsulliv]

For anyone having this issue, here’s my solution:

Step I: Get the SVG String

First, I bring the SVG string generated internally by area-chart.js into my React component’s state. I do this by mounting this extractor component as a child of the chart:

const LineExtractor = ({ line }) => {
  this.setState({ line });
  return null;
};

The line prop comes from chart.js, which passes extraProps to all chart child components. You could also use this prop directly if you’re building a child component.

Step II: Iterate the SVG to find the Y Value

Next, I get the Y value from the extracted SVG. To do that, I found a browser script which uses binary search (instead of the bisect function): https://www.freecodecamp.org/news/how-to-build-react-native-charts-with-dynamic-tooltips-64aefc550c95/

Unfortunately, this script requires the getPointAtLength, and getTotalLength browser API functions. After some research, I found a pure JS alternative called svg-path-properties: https://www.npmjs.com/package/svg-path-properties

The final script to calculate the Y-Value in React Native then looks like this:

//  REFERENCE:  This code is an adaptation of the browser-based solution found here (https://www.freecodecamp.org/news/how-to-build-react-native-charts-with-dynamic-tooltips-64aefc550c95/)

import * as path from 'svg-path-properties';

function findY(p, x) {
  const properties = path.svgPathProperties(p);
  var pathLength = properties.getTotalLength()
  var start = 0
  var end = pathLength
  var target = (start + end) / 2

  // Ensure that x is within the range of the path
  x = Math.max(x, properties.getPointAtLength(0).x)
  x = Math.min(x, properties.getPointAtLength(pathLength).x)

  // Walk along the path using binary search 
  // to locate the point with the supplied x value
  while (target >= start && target <= pathLength) {
    var pos = properties.getPointAtLength(target)

    // use a threshold instead of strict equality 
    // to handle javascript floating point precision
    if (Math.abs(pos.x - x) < 0.001) {
      return pos.y
    } else if (pos.x > x) {
      end = target
    } else {
      start = target
    }
    target = (start + end) / 2
  }
}

Within my React component, I get the Y-Value with:

findY(this.state.line, x);

It should also possible to do this with bisect by first iterating through the SVG and creating an array of values in the x domain.

It’s a little messy but it works for now =)