HightChart - Type 'bar'

by NunoMira

HTML

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

<div id="container" style="height:150px"></div>

JavaScript

$(function ()
{
    var data = [5,2,4];
    var dataSum = 0;

    for (var i=0; i<data.length; i++)
    {
        dataSum += data[i]
    }    

    //$("#container").highcharts(
		Highcharts.chart('container',
		{
        chart:
        {
            //renderTo:'container',
            type:'bar',
            backgroundColor: 'transparent',
            //height: 200,
        },
        tooltip:
        { 
            enabled: false //para não aparecer aquela popup no hover das barras
        },
        navigation:
        {
            buttonOptions:
            {
              enabled: false
            }
        },
        title:
        {
            text:''
        },
        legend:
        {
            enabled: false,
        },
        xAxis:
        {
            //tickWidth: 0,
            gridLineWidth: 0,
            title:
            {
                text:''
            },
            type: 'category' //para aparecer as labels do lado esquerdo
        },
        yAxis:
        {
            gridLineWidth: 0,
            title:
            {
                text:'',
            },
            labels:
            {
                enabled: false,
                formatter:function()
                {
                    var pcnt = (this.value / dataSum) * 100;
                    return Highcharts.numberFormat(pcnt,0,',') + '%';
                }
            }
        },
        plotOptions:
        {
            bar:
            {
                shadow: false,
                cursor: 'pointer',
                dataLabels:
                {
                    enabled:true, //para aparecer os valores à frente do gráfico
                    formatter:function()
                    {
                        var pcnt = (this.y / dataSum) * 100;
                        return Highcharts.numberFormat(pcnt) + '%';
                    }
                }
            },
            series:
            {
                  //stacking: 'normal', //para colocar...