Amchart 5: Tracking Cursor Movement on the X Axis

I am a beginner with amCharts5 and I am in need of assistance to retrieve the actual X value of the cursor on my chart (where the X axis represents dates). I have come across helpful examples for amCharts 4, but nothing seems to work for amCharts 5. Is this a basic requirement that is missing?

Alternatively, would you suggest using HighCharts or sticking with amCharts 4 instead?

This is what I have tried so far:

cursor.events.on("cursormoved", function(ev) {
  console.log(ev);
  console.log("x: ", ev.target.chart.xAxes.getIndex(0));
  // not working : console.log("x: ", xAxis.positionToDate(xAxis.toAxisPosition(ev.target.xPosition)));
  // not working : console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
});

Here is a visual representation of my graph and cursor

javascriptcursoramchartsamcharts5

Answer №1

After a long search, I finally stumbled upon the correct documentation for v5. It's hard to believe I missed it before, but everything is working perfectly now!

cursor.events.on("cursormoved", function(ev) {
    var x = ev.target.getPrivate("positionX");
    var y = ev.target.getPrivate("positionY");
    var dateX = xAxis.positionToDate(xAxis.toAxisPosition(x));
    var valueY = yAxis.positionToValue(xAxis.toAxisPosition(y));
    // console.log(dateX);
});

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

The webpage encountered an issue while trying to load a resource: the server returned a 500 (Internal Server Error) status message, preventing the submission of the data

When I use AJAX jQuery to send data via POST, the input name does not get sent and the database shows NULL as the answer. Thank you for any assistance. Below is my JQuery code: $('#btn-save').click(function(){ $.ajax({ url: "<? ...

javascriptphpjqueryajaxcodeigniter

Error: script 'start' is not defined on Heroku

Hello there! I'm currently working on deploying an application to Heroku from my GitHub repository. To ensure that everything runs smoothly, I made some modifications to the start script in the package.json file. Specifically, I adjusted it to point t ...

javascriptnode.jsexpressheroku

"Experience a unique website layout with varying designs on desktop and mobile devices while using the React technology to enable desktop

Just starting out with React and I've noticed something strange. When I view my website on a PC, everything looks normal. However, when I switch to the desktop site on my phone, things appear differently. It seems like moving an element by 20px on mob ...

javascripthtmlcssnode.jsreactjs

JestJS: Async testing isn't halted

I am facing two issues with my jest test: Is there a way to define the Content collection only once instead of repeating it inside the test? I encountered this error: Jest did not exit one second after the test run has completed. This usually indicates ...

javascriptmongodbtestingjestjs

Quickest method for arranging a multi-dimensional array with dates in sequential order

I have a list of appointments with dates and times as shown below: [ ["John Doe", "10 Sep. 2017 2:00 PM"], ["Jane Smith", "10 Sep. 2017 2:00 PM"], ["Alice Johnson", "10 Sep. 2017 1:00 PM"], ["Bob Williams", "10 Sep. 2017 8:00 AM"], ["M ...

javascriptsortingmomentjs

Ways to transfer data from JavaScript to Wicket framework

My Javascript method executes business logic on the client side and returns a value. I now want to access this value in my Wicket page. What is the most effective approach for achieving this? P.S. I am currently using Wicket 7. ...

javascriptjavawicketwicket-7

After logging out, Next-auth redirects me straight back to the dashboard

In my NextJS application, I've implemented a credential-based authentication flow along with a dashboard page. To handle cases where an unauthorized user lands on the dashboard route, I've created a custom AccessDenied component. In the getServer ...

javascriptreactjstypescriptnext.jsnext-auth

Trouble with AJAX GET request functionality

I am new to AJAX and attempting to make my first AJAX call. Here is the code I have so far: $.get( "validate.php", { 'userinput':'x'}, function(response) { if( response.status ) alert( "Matches found" ); else alert( "No matches ...

phpjavascriptjqueryajaxget

The property was computed but cannot be set - specifically for a toggle component

I am currently working on developing a switch toggle component in Vue that includes a v-model and @updated. However, I am encountering difficulties when trying to update the model once the user toggles the switch. Initially, I faced an issue regarding muta ...

javascriptvue.js

Generating DOM elements at specific intervals using Jquery

I am looking to dynamically create 1 div container every x seconds, and repeat this process n times. To achieve this, I have started with the following code: $(document).ready(function() { for (var i = 0; i < 5; i++) { createEle(i); } }); f ...

javascriptjqueryhtmlcss

Bootstrap is not being rendered by Express

As I venture into learning Express, I've come across an issue regarding the rendering of Bootstrap fonts in my application. Despite setting up the correct paths, the font appears as simple Times New Roman instead of the desired Bootstrap font when run ...

javascriptnode.jstwitter-bootstrapexpress

What is the correct way to use getServerSideProps?

Lately, I've been exploring the world of web development by creating a web app using NextJS. While I have some knowledge of the basics in this field, I found myself a bit lost when working with NextJS since I hadn't worked with React before. One ...

javascriptnext.jsfetchgetserversideprops

Ways to conduct testing on an Express application while implementing app.use(express.static('public'));

I am encountering an issue when trying to mock app.use(express.static('public')). Previously, all my tests were successful before adding this line of code. While I have experience testing express servers in the past using a similar approach, this ...

javascriptnode.jsexpresstestingjestjs

Using prerender.io in conjunction with native Node.js

Currently, I am working on integrating prerender.io into my Angular 1.6.0 application that is being hosted on a Node.js server. The instructions provided in the documentation for setting up the middleware involve using the connect middleware, with a speci ...

javascriptangularjsnode.jsexpressprerender

When you make a POST request to an express API, the properties are not clearly defined

Just getting into Vue.JS and experimenting with creating a basic MEVN to-do list app for practice. I keep encountering an issue when trying to send a POST request to my express server, receiving the error message: TypeError: Cannot read properties of unde ...

javascriptnode.jsvue.jsexpress

Why isn't the VueJS component loading state getting updated after Canceling an Axios network request?

Within my dashboard, there is a dropdown for filtering dates. Each time a user changes the dropdown value, multiple network requests are sent using Axios. To prevent additional API calls when the user rapidly changes the date filters, I utilize AbortContr ...

javascriptvue.jshttpaxiosvuex

Transform a string into a key-value mapping

I am trying to create key-value pairs in my application and then read them using jQuery. Here is an example code snippet: string s = "'{\"96\": \"0\","; s += "\"97\": \"1\"}'"; HiddenField1.Value = s; Now ...

javascriptjqueryasp.net

WebStorm not recognizing NodeJS Core Modules in External Libraries

As a newcomer to NodeJS and WebStorm, I am currently diving into a tutorial on creating an Express app. In the tutorial, the instructor always gets prompted with "Configure NodeJS Core Module Sources" including the URL nodeJS.org when creating a new NodeJ ...

javascriptnode.jsexpressconfigurationwebstorm

What is the method to display a caret in regular HTML text with the use of JavaScript?

Currently, I am studying JavaScript and aiming to develop a typing game similar to typeracer.com. The goal of the game is to type accurately and quickly without errors. In this game, users input text into a box, and JavaScript then compares their inputs w ...

javascripthtml