jqplot bar and line graph where line graph is behind

Question

When I make a bar line graph, the line is on top by default. I have a filled line graph and I want it to be behind my bar graph. Is there a way to do this?

Below is my code, it looks lengthy but most of it is just additional options. There's a bar graph of monthly energy values, and the line graph (y2axis) is the cumulative energy.

<script type="text/javascript">
$(document).ready(function () {
var rendered = false;
    $("#@uniqueId")[0].RenderGraph = function RenderGraph() {
        if(!rendered)
        {
            rendered = true;
            var energyValues = @(serializer.Serialize(Model.YAxis.Select((saving, index) => new double[] { index + 1, saving })))
            var cumulativeValues = @(serializer.Serialize(Model.Y2Axis.Select((total, index) => new double[] { index + 1, total })))
            var xticks = @Html.Raw(serializer.Serialize(Model.XAxis.Select((month, index) => new object[] { index + 1, month })))

            var options = {
                series: [
                    {
                        // Bar graph options
                        renderer: $.jqplot.BarRenderer,
                        color: '#009ED6'
                    },
                    {
                        // Line graph options
                        yaxis: 'y2axis',
                        color: '#3399FF',
                        fillColor: '#59ACFF'
                    }
                ],
                seriesDefaults: {
                    rendererOptions: {
                        barWidth: 25,
                        highlightMouseOver: false,
                        smooth: true
                    },
                    showMarker: false,
                    fill: true,
                    fillAlpha: 0.5,
                    fillAndStroke: true
                },
                grid: {
                    drawBorder: false,
                    shadow: false,
                    background: 'White'
                },
                axes: {
                    xaxis: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            angle: -90,
                            showGridline: false
                        },
                        ticks: xticks,
                        label: '@Model.XAxisLabel'
                    },
                    yaxis: {
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        labelOptions:
                        {
                            fontSize: '10pt'
                        },
                        label: '@Model.YAxisLabel'
                    },
                    y2axis: {
                        min: 0,
                        tickOptions: {
                            showGridline: false
                        },
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        labelOptions:
                        {
                            fontSize: '10pt'
                        },
                        label: '@Model.Y2AxisLabel'
                    }
                }
            }

            if(energyValues.length > 0)
            {
                $.jqplot("@uniqueId .barLineGraph", [energyValues, cumulativeValues], options);
            }
        }
    }
});
</script>

Answer 1

I solved my own problem, it was so simple I don't know why I didn't do this. The order of the series components matters. I just swapped the line graph and bar graph series (since the second one will be on top of the first one) and swapped energyValues and cumulativeValues when plotting.

For some reason the bars shifted to the right a bit afterwards. I just added negative barPadding in series rendererOptions and it looks perfect now.