How to modify the label of Category Field in amCharts

Question

I am using amCharts in my AngularJS application and I am looking for a way to rename the label of the category field. 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 the above coode if you observe the categoryField is empId so on the x-axis it shows employee Id's, I want to make it "dept-empId". For example if the department number is 1, on the x-axis it show display 1-1,1-2 etc. The department Id is not in the data provider but is one of the scope variables in my controller. Could you let me know how I could achieve this.

xorspark xorspark · Accepted Answer · 2016-08-16T23:36:25

You can define a labelFunction in your chart object's categoryAxis to get the formatting you want.

var categoryAxis = employeeChart.categoryAxis;
categoryAxis.labelFunction = function(valueText) {
  return dept + '-' + valueText;
};

Here's a fiddle that uses your setup with some dummy data to illustrate this: https://jsfiddle.net/by7grqjm/2/

How to modify the label of Category Field in amCharts

1 Answers