CODEWITHSUNDEEP
amcharts
Timothy Elbert
Timothy Elbert

Reputation: 137

In amcharts, is there a way to bring a point forward when you hover over it with your cursor?

I have a category linegraph that I built using a serial amchart. I made it so all the points in a category double in size when the cursor hovers over the category like so:

"chartCursor": {
                            "categoryBalloonEnabled": false,
                            "cursorAlpha": 1,
                            "zoomable": true,
                            "graphBulletSize": 3,
                            "animationDuration": .1,
                            "fullWidth": true,
                            "valueLineAlpha" : .1,
                            "oneBalloonOnly": true
            },

The only problem is that if increasing in size makes the bullet overlap with a point further down in the series, the latter point remains on the forefront of the the chart, on top of the enlarged image. This isn't good because I am using custom bullets that actually contain necessary information. My question is: is there a way to temporarily bring a point modified by the cursor to the front of the graph to allow the image to be seen without impediment?

I am aware that I can put the image into a balloon, I'd rather not do that.

Upvotes: 1

Views: 903

Answers (1)

martynasma
martynasma

Reputation: 8595

Since bullets are part of the SVG tree, and, technically there is no way in SVG to set a "z-index" of the element (each subsequent node is drawn on top of the previous ones), the only way to go about it is to manipulate the actual order of bullets on chart on hover.

For that we can use chart cursor's changed event:

"listeners": [ {
  "event": "changed",
  "method": function( e ) {
    if ( e.index === undefined )
      return;
    for ( var i = 0; i < e.chart.graphs.length; i++ ) {
      // get graph
      var graph = e.chart.graphs[ i ];
      var holder = graph.bulletSet.node;

      // find the bullet and move it
      for ( var x = 0; x < graph.allBullets.length; x++ ) {
        var bullet = graph.allBullets[ x ];
        if ( bullet.graphDataItem.index === e.index ) {
          holder.appendChild( bullet.node );
          break;
        }
      }
    }
  }
} ]

The code above will move the bullets of the category currently being hovered on to the end of their respective containers, so they are drawn on top of any other bullets.

Here's a working example.

Upvotes: 1

Related Questions