CODEWITHSUNDEEP
javascriptcssamcharts
Bogaso
Bogaso

Reputation: 3308

How to remove Thousand 'k' suffix from Amcharts-Stockchart

I have created a Stockchart using Amcharts available in https://codepen.io/Volabos/pen/PyzmYd

Where everything looks good, I however want to get rid of the Thousand-k suffix from Y-axis lables as well as from Baloon, instead I desire to have Thousand seperator + rounded value upto 2.

Is there any possibility to achieve such?

Besides, I also want to set various CSS properties of the div class = 'Right' dynamically based on the value of "value2" e.g. if its value is greater than 500 then Font-color would be green otherwise red.

Any pointer would be highly appreciated.

Upvotes: 0

Views: 145

Answers (1)

Danny Buonocore
Danny Buonocore

Reputation: 3777

For the y-axis, change usePrefixes in your panelSettings to false:

"panelsSettings": {
  "usePrefixes": false
},

For the balloon, implement balloonFunction to customize the formatting:

stockGraphs: [{
  "id": "g1",
  ...
  "balloonFunction": function(graphDataItem, graph) {
    var value = graphDataItem.values.value;
    return "<div>Value<br/>" + Math.round(value).toLocaleString('en-us'); + "</div>";
  }
}]

Updated pen

EDIT

Here is the updated pen to include dynamic balloon colors based on value2. The new balloonFunction looks like this:

function(graphDataItem, graph) {
  var value = graphDataItem.values.value;
  var value2 = graphDataItem.dataContext.rawData[0].value2;
  return "<div style='color:" + (value2 > 500 ? 'green' : 'red') + "'>Value<br/>" + 
    Math.round(value).toLocaleString('en-us'); +
    "</div>";
}

You can clean this up with string interpolation and CSS classes as well, but this is basically the technique.

Upvotes: 1

Related Questions