Search code examples
highchartspie-chart

Highchart - Pie chart negative value when downloadXLS & viewData


i try to make negative value show in pie chart , and it success but when i use exporting 'downloadXLS' and 'viewData' the value its always show possitive, i know when use pie chart the data value must be possitive, but there is any method when export to 'downloadXLS' and 'viewData' can edit value data to negative ? this is jsfiddle when i try to make the chart https://jsfiddle.net/zhpnos50/3/

Highcharts.chart('container', {
    chart: {
            type: 'pie',
        },
        title: {
            text: 'Chart'
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormatter: function () {
                if (this.y === null) {
                    return this.name + ': 0%';
                } else {
                    return this.name + ': ' + (this.negative ? '-'+ this.y : this.y) + '%';
                }
            },
            useHTML: true
        },
        legend: {
            itemStyle: {
                fontSize: '11px',
            },
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)',
            labelFormatter: function () {
                if (this.y === null) {
                    return this.name + ': 0%';
                } else {
                    return this.name + ': ' + (this.negative ? '-'+ this.y : this.y) + '%';
                }
            },
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                  formatter() {
                    let neg = this.point.negative,
                      value = this.point.negative ? -this.y : this.y,
                      negativeColor = Highcharts.defaultOptions.colors[0];

                    return '<b>'+this.point.name+'</b>: '+value+' %'
                  }
                }
            },
            series: {
                cursor: 'pointer',
              
            }
        },
        series: [{
            name: 'Value',
            data: [{
                name: 'A',
                y: 106.733600
            }, {
                name: 'B',
                y: 0.725800
            }, {
                name: 'C',
                y: 0.000000
            }, {
                name: 'D',
                y: 7.530000,
                negative: true
            }, {
                name: 'E',
                y: 0.070500
            }]
        }],
        exporting: {
            sourceHeight: 800,
            sourceWidth: 800,
            scale: 1,
            buttons: {
                contextButton: {
                    menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadXLS','viewData']
                }
            }
        }
});
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>


Solution

  • You can add the below plugin to modify exported values:

    (function(H) {
        H.addEvent(H.Chart, 'exportData', function(e) {
            const dataRows = e.dataRows;
    
            this.series[0].points.forEach(point => {
                if (point.options.negative) {
                    // +2 to skip title rows
                    dataRows[point.index + 2][1] = -point.y;
                }
            });
        });
    }(Highcharts));
    

    Live demo: https://jsfiddle.net/BlackLabel/ert78shL/

    Docs: https://api.highcharts.com/highcharts/exporting.csv