I have below setting done for my amcharts serial-graph.
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 = "$ [[amount]]";
valueField = "amount";
pieLabel = "$ [[value]]";
balloonText1 = "$ [[amount1]]";
balloonText2 = "$ [[amount2]]";
balloonText3 = "$ [[amount3]]";
balloonText4 = "$ [[amount4]]";
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,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText1 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color1",
"valueField": valueField1,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText2 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color2",
"valueField": valueField2,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText3 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color3",
"valueField": valueField3,
"numberFormatter": {
"precision": 2,
"decimalSeparator": ".",
"thousandsSeparator": ","
}
}, {
"balloonText": "<b>" + balloonText4 + "</b>",
"fillAlphas": 0.9,
"lineAlpha": 0,
"type": "column",
"colorField": "color4",
"valueField": valueField4,
"numberFormatter": {
"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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>As can be seen from above code, I've applied numberFormmater for all the graphs field. I have assigned value through variable as in var labelText, valueField, balloonText1, balloonText2, etc, in the actual UI because, this graph can be changed from amount display to count display as taken from the data So the above setting. But in spite of all these, the amount is not getting formatted. Any suggestions or help on this would be really appreciable.
