Is it possible to have reqular bar and stacked bar in the same jqPlot chart?

Question

I am trying to build a bar chart where 1st series represent the revenue and the next three represent different kind of expenses. So 1st series to be a single bar and the rest three series as stacked bar. Here is my code for the same.

var s0 = [15, 17, 19, 21];
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
var ticks = ['May', 'June', 'July', 'August'];
var plot3 = $.jqplot('chart1', [s0, s1, s2, s3], {
    stackSeries: true,
    animate: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true,
        },
        rendererOptions: {
            fillToZero: true,
            barMargin: 30,
            barWidth: 50,
            barPadding: 5,
            barDirection: 'vertical'
        },
    },
    series: [
        {
            disableStack: true,
            label: 'Revenue'
        },
        {label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3'}
    ],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '13pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {
        }
    },
    legend: {
        show: true,
        location: 'e',
        placement: 'outside'
    }
}); 

I have addded disableStack: true for the first series to exclude it from the stack but the chart still considers it as a part of the stack. Here is the output of my code.

Is there a way to fix this ? Thanks.

Answer 1

Yes. It is the order of the series you pass as argument that is not correct. BEFORE the stacked series AFTER the single bar series and not viceversa...

So you have to move the first series as the last argument...

var plot3 = $.jqplot('chart', [s1, s2, s3, s0], {

and then you need to set the disableStack property on 'true' for the last series...

series: [
    {label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3',label: 'Revenue', disableStack: true}
],

...and you need to adjust the margins, widts and padding of the columns as you prefer...