Creating custom balloon text for category Axis in AmCharts

Question

I am using AmCharts in my AngularJs Application and I wanted to know how I could create custom balloon text when we hover over the category axis labels. The following is my code:

var configChart = function () {
            employeeChart = new AmCharts.AmSerialChart();
            employeeChart.categoryField = "empId";

            var yAxis = new AmCharts.ValueAxis();
            yAxis.position = "left";
            employeeChart.addValueAxis(yAxis);

            mcfBarGraph = new AmCharts.AmGraph();
            mcfBarGraph.valueField = "employeeRating";
            mcfBarGraph.type = "column";
            mcfBarGraph.fillAlphas = 1;
            mcfBarGraph.lineColor = "#f0ab00";
            mcfBarGraph.valueAxis = yAxis;
            employeeChart.addGraph(empBarGraph);

            employeeChart.write('employee');


        }

In my chart the category field is emp Id and the valueField is rating. The data provider for this chart is the employees json data. Now there is one more attribute in the JSON which is location. So I want to show "Location-Emp ID" when I over the category axis field on the chart.

Could you let me know how I could achieve this functionality.

xorspark xorspark · Accepted Answer · 2016-08-23T18:52:18

This seems very similar to another question you recently asked.

For a balloon over your categoryAxis label, you want to set up a chartCursor for your chart and then set up a categoryBalloonFunction on that object:

var chartCursor = new AmCharts.ChartCursor();
chartCursor.categoryBalloonFunction = function(category) {
  return location + "-" + category; 
};

employeeChart.addChartCursor(chartCursor);

How you resolve your location variable in angular is up to you. If you can provide an mvce in the form of a fidddle or codepen that reproduces your scenario, it will take a lot of guesswork out of how to approach your situation.

Creating custom balloon text for category Axis in AmCharts

1 Answers