Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

https://www.amcharts.com/javascript-charts/

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;

          }
like image 663
sm1l3y Avatar asked Jan 01 '23 03:01

sm1l3y


1 Answers

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.

like image 193
sm1l3y Avatar answered May 16 '23 08:05

sm1l3y