How to format y axis as currency using amcharts 4 with angular 7

Question

I have looked through the documentation for amcharts version 4 (https://www.amcharts.com/javascript-charts/) and I cannot seem to find out how to format the y axis as currency. There is documentation on formatting the y axis in other manners but currency does not seem to be one of them. Anyone out there know how or where to begin?

I have the above chart thus far, just need to know how or where to format the y axis as currency. I currently have the labels when you hover over the lines formatted as currency fine, as that was rather straightforward. Here is my function to create the axis:

function createAxisAndSeries(field, name, opposite) {
          const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

          const series = chart.series.push(new am4charts.LineSeries());
          series.dataFields.valueY = field;
          series.dataFields.dateX = 'date';
          series.strokeWidth = 2;
          series.yAxis = valueAxis;
          series.name = name;
          series.tooltipText = '{name}: [bold]${valueY}[/]';
          series.tensionX = 0.8;

          const interfaceColors = new am4core.InterfaceColorSet();

          valueAxis.renderer.line.strokeOpacity = 1;
          valueAxis.renderer.line.strokeWidth = 2;
          valueAxis.renderer.line.stroke = series.stroke;
          valueAxis.renderer.labels.template.fill = series.stroke;
          valueAxis.renderer.opposite = opposite;
          valueAxis.renderer.grid.template.disabled = true;

          }

amcharts 4 was made with typescript, usually I gather that most people that are using typescript/amcharts 4 are using it with Angular (as am I). — sm1l3y
@sm1l3y That's not exactly a safe assumption. Folks also use this with React, Vue and even Vanilla JS. The point being made is to avoid adding unnecessary tags to questions if the code/problem does not involve them at all - there's no Angular code, so that doesn't apply here. It's not really a problem specifically related to TypeScript either. — xorspark

sm1l3y sm1l3y · Accepted Answer · 2019-03-31T03:20:09

After some R&D, this solved the issue for me:

valueAxis.numberFormatter = new am4core.NumberFormatter();
valueAxis.numberFormatter.numberFormat = '$#,###.##';

Hopefully, it helps someone else out there searching one day.

How to format y axis as currency using amcharts 4 with angular 7

1 Answers