HIGHCHARTS - Value of Columns Based on previous Column Value

Question

I got some issue using Highcharts.

I need to draw the height of third column "C" based on values of the column "B" (As default the draw of height at column "C" is based on Column "A") I created a simple example here

$('#container').each(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: this,
                type: 'column',
                margin: 0,
                spacingTop: 0
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: [
                'A',
                'B',
                'C'
                ], title: {
                    text: null
                },
                labels: {
                    style: {
                        fontSize: '9px',
                        font: '9px Arial, Helvetica'
                    },
                    enabled: false
                }
            },
            yAxis: {
                endOnTick: false,
                maxPadding: 0.1,
                gridLineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0,
                min: 0,
                title: {
                    text: ''
                },
                labels: {
                    enabled: false
                }
            }, tooltip: {
                pointFormat: ' <b>{point.val}</b> ',
                shared: true
            },
            legend: {
                enabled: true
            },
            plotOptions: {
                bar: {
                    slicedOffset: 0,
                    size: '100%',
                    dataLabels: {
                        enabled: false
                    }
                },
                series: {
                    slicedOffset: 0,
                    shadow: false,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        formatter: function () {
                            return this.y + '%';
                        }
                    }
                }
            },
            legend: {
                itemStyle: {
                    fontSize: '8px',
                    font: '8px Arial, Helvetica'
                },
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                data: [
                    { y:100, val: 2111, color: '#199ED8' },
                    { y: Math.round(748 / 2111 * 100), val: 748, color: '#6CF' },
                    { y: Math.round(433 / 748 * 100), val: 433, color: '#6FF' }
                ],
                connectNulls: true,
                pointWidth: 58
            }], exporting: {
                buttons: {
                    contextButton: {
                        enabled: false
                    }
                }
            }
        });
    });

Answer 1

I'm working with Julio in this case, and we Solve it. Resolution: http://jsfiddle.net/JVNjs/1203/

 $('#container').each(function () {
    var publico = 2111;
    var abordados = 748;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: this,
            type: 'column',
            margin: 0,
            spacingTop: 0
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: [
            'Público',
            'Abordados',
            'Conversão'
            ], title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '9px',
                    font: '9px Arial, Helvetica'
                },
                enabled: false
            }
        },
        yAxis: {
            endOnTick: false,
            maxPadding: 0.1,
            gridLineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: 0,
            title: {
                text: ''
            },
            labels: {
                enabled: false
            }
        }, tooltip: {
            pointFormat: ' <b>{point.y}</b> ',
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
            },
            series: {
                slicedOffset: 0,
                shadow: false,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        if(this.x == 'Conversão'){
                            return Math.round(this.y / abordados * 100, 0) + '%';
                        }else{
                            return Math.round(this.y / publico * 100, 0) + '%';
                        }
                    }
                }
            }
        },
        legend: {
            itemStyle: {
                fontSize: '8px',
                font: '8px Arial, Helvetica'
            },
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            data: [
                { y:publico, color: '#199ED8' },
                { y:abordados, color: '#6CF' },
                { y:433, color: '#6FF' }
            ],
            connectNulls: true,
            pointWidth: 58
        }], exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                }
            }
        }
    });
});