CODEWITHSUNDEEP
jqueryhtmlcssjqplot
renathy
renathy

Reputation: 5355

jqplot: align bars with labels using multiple series bars

I am not able to align bars with labels. This happens because I have multiple series.

I need:

1) bar charts with 5 boxes

2) each box represents seperate item, should have seperate color

3) legend should have 5 items in it

4) bar charts shoudl be aligned with labels (in the best sollution bar charts would be wide)

I have achieved first three, but I cannot achive fourth.

Here is what I have: 

var chartData = [
    [['Portfolio Risk', 1]],
    [['Model Risk', 4]],
    [['Recovery Risk', 3]],
    [['Capability Risk', 1]],
    [['Forward flow risk', 5]]
];

var ticks = ['Portfolio Risk', 'Model Risk', 'Recovery Risk', 'Capability Risk', 'Forward flow risk'];

plot2 = $.jqplot('chart1', chartData, {
    seriesColors: ['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
                angle: 90
            },           
        },
        yaxis: {
            tickOptions: {
                formatString: '%d'
            },
            max: 5,
            min: 0
        }
    },
    legend: {
        show: true,
        placement: 'outside',
        labels: ticks
    },
});

JSFiddle: http://jsfiddle.net/renatevidruska/27EPk/

As you see bars are not aligned.

Upvotes: 3

Views: 971

Answers (1)

QuestionMarks
QuestionMarks

Reputation: 246

This can be done by simply adding a few options to your seriesDefaults, like so:

seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    rendererOptions: {
        barWidth: 60,
        barPadding: -60


    }

Note that if you want to center the bars, simply make the barPadding value the negative of the barWidth value. In this case, I set the width to 60, so I then set the padding to -60. Here is the fiddle.

Upvotes: 6

Related Questions