So I used guidemosemove API Event and triggered a chart update with modify. Inside that I'm applying rules to style the plots. We also have addrule in our api, but I would suggest the way I implemented it. I can change the lineWidth and the alpha for the shaded region in area charts.

Chart config

var myConfig = {
    type: 'area',
    title: {
        text: 'Move cursor over chart'
    },
    plot: {
        aspect: 'spline',
  midPoint:false,
  lineWidth: 2,
  alpha:0,
        alphaArea:.2,
  tooltip:{visible:false}
    },
    crosshairX: {},
    series: [
        {
            values: [35,42,67,89,25,34,67,85]
        },
{
   values: [135,142,167,189,125,134,167,185]
}
    ]
};
 

API Code

// bind event for crosshair updating
var previousPosition = null;
zingchart.bind(null, 'guide_mousemove', function(e) {
 
    // get node scale information
    var nodeInfo = zingchart.exec(e.id, 'getxyinfo', {
        x: e.guide.x,
        y: e.guide.y
    });
    var currentPosition = (nodeInfo[0] && nodeInfo[0].scalevalue) ? nodeInfo[0].scalevalue : null;
 
    // light sanity checks
    // dont want to update if value stayed the same
    if (currentPosition > -1 && currentPosition != previousPosition) {
        console.log('hi')
        zingchart.exec(e.id, 'modify',{
            data: {
                plot: {
                    rules: [
                        {
                            rule: '%kv < ' + currentPosition,
                            lineWidth: 5,
                        },
                        {
                            rule: '%kv < ' + currentPosition,
                            alphaArea: 0,
                            alpha:1
                        }  
                    ]
                }
            }
       });
    }
    previousPosition = currentPosition;
});

// render chart
zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: '100%',
    width: '100%'
});

Documentation

Did this answer your question?