Capturing mouse coordinates from hover events in Highcharts Gantt using the highcharts-react library

Currently, I am utilizing the official React highcharts wrapper to create a Gantt chart. My goal is to obtain precise mouse coordinates from a mouse-over event and utilize them for a custom tooltip.

For instance: https://stackblitz.com/edit/react-c5mivs

The event provides plotX and plotY as the supposed mouse coordinates. It also includes an array named tooltipPos which appears to be related to the native tooltip's coordinates.

However, both positions inaccurately display the tooltip. Could there be an offset that I have overlooked?

javascriptreactjshighcharts

Answer №1

When working with coordinates plotX and plotY, keep in mind that they are relative to the plot area. If you need these coordinates in relation to the chart container, you must incorporate the values of plotLeft and plotTop:

handleTooltip = (event) => {
  const chart = event.target.series.chart;

  this.setState({
    isVisible: true,
    tooltipPosX: chart.plotLeft + event.target.tooltipPos[0],
    tooltipPosY: chart.plotTop + event.target.tooltipPos[1]
  })
};

Check out a live demonstration here: https://stackblitz.com/edit/react-jfehmb?file=index.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to execute node in vscode terminal

Can anyone help me figure out why I'm unable to run Node in my vscode terminal? I'm a newbie and currently using POP OS 22.04. https://i.stack.imgur.com/WqHWM.pnghttps://i.stack.imgur.com/GEHeA.png Your assistance would be greatly appreciated. ...

javascriptvisual-studio-codenpmterminal

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

The deployment of a Reactjs application on Heroku was unsuccessful and crashed unexpectedly

I am currently attempting to deploy my React app on Heroku. The log file shows that the build was successful, but when I try to run it in the browser, I receive an error message after seeing "Starting the development server...". Process exited with status ...

node.jsreactjsnpmyarnpkg

Opening a fresh window with HTML content extracted from the existing page

Is there a way to open a new window and transfer some of the HTML content from the original page to the new window? For example: $("div#foo").click( function(){ var copyHTML = $("table.bar").html(); window.open(''); // how can we ...

javascriptjquery

How to Calculate the Time Interval Between Two CORS Requests Using jQuery AJAX

When using jQuery's $.ajax to make a CORS request to a web service, there is typically a pre-flight request followed by the actual POST request. I have observed that when there is a time gap between making two web service calls, both a pre-flight and ...

javascriptjqueryajaxgoogle-chromehttp

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue ...

javascriptvue.jsvuejs2vue-multiselect

What is the best way to title an uploaded chunk with HTML5?

Here is the script I am working with: function upload_by_chunks() { var chunk_size = 1048576; // 1MB function slice(start, end) { if (file.slice) { return file.slice(start, end); } else if (file.webkitSlice) { ...

javascriptphpjqueryajaxhtml

Implementing a document update event using jQuery

On my WordPress site, I am using a responsive lightbox plugin. When an image is clicked, it opens a popup box with the ID fullResImage. Now, I would like to incorporate the Pinch Zoomer function to it. Do I need to bind a function for this, or is there a s ...

javascriptjquerywordpresslightbox

Troubleshooting: React Native Web Throws an Error When Using React Native Paper Provider and React Navigation NavigationContainer

As a newcomer to React-native and React-native-web, I find myself facing a challenge while working on an existing project. This project utilizes the React-Native-paper library and the @react-navigation/native library. Currently, I am attempting to adapt th ...

reactjsreact-nativereact-navigationreact-native-navigationreact-native-paper

Bug in React Big Calendar causing time to display incorrectly

I'm currently working on showcasing events using React-big-calendar. However, I've encountered an issue with the time format. The data structure I'm passing to the calendar for events looks like this: { end: Tue Nov 03 2020 21:42:16 GMT+ ...

reactjscalendarreact-big-calendardate-fns

Is it possible to conceal and completely empty the TextBox once the checkbox is deselected?

When the checkbox is checked, the textbox is displayed; otherwise, it remains hidden. However, the value is not being cleared. Can someone please help me with this issue? Thank you in advance. HTML <div class="munna"> <in ...

javascripthtmlajaxjquery

Having trouble displaying values from nested JSON in a datatable

Response from server : ["{\"CLIENT\":[{\"tranche\":\"1-4\",\"prix\":\"65.96\",\"currency\":\"E\"}],\"DISTRIBUTEUR\":[{\"tranche\":\"1-4\",\"prix\ ...

javascriptjqueryangularjsjson

Issue with Bootstrap-vue pagination navigation not functioning correctly (unexpectedly refreshes upon clicking a page)

I recently updated my website's gallery pagination by following a helpful guide. However, I encountered a problem where clicking on a new page number refreshes the entire webpage, unlike the smooth transition shown in the tutorial. This is not the beh ...

javascriptjqueryvue.jspaginationbootstrap-vue

Issue with accessing container client in Azure Storage JavaScript library

When working on my Angular project, I incorporated the @azure/storage-blob library. I successfully got the BlobServiceClient and proceeded to call the getContainerClient method, only to encounter this error: "Uncaught (in promise): TypeError: Failed ...

javascriptangularnpmazure-blob-storageazure-storage

Scroll positioning determines the height of an entity

Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...

javascriptjqueryhtmlcss

Insert multiple text box values as a new entry in an SQL database

Currently, I am implementing a code snippet to incorporate additional text boxes within a form. The main purpose is to enable users to input multiple languages they are proficient in. <script> jQuery(function($) { var i = 0; ...

javascriptphpjquerysqlajax

What is the reason behind the continual change in the background image on this website?

Can you explain the functionality of this background image? You can find the website here: ...

javascripthtmlcss

Is it possible to set a different default page index other than 0 in a material table using reactjs?

I have noticed that the default page index in the material table is set to '0', but the API I am currently using begins with a page index of '1'. Is there a way to adjust the default page index of the table to match that of the API? ...

javascriptreactjspaginationmaterial-uimaterial-table

The endless $digest loop issue arises when attempting to filter an array of objects

Encountered a persistent $digest loop issue while passing parameters to a custom filter defined on the $scope. Here's the snippet in HTML: <ul id="albumListUL" class="fa-ul"> <li ng-repeat="album in GoogleList | myFilter:Field:Reverse t ...

javascriptangularjsangularjs-digest

Obtain the index of a selected option in a Select Tag using Node.js/Express

When you make a POST request with a form in Node.js/Express For example: <select name="selectname"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3"> ...

javascriptnode.jsformsexpress