Search code examples
amchartsamcharts4

How to export the percentage value in amcharts V4 export functionality


My question is basically the same as How to export the percentage value in amchart V3 export functionality, but using amcharts v4 instead of v3: I want to export the percentage values calculated by amcharts using the chart.exporting functionality.

This is what I have so far. I calculate the percentages and show them in the graph:

const series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = 'hoursCount';
series.dataFields.valueY = 'clientsCount';
series.name = 'Visits';
series.calculatePercent = true;
series.dataFields.valueYShow = 'percent';

Then, I'm configuring the export:

chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.dataFields = {
      hoursCount: 'Name of bins',
      clientsCount: 'Number of clients',
};

However, how can I add the pct calculated by amcharts v4 to the export?


Solution

  • @otmezger has already set it up. series.calculatePercent = true; This means that percentages will be computed twice.

    chart.exporting.adapter.add("data", function(data) {
        var sum = data.data.reduce(function(accumulator, currentDataValue) {
            return accumulator + parseFloat(currentDataValue.clientsCount);
        }, 0);
        data.data.forEach(function(currentDataValue) {
            currentDataValue.percents =
                (parseFloat(currentDataValue.clientsCount) / sum * 100).toFixed(1) + "%";
        });
        return data;
    });
    

    The problem has been resolved by retrieving the data from chart.series.

    chart.exporting.adapter.add("data", function(data, target) {
        for (var i = 0; i < data.data.length; i++) {
            var v0 = chart.series._values[0];
            data.data[i].percent = Math.round((v0.dataItems.values[i].values.value.percent || 0) * 10) / 10;
        }
        return data;
    });
    

    In the new version, it does not calculate percentages twice.