Issue with Amcharts: Category data not displayed when cursor is altered

I recently came across some examples by Amstock (1,2) where the category field block is enabled when moving a cursor.

Despite my efforts, I couldn't replicate this functionality in my project.

Here are my current chartCursorSettings:

   this.chart = window.AmCharts.makeChart("chartdiv", {
      "path": AmCharts_path,
      "type": "stock",
      "theme": "light",

      "dataSets": portfolioData.map(function (port, idx) {
        return {
          "title": port.name,
          "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
          }],
          "dataProvider": port.data,
          "compared": (idx === 0 ? false : true),
          "categoryField": "date"
        }
      }),

      "panels": [{
        "showCategoryAxis": false,
        "title": "Value",
        "percentHeight": 70,
        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender
          }]
      }],

      "chartScrollbarSettings": {
        "graph": "g1"
      },

      "categoryAxis": {
        "parseDates": true
      },

      "balloon": {
          "fixedPosition": true,
          "maxWidth": 10000
      },

      "chartCursorSettings": {
        "valueBalloonsEnabled": true,
        "categoryBalloonEnabled": true,
        "categoryBalloonAlpha": 0.2,
        "bulletsEnabled": true,
        "bulletSize": 10,
        "categoryBalloonDateFormats": [
            {period:'fff',format:'JJ:NN:SS'},
            {period:'ss',format:'JJ:NN:SS'},
            {period:'mm',format:'JJ:NN'},
            {period:'hh',format:'JJ:NN'},
            {period:'DD',format:'MMM DD'},
            {period:'WW',format:'MMM DD'},
            {period:'MM',format:'MMM'},
            {period:'YYYY',format:'YYYY'}
          ]
      },

      "listeners": [{
        "event": "zoomed",
        "method": this.calulateMetrics
      }],

      "periodSelector": {
        "position": "bottom",
        "periods": [{
          "period": "MM",
          "count": 1,
          "label": "1 month"
        }, {
          "period": "MM",
          "count": 3,
          "label": "3 month"
        }, {
          "period": "MM",
          "count": 6,
          "label": "6 month"
        }, {
          "period": "YYYY",
          "count": 1,
          "label": "1 year"
        }, {
          "period": "YTD",
          "label": "YTD"
        }, {
          "period": "MAX",
          "selected": true,
          "label": "All"
        }]
      },
    });
  },

Furthermore, I have set parseDates to true.

"categoryAxis": {
  "parseDates": true
},

I even tried specifying the "dataDateFormat": "YYYY-MM-DD", but it didn't yield any results either.

How do I go about enabling this feature? https://i.sstatic.net/FkOix.png

Currently, I am passing JavaScript's Date object to the category field.

javascriptamchartsamstock

Answer №1

In order for the categoryBalloon to work properly with the chartCursor, the categoryAxis must be visible. By setting showCategoryAxis: false in your panel, you are essentially removing the balloon because you are also removing the category axis.

If you want to keep the category balloon but hide the categoryAxis labels, you can set labelsEnabled to false in your categoryAxesSettings.

AmCharts.makeChart("...", {
  // ...
  panels: [{
    //showCategoryAxis: false, //comment/remove this
    // ...
  }],
  // ...
  categoryAxesSettings: {
    labelsEnabled: false //if you want to remove the axis labels but keep the balloon
  },
  // ...
});

Check out the demo here

Here are some additional tips:

  • categoryAxis doesn't have an impact at the top level of the stock chart, and all stock charts automatically enable parseDates. In this case, categoryAxesSettings is more relevant.

  • dateDateFormat instructs AmCharts on how to interpret string-based dates in your dataProvider. However, since you are using Date objects, it has no effect.

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

Guide to incorporating a vanillaJS npm script into a Nuxt plugin

Struggling with saving images directly to AWS S3 using AWS S3. Attempted to add the AWS package as a plugin without success. In the nuxt.config.js file, I have: plugins: [ ... '~plugins/S3.js' ], In the plugins/s3.js file: import vue from ...

javascriptamazon-web-servicesvue.jsamazon-s3nuxt.js

Is there a way to enable multiple selections in a particular section?

Currently, I am in the process of working on my step by step order and I want to express my gratitude for all the assistance I have received so far. Despite the help, I still have some unanswered questions! The steps in my project are categorized into dif ...

javascriptjqueryhtmlcss

Is there a way to incorporate JavaScript from an AJAX-loaded HTML file?

I've created an html file called index.html that has an empty div which loads content from another html file named second.html using ajax. To enhance the user experience, I implemented a popup feature with an audio player using jqueryui when a butto ...

javascriptjqueryhtmlajaxjquery-ui

Using JavaScript to swap between multiple images can be a powerful tool, but sometimes the wrong image

