Search code examples
jquery-pluginsgoogle-apigoogle-visualizationgchart

How to label my bar chart with numbers?


I am using gchart and I am trying to use markers to label my bar char with numbers. So that ever bar has a number value on top of it.

I tried

markers: [$.gchart.marker('number', 'red', -1)]
markers: [$.gchart.marker('number', 'red', -1, -1)]
markers: [$.gchart.marker('number', 'red', -1, 'every')]
markers: [$.gchart.marker('number', 'red', -1, 'every1')] 

I can only make it appear on the one bar. I want it to show up on every bar.

What am I doing wrong?

See it has no label on the first one.

https://chart.apis.google.com/chart?chs=400x500&cht=bvg&chd=t:55|47&chco=FDFF0F,1FEEFF&chm=N,ff0000,-1,-1,10,0&chdl=test2|test1&chdlp=b|l&chxt=x,y&chxl=0:|atest

 $('#id').gchart({
                        type: 'barVertGrouped',
                        markers: [$.gchart.marker('number', 'red',-1)],
                        height: 500,
                        width: 400,
                        series: data, // xml data from server.
                        legend: 'bottom',
                        extension: { chxt: 'x,y', chxl: '0:|atest' }
                    });

Solution

  • For non-stacked bar graphs, you need to add a marker per series:

    $('#id').gchart({
        type: 'barVertGrouped',
        markers: [
            $.gchart.marker('number', 'red',0),
            $.gchart.marker('number', 'blue',1)
        ],
        height: 500,
        width: 400,
        series: [
            $.gchart.series('test1', [47], 'blue'),
            $.gchart.series('test2', [60], 'red')
        ],
        legend: 'bottom',
        extension: { chxt: 'x,y', chxl: '0:|atest' }
    });