Cómo dar formato a Highcharts?

Question

Estoy utilizando highchart (biblioteca gráfica jQuery). Estoy indicando el eje con información sobre herramientas. Ahora necesito para mostrar valor del eje Y en la parte superior de las respectivas bar. ¿Cómo puedo hacer eso

Mi ejemplo gráfico

Pregunta:. Para mostrar los valores de eje Y en la parte superior de la respectiva barra de highchart

Answer 1

Mi solución final es para mi gráfica esperada

        var chart;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'faq_view_graph',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Category View'
            },
            xAxis: {
                categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6', 'Category7', 'Category8', 'Category9', 'Category10'],
                title:{
                    text: 'Views'
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Category'
                }
            },
            tooltip: {
                enabled: true,
                formatter: function() {
                    return ''+this.series.name +': '+ this.y;
                }
            },
            point: {
                events: {
                    click: function() {
                        alert('check');
                    }
                }
            },

///////////////////////////////////////////////////////////////////////////////
          plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                alert ('Category: '+ this.x +', value: '+ this.y);
                            }
                        }
                    }
                }
            },


///////////////////////////////////////////////////////////////////////////////



                series: [{
                name: 'Number of visits',
                data: [5, 3, 4, 10, 2, 19, 56, 23, 21, 70],
        //Codes to display value on top of each bar
            dataLabels: {
                enabled: true,
                rotation: 0,
                color: '#FFFFFF',
                align: 'right',
                x: -3,
                y: 10,
                formatter: function() {
                    return this.y;
                },
                style: {
                    font: 'normal 13px Verdana, sans-serif'
                }
            }
            }]
        });
//////////////////////////////Graph/////////////////////////////////////////////

    });

Answer 2

Hightcharts tiene un demo con el comportamiento deseado:

http://www.highcharts.com/demo/column-rotated-labels

Esta es la parte del código que crea las etiquetas de las barras:

dataLabels: {
  enabled: true,
  rotation: -90,
  color: Highcharts.theme.dataLabelsColor || '#FFFFFF',
  align: 'right',
  x: -3,
  y: 10,
  formatter: function() {
    return this.y;
  },
  style: {
    font: 'normal 13px Verdana, sans-serif'
  }
}

Answer 3

La configuración que está buscando en vivo en series.dataLabels:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Category View'
    },
    xAxis: {
        categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
    },
    yAxis: {
        title: {
            text: 'Views'
        }
    },
    series: [{
        name: 'Number of Visits',
        data: [5, 3, 4, 7, 2],
        dataLabels: {
            enabled: true,
            formatter: function() {
               return this.y;
            }
         }       
    }]
});