How to add custom background to Google Charts

Question

Google have introduced a stock chart to their results which highlights "After hours":

I've had a hunt around the documentation and I can't see anything obvious that would suggest how to achieve a similar effect (even the line markers change colour). The closest I have found is this this jsfiddle (asgallant/apH2B/) which shows horizontal zoning -but doesn't alter the colour of the line.

Does anyone have any suggestions on how to achieve this effect?

Answer 1

I managed to achieve this effect by generating a div ontop of the chart (with an absolute position). Also made up some javascript to redraw the chart and add a Grey line in the selected interval.

Input function:

function updateShader() {
    // gets the entered values from the fields
    var start = Math.round(parseInt(document.getElementById('startPos').value))
    var width = Math.round(parseInt(document.getElementById('interval').value))

    // draws the chart again with the entered filters
    drawBasic(start, width);

    //converts the entered values to ISH pixels    
    start = Math.round(start * 5.125)
    width = Math.round(width * 5.125)

    // special case when start = end point, so it will be grey on a little on both sides
    if (start == width) {
        start = start + 69
    } else {
        start = start + 73
    }
    // changes the "cover-box" to fit the entered values
    document.getElementById('cover').style.marginLeft = start + "px";
    document.getElementById('cover').style.width = width - start + 73 + "px";
}

And the CSS for the cover box:

#cover {
    position:absolute;
    width:0px;
    height:124px;
    margin-top:38px;
    margin-left:73px;
    pointer-events:none;
    background: rgba(0, 0, 0, 0.5);
    z-index:2;
}

There are some flaws, like it allows for the "cover" box to be drawn outside the chart but overall this solution would work. Maybe throw in some more user-input checks.

I also changed the tooltip to be HTML, so I could change the z-index of it and via that generate it ontop of the cover box.

Finally, complete fiddle .