onMouseNear with multiple ScatterPlots

[sb8244]

This may not be a bug, but I figured it's worth bringing up just in case. When using onMouseNear with multiple scatter plot charts in the same chart container, I find that only a single scatter plot will emit the event.

My current solution might be to move all of the data into a single scatterplot, although this isn't super desirable. Do you have any insight or something that could be missing to make this possible? My code is essentially:

        <ChartRow height="200">
          <YAxis id="y" min={aggregates.min - (aggregates.min * .05)} max={aggregates.max + (aggregates.max * .05)} />
          <Charts>
            {
              this.renderCharts()
            }
          </Charts>
        </ChartRow>

  renderCharts() {
    const { seriesContainer } = this.props

    const charts = Object.keys(seriesContainer).map((serverId) => {
      const series = seriesContainer[serverId]

      return [
        /*<LineChart key="line" axis="y" series={series} columns={['value']} style={style} />,*/
        <ScatterChart key="scatter" axis="y" series={series} columns={['value']} style={style} />,
      ]
    })

    if (this.state.tracker) {
      charts.push(this.renderMarker())
    }

    return charts
  }

[iabw]

TL;DR - using the code as written, no. Your idea to put them in the same ScatterChart is the best solution without modifying library code or creating your own ScatterChart component.

The onMouseNear is handled in the hover event on ScatterChart. This onHover is attached to both to the individual points and a hit box for the entire ScatterChart. This hit-box is the problem you're encountering. Every ScatterChart is a separate element and they overlay each other, so only the "top" one will register mouse events for a given hit-box. This top ScatterChart will be the most recently rendered unless you're doing something additional with the z-index or ordering of the charts array in your example here. A factoid that isn't helpful for solving this problem but might confuse someone looking at overlaid ScatterCharts - Each ScatterChart forms a box that's only as large as necessary to contain the points for that ScatterChart. So it's possible for lower ScatterCharts to pick up events if the top ScatterChart doesn't take up the whole width/height of the chart container.

When we needed to add this behavior to our project, we tried a few different solutions:

One was to create our own ScatterChart component. It looks mostly like the existing ScatterChart component, except it doesn't include that hitbox behind the points. This means you need to exactly mouse over each point to see info for it. For that reason, we also adjusted the hover from figuring out which point was closest to just using the data for the given point. This also means that if one point completely covers another point, you will never see info for it.

The other approach we tried was to add a mousemove handler into the EventHandler that wraps all the rendered chart components and had it find the closest event across all data in the chart. This solves all layering issues (which applies to all components, not just ScatterCharts), but you might notice the performance hit when moving your mouse if your dataset is large. Adjusting the EventHandler also isn't as simple as it sounds, since it requires creating a new ChartContainer to render this new EventHandler, since unlike the Chart components, the EventHandler isn't exposed as a child you can just replace. We had it return all events within {x} distance with their distance so we could decide to show more than 1 event if we felt there was a grouping that made analysis difficult.

Neither of these seemed general enough to offer via a pull request, but maybe allowing one or both of these "modes" via props would be an improvement.

[MajesticMe18]

Any update on this issue ? Need to have option to get info from over laid scatter graphs/ line charts as well. Plz help