'react-vis' how can i show crosshair on a specific point

Question

I would like to be able (upon the chart load) show the 'crosshair' on a specific point on the chart.

I have the crosshair at the moment displaying correctly crosshair with data from 9 y axis (x axis is time one).

I have searched the documentation and examples but was unable to see any such thing.

Crosshair documentation: https://uber.github.io/react-vis/documentation/api-reference/crosshair https://github.com/uber/react-vis/blob/master/docs/crosshair.md

React vis event handlers: https://github.com/uber/react-vis/blob/master/docs/interaction.md

React vis examples: https://uber.github.io/react-vis/

import {
  XYPlot,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  LineSeries,
  Crosshair
} from 'index';

const DATA = [
  [{x: 1, y: 10}, {x: 2, y: 7}, {x: 3, y: 15}],
  [{x: 1, y: 20}, {x: 2, y: 5}, {x: 3, y: 15}]
];

export default class DynamicCrosshair extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      crosshairValues: []
    };
  }

  /**
   * Event handler for onMouseLeave.
   * @private
   */
  _onMouseLeave = () => {
    this.setState({crosshairValues: []});
  };

  /**
   * Event handler for onNearestX.
   * @param {Object} value Selected value.
   * @param {index} index Index of the value in the data array.
   * @private
   */
  _onNearestX = (value, {index}) => {
    this.setState({crosshairValues: DATA.map(d => d[index])});
  };

  render() {
    return (
      <XYPlot onMouseLeave={this._onMouseLeave} width={300} height={300}>
        <VerticalGridLines />
        <HorizontalGridLines />
        <XAxis />
        <YAxis />
        <LineSeries onNearestX={this._onNearestX} data={DATA[0]} />
        <LineSeries data={DATA[1]} />
        <Crosshair
          values={this.state.crosshairValues}
          className={'test-class-name'}
        />
      </XYPlot>
    );
  }
}

In the event handlers section, there is a list of event handlers but those require user action. I would like the crosshair position being changed based on the state passed to it.

Based on what I already saw, I am not sure if this is at all possible? I don't need the tooltip part so I can live without it, all I need is really the crosshair.

Thank you for any help with this / answer to this.

Answer 1

To answer my own question, this can be simply done by passing the index of given data to the Crosshair component.

Example:

this.state = {
      crosshairValues: lines.map(d => d[7])
    };

Working example:

import React, { Component } from 'react';
import './App.css';
import '../node_modules/react-vis/dist/style.css';
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  LineSeries,
  MarkSeries,
  Voronoi,
  Crosshair,
  GradientDefs,
  AreaSeries} from 'react-vis';

  const lines = [
    [{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: 12}, {x: 5, y: 3}, {x: 6, y: 5}, {x: 7, y: 15}, {x: 8, y: 12},
    {x: 9, y: 3}, {x: 10, y: 5}, {x: 11, y: 15}, {x: 12, y: 12}, {x: 13, y: 3}, {x: 14, y: 5}, {x: 15, y: 15}, {x: 16, y: 12}],
    [{x: 1, y: 10}, {x: 2, y: 4}, {x: 3, y: 2}, {x: 4, y: 15}, {x: 5, y: 2}, {x: 6, y: 7}, {x: 7, y: 11}, {x: 8, y: 8},
      {x: 9, y: 10}, {x: 10, y: 4}, {x: 11, y: 2}, {x: 12, y: 15}, {x: 13, y: 2}, {x: 14, y: 7}, {x: 15, y: 11}, {x: 16, y: 8}],
    [{x: 1, y: 7}, {x: 2, y: 11}, {x: 3, y: 9}, {x: 4, y: 4}, {x: 5, y: 6}, {x: 6, y: 13}, {x: 7, y: 5}, {x: 8, y: 13},
      {x: 9, y: 7}, {x: 10, y: 11}, {x: 11, y: 9}, {x: 12, y: 4}, {x: 13, y: 6}, {x: 14, y: 13}, {x: 15, y: 5}, {x: 16, y: 13}]
  ].map((p, i) => p.map(d => ({...d, line: i})));
  const nodes = lines.reduce((acc, d) => [...acc, ...d], []);

  const getDomain = (data, key) => {
    const {min, max} = data.reduce(
      (acc, row) => ({
        min: Math.min(acc.min, row[key]),
        max: Math.max(acc.max, row[key])
      }),
      {min: Infinity, max: -Infinity}
    );
    return [min, max];
  };
  const xDomain = getDomain(nodes, 'x');
  const yDomain = getDomain(nodes, 'y');

  export default class Example extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      crosshairValues: lines.map(d => d[7])
    };
  }
    state = {
      hoveredNode: null
    };

    _onMouseLeave = () => {
      this.setState({crosshairValues: []});
    };

    _onNearestX = (value, {index}) => {
      this.setState({crosshairValues: lines.map(d => d[index])});
    };

    render() {  
      const {hoveredNode} = this.state;
      return (
        <div>
          <XYPlot
            xDomain={xDomain}
            yDomain={yDomain}
            margin={{top: 10, left: 40, bottom: 40, right: 10}}
            width={1900}
            height={300}
            onMouseLeave={this._onMouseLeave}
          >
             <GradientDefs>
              <linearGradient id="CoolGradient" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="red" stopOpacity={0.4}/>
                <stop offset="100%" stopColor="blue" stopOpacity={0.3} />
              </linearGradient>
            </GradientDefs>
            <HorizontalGridLines />
            <VerticalGridLines />
            <XAxis title="X Axis" />
            <YAxis title="Y Axis" />
            {lines.map((d, i) => (
              <AreaSeries 
                color={'url(#CoolGradient)'}
                key={i}
                opacity={hoveredNode && hoveredNode.line === i ? 1 : 0.3}
                data={d}
                onNearestX={this._onNearestX} 
              />
            ))}
            <Crosshair
              values={this.state.crosshairValues}
              className={'test-class-name'}
            />
          </XYPlot>
        </div>
      );
    }
  }

Hopefully, this will save someone else time.