Domain Line Annotation

by dlaliberte

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" ></div>

JavaScript

google.load("visualization", "1.0", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Year', {role:'annotation', id:'lines'}, 'Sales', 'Expenses', 'Profit'],
        ['2014', null, 1000, 400, 200],
        ['2015', null, 1170, 460, 250],
        ['2016', '.', 660, 1120, 300],
        ['2017', null, 1030, 540, 350]
    ]);
    var chartType = 'ColumnChart';
    var options = { 
        title: 'Column Chart with Domain Line Annotation',
        annotations: {
            "domain": { style: 'line', textStyle: { color: 'none' } }
        }
    };
    var chartWrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        containerId: 'chart_div',
        dataTable: data,
        options: options
    });
    chartWrapper.draw();
}