I'm having an issue with duplicating an image swap function. The problem is that the mouseout event is triggering image 3 on each of the three swaps, when I actually want it to trigger only on the last one. Can anyone provide some guidance on how to m ...

javascripthtmlimageswap

The console logs indicate success for every call, but unfortunately Twitter is not displaying the retweets

Hey there! I'm having some trouble with calling a function and it's not working as expected. var T = new Twit(config); var retweet = function() { T.get('search/tweets', {q:'#python3, #nodejs, python3, nodejs,', count :5 }, f ...

javascriptnode.jsnpmtwitter

Update the function to be contained in a distinct JavaScript file - incorporating AJAX, HTML, and MySQL

Currently, I am working on a project and need to showcase a table from MySQL on an HTML page. The JavaScript function in my code is responsible for this task, but due to the Framework 7 requirement, I must separate the function into a different .js file ra ...

javascripthtmlmysqlajax

Can someone explain why my search input's sync function is being triggered twice?

Within my CodePen project at https://codepen.io/aaronk488/pen/MWbKNOq?editors=1011, I am facing an issue where my sync function search is being called twice without a clear reason. Even though I managed to resolve this by adding a conditional statement in ...

javascriptvue.jsasynchronoussynchronizationvuetify.js

Manipulate objects in three.js to always face the mouse pointer

It seems that despite my efforts, I am struggling with this task as I am relatively new to it. Surprisingly, I am not getting any errors in Dreamweaver. I've started fresh by integrating the look at function with the OBJ loader, camera, and lights in ...

javascriptthree.js

What is the best way to retrieve the value stored in a variable?

In my Node.js program, I have a snippet of code where I am working with a map named `transMap`. My goal is to retrieve the value for 'yy', which should be "ipaddress", and then output it as JSON. While I expected the JSON response to be { "ipaddr ...

javascriptnode.js

Laravel: Input information into a form containing multiple dropdown menus

I am in search of a Laravel or HTML example that demonstrates filling out a form with multiple drop-down lists. Here's my scenario: I have the following text inputs: name_customer, phone_customer, email_customer. I want the form fields to automatical ...

javascriptjquerylaravelvue.js

Applying CSS transitions to an element whose value is dynamically set using JavaScript

When I set a transition for an element in my style sheet, along with some template HTML code, the transition works fine if I delay setting the attribute in JavaScript. However, it doesn't work without the delay. I think this is because both processes ...

javascripthtmlcss

What could be causing the code to produce 4 elements instead of the expected 2?

I'm trying to understand why the code above is creating four new paragraphs instead of just two. Can someone please explain what exactly happens in the $("p").before($("p").clone()); part? <!DOCTYPE html> <html> <head> <script ...

javascriptjqueryhtml

Why is the count's answer 88?

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl">{{count ...

javascriptangularjs

Nested table with combined ng-repeat

When working with AngularJs in a web app, I encountered a challenge involving a large array containing two groups of objects, each with a sub-array. My goal was to display a table where the first row shows the foodName and totalCount, which is the sum of a ...

javascriptangularjshtml-tableangularjs-ng-repeat

Attempting to send a POST request, only to be informed by the form that it is devoid of

I have been struggling with this problem for some time now. I implemented the category_create_post functionality in the categoryController, and everything seems to be set up correctly. I also configured the category_form.ejs to accept user input. However, ...

javascriptnode.jsexpresspost

Bringing in the bootstrap JavaScript file

I've recently started using Bootstrap that I installed from npm, but I'm having trouble importing the JS file. This is my main JS file where I want to utilize all the tools: import * as bootstrap from '../node_modules/bootstrap/dist/js/boot ...

javascripthtmlvisual-studio-codebootstrap-4

Using React and Material UI to hide a child element when it is hovered over with the help of withStyles

I am trying to hide the ListItemSecondaryAction element with the class actions when hovering over the ListItem with the class friendsListItem. Despite attempting to use the descendent selector within styles, I have not been able to achieve the desired res ...

javascriptreactjsmaterial-ui

Breaking down nested arrays in typescript

After receiving a response from the service, the data included the following: "rows": [ [ "stravi/aa", "202001", "59", "51", "2558.98", "0.5358894453719162", "1.9204668112983725", "140", "2.346630 ...

javascripttypescript

How can I apply red border styling only after the first click in MUI React?

I am currently working with MUI Textfields and I have a specific styling requirement. I would like the field to display a red outline only after the first click, if the input is left blank or deleted. Essentially, I want the field to appear normal initiall ...

javascriptreactjsmaterial-uitextfield

Is it possible to use Symbol.iterator in an Object via prototype in JavaScript?

What is the reason behind the inability to add Symbol.iterator to an Object in this way? Object.prototype[Symbol.iterator]; let obj = {num: 1 , type : ' :) '} for (let p of obj) { console.log(p); } // TypeError: obj is no ...

javascriptobjectiteratorsymbols