简体   繁体   中英

How do you position the labels in jqPlot stacked bar charts?

I can't figure out how to position the labels within the bar chart. Is there a way to centre them within it's respective bar when they are stacked? In the picture below most of them seem to be reasonably in the middle except there is just one which sinks right to the bottom. I have no idea how to change this. I've tried adding a margin in the css but that seems to have no effect. I've also tried playing with the x/ypadding in the pointLabel option but it only seems to move it across but not up or down. jqPlot

var s1 = [31, 10, 20, 44],
                s2 = [15, 4, 7, 16],
                ticks = ['May', 'June', 'July', 'August'];

            $.jqplot('graph_pnl2', [s1, s2], {
                stackSeries: true,
                seriesColors:['#73C774', '#C7754C'],

                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: true},
                    pointLabels: { show: true, location: 'e', xpadding: 25, ypadding: 25},
                },

                legend: {
                    show: false,
                    placement: 'insideGrid'
                },
                axes: {

                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                    yaxis: {
                        pad: 0,
                        tickOptions: {formatString: '%d'}
                    }
                }
            });

you didn't notice that in the second stacked column there is only one value...(where is the 10 value column?) Ok. It seems that you are using some property uncorrectly... I think that is "pad: 0" on yaxis property. Please delete it or comment it out.

        yaxis: {
            //pad: 0,
            tickOptions: {formatString: '%d'}
        }

Here is the code on JSFiddle.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM