Get number and percentage on Highchart´s chart

Question

I'm doing a combined graph. I'm stuck on how to represent the line in 2 values, both in number and in percentage. I do not understand if the same Highcharts performs the calculations or I must add a series or node of additional data to be able to represent. The formula would be

100 - ((answered calls * 100) / received calls)

I do not understand where to put or send an array already with that information, but how I render both values, abandonment in value and in percentage

Highcharts.chart('container', {
    title: {
        text: 'Inbound'
    },
    xAxis: {
        categories: ['January', 'Febraury', 'March', 'April', 'May', 'Jun']
    },
    labels: {

    },
    series: [{
        type: 'column',
        name: 'calls received',
        data: [7128,5067,5816,6005,6569,7260]
    }, {
        type: 'column',
        name: 'calls answered',
        data: [5664,4820,5456,5401,5846,5503]
    }, {
        type: 'column',
        name: 'calls abandoned',
        data: [1463,159,360,603,722,1757]
    }, {
        type: 'line',
        name: 'Abandon',
        data: [1463,159,360,603,722,1757],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
        },

    }, ]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

You could use a shared tooltip and a formatter function:

tooltip: {
    formatter: function () {
        let s = '<b>' + this.x + '</b>';

        this.points.forEach(point =>  {
            s += '<br/>' + point.series.name + ': ' +
                (point.series.name === 'Abandon' ?
                    ((this.points[2].y * 100) / this.points[0].y).toFixed(2) + '%' :
                    point.y)
        });

        return s;
    },
    shared: true
}

Highcharts.chart('container', {
    title: {
        text: 'Inbound'
    },
    xAxis: {
        categories: ['January', 'Febraury', 'March', 'April', 'May', 'Jun']
    },
    labels: {

    },
    series: [{
        type: 'column',
        name: 'calls received',
        data: [7128,5067,5816,6005,6569,7260]
    }, {
        type: 'column',
        name: 'calls answered',
        data: [5664,4820,5456,5401,5846,5503]
    }, {
        type: 'column',
        name: 'calls abandoned',
        data: [1463,159,360,603,722,1757]
    }, {
        type: 'line',
        name: 'Abandon',
        data: [1463,159,360,603,722,1757],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        },

    }],
    tooltip: {
        formatter: function () {
            var s = '<b>' + this.x + '</b>';

            this.points.forEach(point =>  {
              s += '<br/>' + point.series.name + ': ' +
              
                (point.series.name === 'Abandon' ? 
                   ((this.points[2].y * 100) / this.points[0].y).toFixed(2) + '%' : 
                   point.y)
                
            });

            return s;
        },
        shared: true
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>