amCharts 4: sum of values does not work when loading external data

Question

I am loading an external data and values are working on series and tooltips pretty fine but the main value that is the sum is returning "undefined" as your see:

Here is the working code chart when I use static data. I put // in the dataSource that I am using to load the external data.

am4core.useTheme(am4themes_animated); //Theme

var chart = am4core.create("chartdiv", am4charts.PieChart);
chart.hiddenState.properties.opacity = 0; // Cria o fade-in inicial

chart.data = [
  {
    tipo: "Call",
    value: 347548256.09
  },
  {
    tipo: "Put",
    value: 424644842.25
  }
]
//chart.dataSource.url = "http://www.stock1.com.br/public/js/datasource/volume_opcoes.json";
chart.language.locale = am4lang_pt_BR;

/*
chart.numberFormatter.numberFormat = "#a";
chart.numberFormatter.bigNumberPrefixes = [
  { "number": 1e+3, "suffix": "K" },
  { "number": 1e+6, "suffix": "M" },
  { "number": 1e+9, "suffix": "B" }
];
*/
chart.radius = am4core.percent(70);
chart.innerRadius = am4core.percent(40);
chart.startAngle = 180;
chart.endAngle = 360;

var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.category = "tipo";

series.slices.template.cornerRadius = 10;
series.slices.template.innerCornerRadius = 7;
series.slices.template.inert = true;
series.slices.template.stroke = new am4core.InterfaceColorSet().getFor("background");
series.slices.template.strokeWidth = 1;
series.slices.template.strokeOpacity = 1;
series.slices.template.tooltipText = "R$ {value.value}";
series.slices.template.tooltipText.fill = am4core.color("#ffffff");

series.alignLabels = false;
series.labels.template.bent = true;
series.labels.template.radius = 8;
series.labels.template.padding(0,0,0,0);
series.labels.template.fill = am4core.color("#475F7B");

series.hiddenState.properties.startAngle = 90;
series.hiddenState.properties.endAngle = 90;

var label = chart.seriesContainer.createChild(am4core.Label);
label.fill = am4core.color("#475F7B");
label.textAlign = "middle";
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.adapter.add("text", function(text, target) {
  return "[bold font-size:18px]" + "R$" + series.dataItem.values.value.sum + "\n" + "[font-size:14px]Volume Total[/]";
});

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/lang/pt_BR.js"></script>
<div id="chartdiv"></div>

Here you see the sum working because I am loading the data right here. This snippet doesn't let me use my json. By the way, the one I am trying to load is: json.

A second problem I am facing is the reduction of large numbers that is not working as it should. I let commented on the snippet above.

Does anyone know where I'm going wrong?

Answer 1

After a long searching and reading amCharts 4 documentation, here is the answer:

The "undefined" was solved by changing the var label and removing the label.adapter.add to:

var label = series.createChild(am4core.Label);
label.text = "[bold font-size:16px]R${values.value.sum}\n[normal]Volume Total";
label.fill = am4core.color("#475F7B");
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";

The second problem, about the Big Numbers, was solved changing the chart.numberFormatter.numberFormat = "#a"; to chart.numberFormatter.numberFormat = "#.0a";.