with multi series.bisect() returns closest index instead of -1 when not over that series

[jckozy86]

Hi everyone,

I am using react-timeseries-charts and in order to get my graph to show a different color if a price is high or low etc. i created different timeSeries variables and had them showing on my 1 Chart See below

(https://i.stack.imgur.com/yhqUN.png)

<BarChart axis="price" spacing={1} columns={["priceLive"]} series={priceSeriesLive} style={style} />
<BarChart axis="price" spacing={1} columns={["priceFut"]} series={priceSeriesFuture} style={style} />
<BarChart axis="price" spacing={1} columns={["priceExtreme"]} series={priceSeriesExtreme} style={style} />
<BarChart axis="price" spacing={1} columns={["priceHigh"]} series={priceSeriesHigh} style={style} />
<BarChart axis="price" spacing={1} columns={["priceMedium"]} series={priceSeriesMedium} style={style} />
<LineChart axis="kWh" series={capSeries} style={style} fillOpacity={0.4}

/>

I have my legend show the different charts, shown as: Price, Medium Price, High Price etc each with a different color.

My issue is that when i am over lets say the High Price bar, i expect the value on my legend to change on the High Price Section and return 0 on everything else... instead the variable shows the value of the closest element to that.

Below is how i get the price, first find the index using series.bisect(tracker) where tracker is an x:y co-ordinate, get the element of the series on that index, then get the value while adding a format.

const fPrice = format("$,.2f");
const fCap = format(".2f");

let priceLiveValue, priceExtremeValue, priceHighValue, priceMediumValue, priceFutValue, kWhValue;
if (this.state.tracker) {
  const indexCap = capSeries.bisect(this.state.tracker);
  const trackerCap = capSeries.at(indexCap);

  const indexPrice = priceSeriesLive.bisect(this.state.tracker);
  const trackerPrice = priceSeriesLive.at(indexPrice);

  const indexExtr = priceSeriesExtreme.bisect(this.state.tracker);
  const trackerExtr = priceSeriesExtreme.at(indexExtr);

  const indexHigh = priceSeriesHigh.bisect(this.state.tracker);
  const trackerHigh = priceSeriesHigh.at(indexHigh);

  const indexMed = priceSeriesMedium.bisect(this.state.tracker);
  const trackerMed = priceSeriesMedium.at(indexMed);

  const indexFut = priceSeriesFuture.bisect(this.state.tracker);
  const trackerFut = priceSeriesFuture.at(indexFut);
  
  priceLiveValue = `${fPrice(trackerPrice.get("priceLive"))}`;
  priceExtremeValue = `${fPrice(trackerExtr.get("priceExtreme"))}`;
  priceHighValue = `${fPrice(trackerHigh.get("priceHigh"))}`;
  priceMediumValue = `${fPrice(trackerMed.get("priceMedium"))}`;
  priceFutValue = `${fPrice(trackerFut.get("priceFut"))}`;
  kWhValue = `${fCap(trackerCap.get("value"))}`;
}

I would like the index to be returned as 0 or NaN or -1 if I am not currently over that series so i can then have my legend show a value or null if those values above show up.

Hopefully i have provided with enough info.