Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display points labels on bar - jqPlot

I have a bar chart with multiple color that looks like this enter image description here

the code I used :

$(document).ready(function(){
    var line1 = [['Kliks', 119],['Unieke kliks', 91],['Afgemeld', 12]];

    $('#chart3').jqplot([line1], {
        seriesColors:['#74b6e7', '#003246', '#e22a20'],
        pointLabels:{show:true, stackedValue: true},
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                varyBarColor: true
            }
        },
        series:[
             {pointLabels:{
                show: true,
                labels:['119', '91', '12']
              }}],
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});

I would like to display the bar points values in order for the chart to look like this enter image description here

Is this possible? I have tried with pointLabels but they didn't display

series:[
    {pointLabels:{
        show: true,
        labels:['119', '91', '12']
}}],
like image 689
John Bale Avatar asked Feb 15 '23 05:02

John Bale


2 Answers

It was a bit of a hack to align the labels horizontally so i used Jquery (for two elements and CSS for the one inbetween).

Here is a Fiddle for the label values :

    series:[
         {pointLabels:{
           show: true,
           location:'s',
           ypadding : 5,
         }}],

http://jsfiddle.net/u7FqE/2/

like image 62
Maikeximu Avatar answered Feb 17 '23 19:02

Maikeximu


I have managed to display the points, here is the code i used

            seriesColors:['#74b6e7', '#003246', '#e22a20'],
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                shadow: false,
                barPadding: 0,
                barMargin: 0,
                barWidth: 51,
                //groups: 1,
                rendererOptions: {
                    fillToZero: true,
                    varyBarColor: true
                },
                    pointLabels: { show: false }
            },
            series:[
             {pointLabels:{
                show: true,
                labels:['119', '91', '12']
              }}],
like image 21
John Bale Avatar answered Feb 17 '23 19:02

John Bale