Amcharts Numberformatter Doesn't Apply For Serial Chart

I have below setting done for my amcharts serial-graph. As can be seen from above code, I've applied numberFormmater for all the graphs field. I have assigned value through variab

Solution 1:

The chart applies number formatting only to known metacodes like [[value]]. You are using direct references to fields in data such as [[amount]], [[amount1]], etc.

The chart does not know if those are supposed to be numeric values, hence no formatting is applied - they are displayed as they are.

The same goes with balloonText and labelText.

To fix this, simply replace all occurrences of thos meta codes to the built-in [[value]]. The chart will replace it with a formatted value, for each graph individually:

var data = [ {
  "name": "Test Name 1",
  "count": 31,
  "amount": 30562,
  "amount1": 8241,
  "amount2": 4463,
  "amount3": 3125,
  "amount4": 14733,
  "count1": 4,
  "count2": 11,
  "count3": 8,
  "count4": 8,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 2",
  "count": 40,
  "amount": 30413,
  "amount1": 12874,
  "amount2": 5014,
  "amount3": 4915,
  "amount4": 7610,
  "count1": 20,
  "count2": 7,
  "count3": 9,
  "count4": 4,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 3",
  "count": 166,
  "amount": 228353.6,
  "amount1": 109492,
  "amount2": 53268,
  "amount3": 52860.6,
  "amount4": 12733,
  "count1": 51,
  "count2": 57,
  "count3": 46,
  "count4": 12,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 4",
  "count": 15,
  "amount": 61801,
  "amount1": 31656,
  "amount2": 15853,
  "amount3": 8033,
  "amount4": 6259,
  "count1": 1,
  "count2": 9,
  "count3": 2,
  "count4": 3,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 5",
  "count": 81,
  "amount": 69988,
  "amount1": 23040,
  "amount2": 26333,
  "amount3": 10791,
  "amount4": 9824,
  "count1": 21,
  "count2": 32,
  "count3": 19,
  "count4": 9,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 6",
  "count": 30,
  "amount": 113027,
  "amount1": 56511,
  "amount2": 9750,
  "amount3": 34014,
  "amount4": 12752,
  "count1": 15,
  "count2": 4,
  "count3": 8,
  "count4": 3,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 7",
  "count": 2,
  "amount": 812,
  "amount1": 0,
  "amount2": 562,
  "amount3": 0,
  "amount4": 250,
  "count1": 0,
  "count2": 1,
  "count3": 0,
  "count4": 1,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 8",
  "count": 92,
  "amount": 103502.005,
  "amount1": 42177,
  "amount2": 38629,
  "amount3": 11338,
  "amount4": 11358,
  "count1": 24,
  "count2": 37,
  "count3": 22,
  "count4": 9,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43"
}, {
  "name": "Test Name 9",
  "count": 0,
  "amount": 0,
  "amount1": 0,
  "amount2": 0,
  "amount3": 0,
  "amount4": 0,
  "count1": 0,
  "count2": 0,
  "count3": 0,
  "count4": 0,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43",
}, {
  "name": "Test Name 10",
  "count": 2,
  "amount": 1642.521,
  "amount1": 1432.5263541,
  "amount2": 210,
  "amount3": 0,
  "amount4": 0,
  "count1": 1,
  "count2": 1,
  "count3": 0,
  "count4": 0,
  "color1": "#fdaa29",
  "color2": "#45aeea",
  "color3": "#8fc842",
  "color4": "#d43a43",
} ]

var labelText, valueField, balloonText1, balloonText2, balloonText3, balloonText4, valueField1, valueField2, valueField3, valueField4;

labelText = "$ [[value]]";
valueField = "amount";
pieLabel = "$ [[value]]";
balloonText = "$ [[value]]";
valueField1 = "amount1";
valueField2 = "amount2";
valueField3 = "amount3";
valueField4 = "amount4";
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "dataProvider": data,
  "valueAxes": [ {
    "stackType": "regular",
    "axisAlpha": 0,
    "gridAlpha": 0.1,
    "unit": "$ ",
    "unitPosition": "left"
  } ],
  "startDuration": 1,
  "graphs": [ {
    valueField: valueField,
    labelText: labelText,
    labelOffset: 20,
    labelPosition: "right",
    labelFunction: function( item, label ) {
      return label == "$ 0" ? "" : label;
    },
    visibleInLegend: false,
    lineAlpha: 0,
    showBalloon: false,
    fontSize: 13,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color1",
    "valueField": valueField1,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color2",
    "valueField": valueField2,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color3",
    "valueField": valueField3,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  }, {
    "balloonText": "<b>" + balloonText + "</b>",
    "fillAlphas": 0.9,
    "lineAlpha": 0,
    "type": "column",
    "colorField": "color4",
    "valueField": valueField4,
    "precision": 2,
    "decimalSeparator": ".",
    "thousandsSeparator": ","
  } ],

  "depth3D": 15,
  "fontFamily": '"Roboto",sans-serif',
  "fontSize": 12,
  "angle": 25,
  "rotate": true,
  "columnWidth": 0.7,
  "categoryField": "name",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }
} );

#chartdiv {
    width: 100%;
    height: 400px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://www.amcharts.com/lib/3/amcharts.js"></script><scriptsrc="https://www.amcharts.com/lib/3/serial.js"></script><scriptsrc="https://www.amcharts.com/lib/3/themes/light.js"></script><divid="chartdiv"></div>