JSFiddle - React, Tailwind, and code Playground

by Robert Tome

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div"></div>

JavaScript

function drawChart() {

    var data = new google.visualization.DataTable();
    
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn('number', 'Average');
    data.addColumn('number', 'Vertical Line');
    
    data.addRows([
        [1, 5, 3, null],
        [3, 4, 3, null],
        [5, 2, 3, null],
        [2, null, null, 0], // add vertical line
        [2, null, null, 5],
    ]);
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, {
        height: 400,
        width: 600,
        seriesType: 'bars',
        bar: {
            xgroupWidth: '8%'
        },
        series: {
            0: {
                color: '#47BA00'
            },
            1: {
                // average
                color: '#0000ff',
                type: 'line',
                enableInteractivity: false
            },
            2: {
                // vertical line
                color: '#ff0000',
                type: 'line',
                enableInteractivity: false
            }
        },
        tooltip: {
            isHtml: true
        },
        vAxis: {
            format: '###',
            minValue: 1,
            maxValue: 5
        },
        legend: {
            position: 'none'
        }
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});