Edit in JSFiddle

var now = new Date();

var chart = new tauCharts.Chart({
    type: 'line',
    x: 'x',
    y: 'y',
    data: _.times(35, _.identity)
        .reduce(function (memo, i) {
            var x = i * (Math.PI / 100);
            return memo.concat([
                {
                    x: new Date(now - days(i)),
                    y: Math.random(x) * 10
                }
            ]);
        }, []),

    plugins: [
        tauCharts.api.plugins.get('tooltip')(),
        tauCharts.api.plugins.get('annotations')({
            items: [
                {
                    dim: 'x',
                    val: [now - days(12), now - days(2)],
                    text: 'Period 2'
                },
                {
                    dim: 'x',
                    val: [now - days(22), now - days(14)],
                    text: 'Period 1',
                    color: '#4300FF'
                },
                {
                    dim: 'y',
                    val: 2,
                    text: 'Bottom line',
                    color: '#FFAB00'
                },
                {
                    dim: 'x',
                    val: now - days(30),
                    text: '30 days ago',
                    color: 'green'
                }
            ]
        })
        
    ]
});

chart.renderTo('#target');

function days (i) {
    return i * 1000 * 60 * 60 * 24;
};
<div id="target"></div>
html,body,#target{
 width:100%;
 height:300px;
 margin:0;
 padding: 0;
}

#target > svg{
 display:block;
}