Crazy zOrders!

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    def.setDebug(10);
    new pvc.AreaChart({
        canvas: 'cccExample',
        width:  600,
        height: 250,

        // Data source
        crosstabMode: false,

        // Data
        timeSeries: true,

        axisGrid_zOrder: 0,

        // Main plot
        plots: [
            { // zOrder areas -7
                name: "main",
                stacked: true,
                areasVisible: true,
                linesVisible: true
            },
            { // zOrder dots 1
                type: "point",
                dotsVisible: true,
                colorAxis: 2
            }
        ],
        color2AxisTransform: function(c){return c.brighter(0.7);},

        // Cartesian axes
        axisGrid: true,
        axisGrid_strokeStyle: 'purple',
        axisOffset: 0,

        // Chart/Interaction
        animate:    false,
        selectable: true,
        hoverable:  true
    })
    .setData(relational_01)
    .render();
});