The tooltip in Amcharts malfunctions when incorporating the DurationAxis

I've been grappling with getting tooltips to work in amCharts4 when using a DurationAxis(). It seems like there might be a bug, as the tooltips sometimes get stuck in the top left corner.

Here's an example: https://jsfiddle.net/jamiegau/fpye3bkv/25/

am4core.useTheme(am4themes_animated);

// Creating the chart
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Adding data
chart.data = [{
  "seconds": 1,
  "valueM": 12.1
}, {
  "seconds": 2,
  "valueM": 4.2
}, {
  "seconds": 4,
  "valueM": 7.3
}, {
  "seconds": 6,
  "valueM": 8.4
}, {
  "seconds": 9,
  "valueM": 4.5
}, {
  "seconds": 104,
  "valueM": 10.7
}];

var durationAxis = chart.xAxes.push(new am4charts.DurationAxis());
durationAxis.baseUnit = 'second';
durationAxis.title.text = 'Duration';

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Adding cursor
chart.cursor = new am4charts.XYCursor();
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = 'valueM';
series.dataFields.valueX = 'seconds';
series.yAxis = valueAxis;
series.name = 'Momentary';
series.strokeWidth = 2;
series.minBulletDistance = 10;
series.tooltipText = 'M: {valueY}';

I've used similar code with a DateAxis() without any issues. However, when trying it with a DurationAxis(), things start going wrong with tooltips.

In my actual code, I have 4 different series. But even when testing with just 1 series, I can't seem to solve it. I've tried everything, including reverting back to DateAxis, but it doesn't work for me because I need sub-second accuracy and the rounding on DateAxes looks terrible.

Update

This issue persists with both valueAxis and DurationAxis. After further investigation, it seems that having POINT tooltips on these types of axes is not supported by amCharts.

If I'm mistaken, please let me know.

Answer №1

I encountered a similar issue and was able to resolve it by referring to this helpful answer: .

Although the solution pertained to the ValueAxis rather than the DurationAxis, the underlying concept remained consistent. It appears that these classes do not include a necessary method, prompting the need to modify their prototypes. The code snippet below effectively resolved my problem:

am4charts.DurationAxis.prototype.getSeriesDataItem = function (
      series,
      position
    ) {
      const key = this.axisFieldName + this.axisLetter
      const value = this.positionToValue(position)
      return series.dataItems.getIndex(
        series.dataItems.findClosestIndex(
          value,
          function (x) {
            return x[key]
          },
          'any'
        )
      )
    }

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

Import JSON data into Jasmine/Karma while running unit tests in AngularJS

I am currently testing a callback function that requires a response object as its sole parameter. The response object is the result of an HTTP request made from a different location, so using $httpBackend in this particular test is unnecessary as the reque ...

Functionality of retrieving arrays from PHP via jQuery ajax (JSON) runs smoothly, however encounters issues specifically on web server

No solutions have been able to solve the problem at hand despite finding similar questions. function loadProject(id) { $.ajax({ url: 'loadDrumsetData.php', type: 'GET', data: { i: id }, ...

Using Ajax script to transfer user information to a php file in order to refresh the modified row in a table

Recently, I created a table in PHP to display certain data. Here's how it looks: <?php echo '<table id="tableteste" class="table table-striped" width="100%">'; echo '<thead><tr>'; echo &apos ...

What is the process of compiling HTML code?

In controller, I bind the same data like $scope.name = "<div>geetha teko</div>", this name will now be bound to the HTML like {{name}}. When I view it in the browser, it prints as "<div>geetha tek0</div>". Is there a way to only di ...

Retrieving data from the database using getStaticProps in Next.js

As I was following a tutorial on Next.js, the instructor did something that deviated from what I had learned in school and left me pondering. Here is what he did: interface FaqProps { faq: FaqModel[]; } export default function Faq({ faq }: FaqProps) { ...

Troubleshooting: Why is Jquery unable to retrieve image height?

Having trouble using jQuery to find the actual height of the first image nested within a container. I can access the src attribute but not the height. Any suggestions on how to get the accurate height? Is it necessary to retrieve heights via CSS? Unfortu ...

The contact form displays a confirmation message indicating successful submission, however, it fails to actually send the email

Having issues with a PHP script I created for the contact page on my website. After a user fills out and submits the form, they see a success message but the email is not sent. Can someone review this script and point out where I went wrong? <?php ...

Java code to extract and delete a section of a website on a webpage

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

Angular8: Stay Updated with Real-Time Data Refreshment

I've implemented code in my app.component to retrieve all users. I'm facing an issue where if I have two windows open and perform any CRUD actions, the second window displays outdated data. To address this, I am attempting to refresh the page ev ...

What causes the issue of undefined destructured environment variables in Next.js?

Within my application built with Next.js, I have configured a .env file containing a variable labeled API_KEY. When attempting to destructure the value of this variable, I am consistently met with undefined, as shown below: const { API_KEY } = process.env ...

Local connections are successfully established with Socket.IO, however, external connections are experiencing difficulties

I'm a beginner in Node.js and currently working on a simple chat application. However, I have hit a roadblock. I've tried searching online and using various solutions, but I still can't seem to get it to work. If anyone could lend a hand, ...

Understanding the concept of event bubbling through the use of querySelector

I am currently working on implementing an event listener that filters out specific clicks within a container. For instance, in the code snippet below I am filtering out clicks on elements with the class UL.head. <div> <ul class="head"> < ...

Tips for preloading a script in nextjs

I'm having trouble incorporating a script into my website. The issue is that the script doesn't load properly the first time the page loads, but after a few refreshes, it works and the responsible iFrame shows up. I've attempted several di ...

Assigning array materials in ThreeJS allows you to create complex

When I assign framemat to createScene(ID, geometry, 1, framemat), everything works fine. But when I try createScene( ID, geometry, 1, materials[ID] ), it doesn't cooperate. var jsonLoader = new THREE.JSONLoader(), paths = [ "obj/jgd/ ...

Build a Node.js application with Express to host static files

I am attempting to provide my static files "web.html" and "mobile.html", but I want them to be served only if the user is accessing from a web or mobile device. After some research, I came up with this code: var express = require('express'); va ...

The user authentication is not recognized in the current session (Node.js, Express, Passport)

I have encountered an issue where req.user is undefined, despite my efforts to troubleshoot for over 4 hours. I even resorted to copying and pasting the server/index.js file from a friend's server, modifying the auth strategy to suit my own, but the p ...

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

I've been working on integrating a chatbot based on RiveScript into Angular. The chatbot is functioning well - I always see the correct response in the console. Displaying the user's input is also working seamlessly. However, I'm encounterin ...

Is the value of the object in the array already present in another array of objects?

Plunker - http://plnkr.co/edit/jXdwOQR2YLnIWv8j02Yp In my angular project, I am working on a view that displays a list of users in the main container (array-A) and a sidebar with selected users (array-B). The first array (A) contains all users: [{ $$has ...

Unselect all checkboxes except for the one that was clicked

In a project, I have 3 checkboxes that are interconnected and when one is clicked or checked, I want the others to be cleared while keeping the clicked checkbox checked. This behavior is similar to radio buttons but I cannot use radio buttons due to client ...