CODEWITHSUNDEEP
reactjstypescriptgrafana
Leonardo Pivetta
Leonardo Pivetta

Reputation: 51

How to implement shared crosshair in a custom plugin - Grafana

I'm trying to implement a custom tooltip in my panel plugin with the shared crosshair function, but I need to explicitly take the cursor time position (as a value) and I can't find any information in the official documentation.

Upvotes: 0

Views: 667

Answers (1)

Leonardo Pivetta
Leonardo Pivetta

Reputation: 51

Ok after hours of searching I've found the solution, so I'm writing that here for further use.

componentDidMount(){
   this.props.eventBus.getStream(DataHoverEvent).subscribe((data)=>{
      //Now you can access the current row index (data.payload.rowIndex)
      console.log(data.payload.rowIndex);
   });
}

The full React component is


import React, { PureComponent } from 'react';
import { PanelProps, DataHoverEvent } from '@grafana/data';

export class CustomPanel extends PureComponent<PanelProps>{

  constructor(props){
    super(props);
  }

  componentDidMount(){
    this.props.eventBus.getStream(DataHoverEvent).subscribe((data)=>{
      //Now you can access the current row index (data.payload.rowIndex)
      console.log(data.payload.rowIndex);
    });
  }
  
  render(){
    return (
      <div></div>
    );
  }
}

I hope this will be useful for someone!

Upvotes: 2

Related Questions